From a6d214e6d111fcc860e08caf3329620c698922fa Mon Sep 17 00:00:00 2001
From: Kevin Coughlin <kevintcoughlin@gmail.com>
Date: Sun, 7 Oct 2018 21:28:46 -0700
Subject: [PATCH] Fix a11y violations reported in ContextualMenu examples
 (#6574)

* Fix #6360 #12 - Unique IDs for CtxMenu demo page examples.

* Fix #6360 #2: Add label for hover delay TextField example

* Fix #6360 #1: Add aria-label to search input on filter CtxMenu example

* Add changefiles

* Update ContextualMenu snapshots
---
 ...o-ctx-menu-demo-a11y_2018-10-04-22-47.json | 11 +++++++++
 ...o-ctx-menu-demo-a11y_2018-10-04-22-47.json | 11 +++++++++
 .../FluentStyles.ContextualMenu.Example.tsx   |  2 +-
 .../examples/ContextualMenu.Basic.Example.tsx |  2 +-
 .../ContextualMenu.CustomMenuItem.Example.tsx |  2 +-
 .../ContextualMenu.CustomMenuList.Example.tsx |  8 +++----
 .../ContextualMenu.Header.Example.tsx         |  2 +-
 .../ContextualMenu.ScrollBar.Example.tsx      |  2 +-
 .../ContextualMenu.Section.Example.tsx        |  2 +-
 .../ContextualMenu.Submenu.Example.tsx        |  2 +-
 .../ContextualMenu.Basic.Example.tsx.shot     |  2 +-
 ...extualMenu.CustomMenuItem.Example.tsx.shot |  2 +-
 ...extualMenu.CustomMenuList.Example.tsx.shot |  2 +-
 .../ContextualMenu.Header.Example.tsx.shot    |  2 +-
 .../ContextualMenu.ScrollBar.Example.tsx.shot |  2 +-
 .../ContextualMenu.Section.Example.tsx.shot   |  2 +-
 .../ContextualMenu.Submenu.Example.tsx.shot   | 23 +++++++++++++++++++
 17 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 common/changes/@uifabric/experiments/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
 create mode 100644 common/changes/office-ui-fabric-react/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json

diff --git a/common/changes/@uifabric/experiments/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json b/common/changes/@uifabric/experiments/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
new file mode 100644
index 0000000000000..4649712930b55
--- /dev/null
+++ b/common/changes/@uifabric/experiments/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Fix a11y violations in Fluent ContextualMenu examples",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "keco@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json b/common/changes/office-ui-fabric-react/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
new file mode 100644
index 0000000000000..63946f9791c88
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix a11y violations in ContextualMenu examples",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "keco@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx b/packages/experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx
index 282d078fc2e88..4e6cc2b8e0e2f 100644
--- a/packages/experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx
+++ b/packages/experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx
@@ -10,7 +10,7 @@ export class FluentStylesContextualMenuExample extends React.Component<{}, {}> {
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="FluentStylesContextualMenuExample"
           text="Click for ContextualMenu"
           menuProps={{
             shouldFocusOnMount: true,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index 2a4b26fec019c..80e9c5134b9f7 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -16,7 +16,7 @@ export class ContextualMenuBasicExample extends React.Component {
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="ContextualMenuBasicExample"
           text="Click for ContextualMenu"
           menuProps={{
             shouldFocusOnMount: true,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
index f3aa2309137fa..e2fce194d2cd8 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
@@ -16,7 +16,7 @@ export class ContextualMenuWithCustomMenuItemExample extends React.Component {
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="ContextualMenuWithCustomMenuItemExample"
           text="Click for ContextualMenu"
           menuProps={{
             shouldFocusOnMount: true,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx
index 598ab295479f6..3d02b4722def0 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx
@@ -79,7 +79,7 @@ export class ContextualMenuWithCustomMenuListExample extends React.Component<
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="ContextualMenuWithCustomMenuListExample"
           text="Click for ContextualMenu"
           menuProps={{
             onRenderMenuList: this._renderMenuList,
@@ -125,14 +125,12 @@ export class ContextualMenuWithCustomMenuListExample extends React.Component<
     }));
   }
 
-  private _renderMenuList(
-    menuListProps: IContextualMenuListProps,
-    defaultRender: IRenderFunction<IContextualMenuListProps>
-  ) {
+  private _renderMenuList(menuListProps: IContextualMenuListProps, defaultRender: IRenderFunction<IContextualMenuListProps>) {
     return (
       <div>
         <div style={{ borderBottom: '1px solid #ccc' }}>
           <SearchBox
+            ariaLabel="Filter actions by text"
             placeholder="Filter actions"
             onAbort={this._onAbort}
             onChange={this._onChange}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
index 00bf822558945..46e110fd21b37 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
@@ -6,7 +6,7 @@ export class ContextualMenuHeaderExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
       <DefaultButton
-        id="ContextualMenuButton1"
+        id="ContextualMenuHeaderExample"
         text="Click for ContextualMenu"
         menuProps={{
           shouldFocusOnMount: true,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
index 086825cad8bed..be1738c0cce4e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
@@ -20,7 +20,7 @@ export class ContextualMenuWithScrollBarExample extends React.Component<
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="ContextualMenuWithScrollBarExample"
           text="Click for ContextualMenu"
           menuProps={{
             shouldFocusOnMount: true,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
index e0af00bd3f3b0..8eefecb68c542 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
@@ -8,7 +8,7 @@ export class ContextualMenuSectionExample extends React.Component<any, any> {
     return (
       <div>
         <DefaultButton
-          id="ContextualMenuButton1"
+          id="ContextualMenuSectionExample"
           text="Click for ContextualMenu"
           menuProps={{
             items: [
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
index d9322537476a2..aa283a54c31d1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
@@ -19,7 +19,7 @@ export class ContextualMenuSubmenuExample extends React.Component<any, IContextu
   public render(): JSX.Element {
     return (
       <div>
-        <TextField value={String(this.state.hoverDelay)} onChange={this._onHoverDelayChanged} />
+        <TextField value={String(this.state.hoverDelay)} label="Hover delay (ms)" onChange={this._onHoverDelayChanged} />
         <DefaultButton
           id="ContextualMenuButton2"
           text="Click for ContextualMenu"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot
index f0723b86daf3f..5055ad0acf57c 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot
@@ -75,7 +75,7 @@ exports[`Component Examples renders ContextualMenu.Basic.Example.tsx correctly 1
           color: #212121;
         }
     data-is-focusable={true}
-    id="ContextualMenuButton1"
+    id="ContextualMenuBasicExample"
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot
index 3c2228d3de75b..deb0fde5a3e8e 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot
@@ -75,7 +75,7 @@ exports[`Component Examples renders ContextualMenu.CustomMenuItem.Example.tsx co
           color: #212121;
         }
     data-is-focusable={true}
-    id="ContextualMenuButton1"
+    id="ContextualMenuWithCustomMenuItemExample"
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot
index fd93d7a69be6a..8db17726717bf 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot
@@ -75,7 +75,7 @@ exports[`Component Examples renders ContextualMenu.CustomMenuList.Example.tsx co
           color: #212121;
         }
     data-is-focusable={true}
-    id="ContextualMenuButton1"
+    id="ContextualMenuWithCustomMenuListExample"
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot
index ef2b342ade583..d3766c024e00c 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot
@@ -74,7 +74,7 @@ exports[`Component Examples renders ContextualMenu.Header.Example.tsx correctly
         color: #212121;
       }
   data-is-focusable={true}
-  id="ContextualMenuButton1"
+  id="ContextualMenuHeaderExample"
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot
index 5eb38e4b5b0cd..a218a0efac4cf 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot
@@ -75,7 +75,7 @@ exports[`Component Examples renders ContextualMenu.ScrollBar.Example.tsx correct
           color: #212121;
         }
     data-is-focusable={true}
-    id="ContextualMenuButton1"
+    id="ContextualMenuWithScrollBarExample"
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot
index 81e3cdf20a36d..a3047b215a840 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot
@@ -75,7 +75,7 @@ exports[`Component Examples renders ContextualMenu.Section.Example.tsx correctly
           color: #212121;
         }
     data-is-focusable={true}
-    id="ContextualMenuButton1"
+    id="ContextualMenuSectionExample"
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyPress={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot
index 31c223a335492..62df5e87f4aae 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot
@@ -27,6 +27,29 @@ exports[`Component Examples renders ContextualMenu.Submenu.Example.tsx correctly
           ms-TextField-wrapper
 
     >
+      <label
+        className=
+            ms-Label
+            {
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="TextField0"
+      >
+        Hover delay (ms)
+      </label>
       <div
         className=
             ms-TextField-fieldGroup