-
Notifications
You must be signed in to change notification settings - Fork 84
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
Fix: screen reader support and focus indication on links #625
Conversation
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can improve readability by arranging the props as shown below.
<MessageBar
messageBarType={}
isMultiline={}
onDismiss={}
>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh yeah, thank you for this
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indent by two spaces 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should add a pre-commit hook that runs prettier no? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, we should.
isMultiline={false} onDismiss={actions.clearQueryStatus}> | ||
isMultiline={false} | ||
onDismiss={actions.clearQueryStatus} | ||
dismissButtonAriaLabel='Close' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how does a screen handle this on a localized page?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The screen reader is able to read it as well on a localized page
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes but does it read the english word or is it localized.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's localized
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
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.