Skip to content
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

[Nav][Accessibility] Selected items are not announced by narrator #14982

Closed
wants to merge 7 commits into from
Closed

[Nav][Accessibility] Selected items are not announced by narrator #14982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef57543
Merge pull request #1 from microsoft/master
cimoli-dev Jul 9, 2020
a4bf6de
Merge pull request #2 from microsoft/master
cimoli-dev Sep 10, 2020
4f2d905
change roles to tab and tablist
cimoli-dev Sep 10, 2020
865917a
Revert "change roles to tab and tablist"
cimoli-dev Sep 10, 2020
99becbd
change roles to tab and tablist
cimoli-dev Sep 10, 2020
93fe2cb
Change files
cimoli-dev Sep 10, 2020
bcae018
use treeitem instead of tab
cimoli-dev Sep 14, 2020
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
8 changes: 8 additions & 0 deletions change/office-ui-fabric-react-2020-09-10-13-31-38-user-cimoli-again.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"type": "patch",
"comment": "change roles for nav items to tab to use aria-selected",
"packageName": "office-ui-fabric-react",
"email": "[email protected]",
"dependentChangeType": "patch",
"date": "2020-09-10T20:31:37.999Z"
}
8 changes: 5 additions & 3 deletions packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,11 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
const { styles, groups, theme } = this.props;
const classNames = getClassNames(styles!, { theme: theme!, groups });

const isSelected = this._isLinkSelected(link);
return (
<li key={link.key || linkIndex} role="listitem" className={classNames.navItem}>
// Known issue: Aria-selected and aria-checked are not output correctly for trees
// https://github.com/FreedomScientific/VFO-standards-support/issues/432
<li key={link.key || linkIndex} role="treeitem" className={classNames.navItem} aria-selected={isSelected}>
{this._renderCompositeLink(link, linkIndex, nestingLevel)}
{link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null}
</li>
Expand All @@ -208,7 +210,7 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
const classNames = getClassNames(styles!, { theme: theme!, groups });

return (
<ul role="list" className={classNames.navItems}>
<ul role="tree" className={classNames.navItems}>
{linkElements}
</ul>
);
Expand Down
13 changes: 8 additions & 5 deletions packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,10 @@ exports[`Nav render Nav with overrides correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -150,7 +151,7 @@ exports[`Nav render Nav with overrides correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -299,6 +300,7 @@ exports[`Nav render Nav with overrides correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -307,7 +309,7 @@ exports[`Nav render Nav with overrides correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -518,9 +520,10 @@ exports[`Nav renders Nav correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -529,7 +532,7 @@ exports[`Nav renders Nav correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down
28 changes: 18 additions & 10 deletions packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Basic.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,10 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -72,7 +73,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -308,9 +309,10 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -319,7 +321,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -462,6 +464,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -470,7 +473,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -606,6 +609,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</ul>
</li>
<li
aria-selected={true}
className=
ms-Nav-navItem
{
Expand All @@ -614,7 +618,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -770,6 +774,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -778,7 +783,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -921,6 +926,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -929,7 +935,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -1063,6 +1069,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -1071,7 +1078,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -1214,6 +1221,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -1222,7 +1230,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down
16 changes: 10 additions & 6 deletions ...fice-ui-fabric-react/src/components/__snapshots__/Nav.CustomGroupHeaders.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -71,7 +72,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -214,6 +215,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -222,7 +224,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -399,9 +401,10 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -410,7 +413,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -553,6 +556,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -561,7 +565,7 @@ exports[`Component Examples renders Nav.CustomGroupHeaders.Example.tsx correctly
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down
8 changes: 5 additions & 3 deletions packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Nested.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,10 @@ exports[`Component Examples renders Nav.Nested.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="list"
role="tree"
>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -68,7 +69,7 @@ exports[`Component Examples renders Nav.Nested.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down Expand Up @@ -292,6 +293,7 @@ exports[`Component Examples renders Nav.Nested.Example.tsx correctly 1`] = `
</div>
</li>
<li
aria-selected={false}
className=
ms-Nav-navItem
{
Expand All @@ -300,7 +302,7 @@ exports[`Component Examples renders Nav.Nested.Example.tsx correctly 1`] = `
padding-right: 0px;
padding-top: 0px;
}
role="listitem"
role="treeitem"
>
<div
className=
Expand Down