diff --git a/change/office-ui-fabric-react-2020-09-10-13-31-38-user-cimoli-again.json b/change/office-ui-fabric-react-2020-09-10-13-31-38-user-cimoli-again.json new file mode 100644 index 00000000000000..5ecea2cece485f --- /dev/null +++ b/change/office-ui-fabric-react-2020-09-10-13-31-38-user-cimoli-again.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "change roles for nav items to tab to use aria-selected", + "packageName": "office-ui-fabric-react", + "email": "cimoli@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-09-10T20:31:37.999Z" +} diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx index 40bfdb5ba59e5f..c0d3a0b9b620b7 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx @@ -187,9 +187,11 @@ export class NavBase extends React.Component 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 ( -
  • + // Known issue: Aria-selected and aria-checked are not output correctly for trees + // https://github.com/FreedomScientific/VFO-standards-support/issues/432 +
  • {this._renderCompositeLink(link, linkIndex, nestingLevel)} {link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null}
  • @@ -208,7 +210,7 @@ export class NavBase extends React.Component implements IN const classNames = getClassNames(styles!, { theme: theme!, groups }); return ( -