Fixing accessibility issue: #4295#4296
Merged
cschlechty merged 3 commits intomicrosoft:masterfrom Mar 20, 2018
Merged
Conversation
Promise based TextField error message is not read by firefox + NVDA
|
|
dzearing
reviewed
Mar 17, 2018
| { this._isDescriptionAvailable && | ||
| <span id={ this._descriptionId }> | ||
| { description && <span className={ css('ms-TextField-description', styles.description) }>{ description }</span> } | ||
| <div aria-live='assertive'> |
Member
There was a problem hiding this comment.
shouldn't this move into the errrorMessage condition block? Otherwise we just add a div there with no content unnecessarily.
Also changes need a change file. Try running npm run change from the root to generate one.
Contributor
Author
There was a problem hiding this comment.
It was not working with NVDA old version. However, I updated to latest version 2018.1 and it is working fine. So, moved div into errorMessage condition block. Updated change file as well. Verified on firefox + NVDA and EDGE + narrator. Thanks.!
dzearing
reviewed
Mar 20, 2018
| { description && <span className={ css('ms-TextField-description', styles.description) }>{ description }</span> } | ||
| { errorMessage && | ||
| <div> | ||
| <div aria-live='assertive'> |
cschlechty
approved these changes
Mar 20, 2018
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Promise based TextField error message is not read by firefox + NVDA
Pull request checklist
$ npm run changeDescription of changes
aria-live="assertive" attribute should be defined on a statically available element. Error message may be loaded dynamically inside that element. For TextField, this attribute was added to DOM dynamically. In order to announce message in live region, Assistive Technology (NVDA) need to detect some element with aria-live defined. Then it announces any message loaded dynamically inside it.
Focus areas to test
All error message combinations for TextField with:
EDGE + Narrator
FireFox + NVDA