From e838747d4a89808f73897dd3565279e54570c332 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Mon, 17 Sep 2018 15:56:43 -0700 Subject: [PATCH 1/5] Fix #6360 #12 - Unique IDs for CtxMenu demo page examples. --- .../examples/FluentStyles.ContextualMenu.Example.tsx | 2 +- .../examples/ContextualMenu.Basic.Example.tsx | 2 +- .../examples/ContextualMenu.CustomMenuItem.Example.tsx | 2 +- .../examples/ContextualMenu.CustomMenuList.Example.tsx | 7 ++----- .../examples/ContextualMenu.Header.Example.tsx | 2 +- .../examples/ContextualMenu.ScrollBar.Example.tsx | 2 +- .../examples/ContextualMenu.Section.Example.tsx | 2 +- 7 files changed, 8 insertions(+), 11 deletions(-) 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 282d078fc2e88f..4e6cc2b8e0e2f5 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 (
- ) { + private _renderMenuList(menuListProps: IContextualMenuListProps, defaultRender: IRenderFunction) { return (
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 00bf822558945d..46e110fd21b378 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 ( { return (
Date: Mon, 17 Sep 2018 15:59:13 -0700 Subject: [PATCH 2/5] Fix #6360 #2: Add label for hover delay TextField example --- .../ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d9322537476a2e..aa283a54c31d1d 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 - + Date: Mon, 17 Sep 2018 16:11:52 -0700 Subject: [PATCH 3/5] Fix #6360 #1: Add aria-label to search input on filter CtxMenu example --- .../examples/ContextualMenu.CustomMenuList.Example.tsx | 1 + 1 file changed, 1 insertion(+) 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 c85762fff8d0f3..3d02b4722def00 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 @@ -130,6 +130,7 @@ export class ContextualMenuWithCustomMenuListExample extends React.Component<
Date: Thu, 4 Oct 2018 15:48:05 -0700 Subject: [PATCH 4/5] Add changefiles --- .../keco-ctx-menu-demo-a11y_2018-10-04-22-47.json | 11 +++++++++++ .../keco-ctx-menu-demo-a11y_2018-10-04-22-47.json | 11 +++++++++++ 2 files changed, 22 insertions(+) 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 00000000000000..4649712930b552 --- /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 00000000000000..63946f9791c88b --- /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 From 67b33aa18de3aed1b6c714008c37ec87fedc92a0 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Fri, 5 Oct 2018 11:26:38 -0700 Subject: [PATCH 5/5] Update ContextualMenu snapshots --- .../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 +++++++++++++++++++ 7 files changed, 29 insertions(+), 6 deletions(-) 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 f0723b86daf3f5..5055ad0acf57c1 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 3c2228d3de75be..deb0fde5a3e8ee 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 fd93d7a69be6ae..8db17726717bf8 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 ef2b342ade5839..d3766c024e00c9 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 5eb38e4b5b0cd0..a218a0efac4cf8 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 81e3cdf20a36d2..a3047b215a8401 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 31c223a335492d..62df5e87f4aae1 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 > +