Skip to content

Fix a11y violations reported in ContextualMenu examples #6574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
micahgodbolt merged 6 commits into from
Oct 8, 2018
Merged

Fix a11y violations reported in ContextualMenu examples #6574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e838747
Fix #6360 #12 - Unique IDs for CtxMenu demo page examples.
KevinTCoughlin Sep 17, 2018
cdfde49
Fix #6360 #2: Add label for hover delay TextField example
KevinTCoughlin Sep 17, 2018
5689bd8
Fix #6360 #1: Add aria-label to search input on filter CtxMenu example
KevinTCoughlin Sep 17, 2018
07dee58
Merge branch 'master' into keco/ctx-menu-demo-a11y
KevinTCoughlin Oct 4, 2018
8c49f63
Add changefiles
KevinTCoughlin Oct 4, 2018
67b33aa
Update ContextualMenu snapshots
KevinTCoughlin Oct 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/experiments/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/keco-ctx-menu-demo-a11y_2018-10-04-22-47.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
2 changes: 1 addition & 1 deletion ...experiments/src/components/fluent/styles/examples/FluentStyles.ContextualMenu.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export class FluentStylesContextualMenuExample extends React.Component<{}, {}> {
return (
<div>
<DefaultButton
id="ContextualMenuButton1"
id="FluentStylesContextualMenuExample"
text="Click for ContextualMenu"
menuProps={{
shouldFocusOnMount: true,
Expand Down
2 changes: 1 addition & 1 deletion ...e-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export class ContextualMenuBasicExample extends React.Component {
return (
<div>
<DefaultButton
id="ContextualMenuButton1"
id="ContextualMenuBasicExample"
text="Click for ContextualMenu"
menuProps={{
shouldFocusOnMount: true,
Expand Down
2 changes: 1 addition & 1 deletion ...ic-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export class ContextualMenuWithCustomMenuItemExample extends React.Component {
return (
<div>
<DefaultButton
id="ContextualMenuButton1"
id="ContextualMenuWithCustomMenuItemExample"
text="Click for ContextualMenu"
menuProps={{
shouldFocusOnMount: true,
Expand Down
8 changes: 3 additions & 5 deletions ...ic-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion ...-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion ...-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class ContextualMenuWithScrollBarExample extends React.Component<
return (
<div>
<DefaultButton
id="ContextualMenuButton1"
id="ContextualMenuWithScrollBarExample"
text="Click for ContextualMenu"
menuProps={{
shouldFocusOnMount: true,
Expand Down
2 changes: 1 addition & 1 deletion ...ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
2 changes: 1 addition & 1 deletion ...ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion ...office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Basic.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion ...-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuItem.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion ...-fabric-react/src/components/__snapshots__/ContextualMenu.CustomMenuList.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion ...ffice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Header.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion ...ce-ui-fabric-react/src/components/__snapshots__/ContextualMenu.ScrollBar.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
2 changes: 1 addition & 1 deletion ...fice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Section.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
23 changes: 23 additions & 0 deletions ...fice-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Submenu.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down