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.

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

Addressing Issue #4147 - Nav Buttons have invalid aria-describedby value #4159

Merged

Conversation

oengusmacinog-zz
Copy link
Collaborator

@oengusmacinog-zz oengusmacinog-zz commented Mar 2, 2018

Pull request checklist

Description of changes

nav-ariadescribedby

The ActionButton component used as a Nav item link in the Nav component, was being passed the description prop which wrote out the code highlighted in the before image. The button props interface notes this as a prop only used on compound buttons. My guess is that this was intended to be the areaDescription prop in the first place. I have swapped out the prop name and it now renders as intended with the id reference on a screen reader only span tag.

It currently passes the Nav Link prop title or falls back to name if title is undefined.

@dzearing
Copy link
Member

dzearing commented Mar 2, 2018

Hmmm. there is no aria-description attribute, is there? did you mean aria-label?

@cschlechty I'm a little confused. When i search through the specs for aria-description, I can't find references to it, but I see it in some of our examples. Is this a valid aria attribute?

@dzearing dzearing self-assigned this Mar 2, 2018
Copy link
Collaborator Author

@oengusmacinog-zz oengusmacinog-zz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dzearing the prop in Button props is ariaDescription but the attribute is aria-describedby doc:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

@dzearing dzearing merged commit 132efd3 into microsoft:master Mar 2, 2018
@oengusmacinog-zz oengusmacinog-zz deleted the nav-ariadescribedby-4147 branch March 2, 2018 22:47
Markionium added a commit to Markionium/office-ui-fabric-react that referenced this pull request Mar 4, 2018
* master: (30 commits)
  Addressing Issue microsoft#4147 - Nav Buttons have invalid `aria-describedby` value (microsoft#4159)
  Fix issue 3608: DetailsList horizontal scroll (microsoft#4164)
  Update package.json
  Image SCSS to MergeStyles Part 2: Style Conversion (microsoft#4151)
  Applying package updates.
  [SpinButton] Consistent styles to Button and TextField (microsoft#4098)
  ChoiceGroup: Flex layout for image and icon options (microsoft#4137)
  Initial set of Keytips work in experiments (microsoft#4062)
  Updating tsconfig in button bundle.
  BaseExtendedPicker: Create contextmenu for renderedItem, fix auto focus (microsoft#3954)
  Dropdown: Custom render options for multiselect - Bug fix microsoft#3571  (microsoft#3589)
  Fix documentcard theming (microsoft#4155)
  BasePicker: Fix not used onBlur callback of inputProps (microsoft#4000) (microsoft#4131)
  Allow Elements as Callout targets (microsoft#4134)
  CommandBar: Fixed null commandItemWidths (microsoft#4136)
  add check for when this.suggestionElement may be undefined (microsoft#4157)
  Addressing Issue microsoft#4143 - is-selected missing on ms-Nav-link (microsoft#4158)
  Aria selected (microsoft#4161)
  Move fabric to TypeScript 2.7.2 (microsoft#4153)
  Updating SearchBox examples to have the removed string in placeholder prop.
  ...
Markionium added a commit to Markionium/office-ui-fabric-react that referenced this pull request Mar 5, 2018
* master: (51 commits)
  Applying package updates.
  No unused variable (microsoft#4173)
  Use correct _list ref string (microsoft#4168)
  Nav: wire a link to expand/collapse behavior if it has no URL but has children (microsoft#4171)
  Addressing Issue microsoft#4147 - Nav Buttons have invalid `aria-describedby` value (microsoft#4159)
  Fix issue 3608: DetailsList horizontal scroll (microsoft#4164)
  Update package.json
  Image SCSS to MergeStyles Part 2: Style Conversion (microsoft#4151)
  Applying package updates.
  [SpinButton] Consistent styles to Button and TextField (microsoft#4098)
  ChoiceGroup: Flex layout for image and icon options (microsoft#4137)
  Initial set of Keytips work in experiments (microsoft#4062)
  Updating tsconfig in button bundle.
  BaseExtendedPicker: Create contextmenu for renderedItem, fix auto focus (microsoft#3954)
  Dropdown: Custom render options for multiselect - Bug fix microsoft#3571  (microsoft#3589)
  Fix documentcard theming (microsoft#4155)
  BasePicker: Fix not used onBlur callback of inputProps (microsoft#4000) (microsoft#4131)
  Allow Elements as Callout targets (microsoft#4134)
  CommandBar: Fixed null commandItemWidths (microsoft#4136)
  add check for when this.suggestionElement may be undefined (microsoft#4157)
  ...
chrismohr pushed a commit to chrismohr/office-ui-fabric-react that referenced this pull request Apr 17, 2018
…ribedby` value (microsoft#4159)

* Switched ActionButton prop in Nav from description to ariaDescription

* rush change
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Nav Buttons have invalid aria-describedby value
2 participants