Fix: screen reader support and focus indication on links #625
Conversation
This file contains 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
jobala
reviewed
Jul 2, 2020
| @@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl'; | |||
| export function statusMessages(queryState: any, actions: any) { | |||
| return queryState && ( | |||
| <MessageBar messageBarType={queryState.messageType} | |||
| isMultiline={false} onDismiss={actions.clearQueryStatus}> | |||
| isMultiline={false} onDismiss={actions.clearQueryStatus} | |||
| dismissButtonAriaLabel='Close' aria-live={'assertive'}> | |||
There was a problem hiding this comment.
You can improve readability by arranging the props as shown below.
<MessageBar
messageBarType={}
isMultiline={}
onDismiss={}
>
There was a problem hiding this comment.
Oh yeah, thank you for this
jobala
reviewed
Jul 5, 2020
| @@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl'; | |||
| export function statusMessages(queryState: any, actions: any) { | |||
| return queryState && ( | |||
| <MessageBar messageBarType={queryState.messageType} | |||
| isMultiline={false} onDismiss={actions.clearQueryStatus}> | |||
| isMultiline={false} | |||
There was a problem hiding this comment.
I think we should add a pre-commit hook that runs prettier no? 🤔
ddyett
reviewed
Jul 6, 2020
| isMultiline={false} onDismiss={actions.clearQueryStatus}> | ||
| isMultiline={false} | ||
| onDismiss={actions.clearQueryStatus} | ||
| dismissButtonAriaLabel='Close' |
There was a problem hiding this comment.
how does a screen handle this on a localized page?
There was a problem hiding this comment.
The screen reader is able to read it as well on a localized page
There was a problem hiding this comment.
yes but does it read the english word or is it localized.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Overview
Added aria-live tag on the status message, to enable the screen reader to read the message.
Added an aria-label for the dismiss button on the status message and the terms of use message bar .
Enabled multiline functionality on the terms of use message bar for better focus on the links when using keyboard navigation.
Demo
Notes
Optional. Ancillary topics, caveats, alternative strategies that didn't work out, anything else.
Testing Instructions
To test the status message accessibility
Ensure a screen reader is activated (e.g Narrator)
Step 1: Launch the application on your browser.
Step 2: Navigate to “Run Query” buttons using tab key and activate it by pressing enter key.
Step 3: Observe screen reader is narrating “Status” message.
To test the focus indication on the links
Step 1: Launch the application on your browser.
Step 2: Navigate to 'Microsoft APIs Terms of Use' and 'Microsoft Privacy Statement' link by using tab key.
Step 3: Observe that a focus indicator is clearly visible.