Fix a11y violations reported in ContextualMenu examples (microsoft#6574)

* Fix microsoft#6360 microsoft#12 - Unique IDs for CtxMenu demo page examples. * Fix microsoft#6360 #2: Add label for hover delay TextField example * Fix microsoft#6360 #1: Add aria-label to search input on filter CtxMenu example * Add changefiles * Update ContextualMenu snapshots
kkjeer · Oct 8, 2018 · a6d214e · a6d214e
1 parent 296d90b
commit a6d214e
Show file tree

Hide file tree

Showing 17 changed files with 61 additions and 18 deletions.
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
@@ -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"
+}
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
@@ -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"
+}
diff --git a/...experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx b/...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/...e-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/...e-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/...ic-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx b/...ic-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/...ic-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx b/...ic-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/...-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx b/...-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/...-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx b/...-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/...ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx b/...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/...ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx b/...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/...office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot b/...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/...-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot b/...-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/...-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot b/...-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/...ffice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot b/...ffice-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/...ce-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot b/...ce-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/...fice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot b/...fice-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/...fice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot b/...fice-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