Fix: screen reader support and focus indication on links (#625)

Fix: screen reader support and focus indication on links
microsoftgraph · Jul 9, 2020 · 5268204 · 5268204
2 parents 958055a + cacd24e
commit 5268204
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/app/views/app-sections/StatusMessages.tsx b/src/app/views/app-sections/StatusMessages.tsx
@@ -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}
+    onDismiss={actions.clearQueryStatus}
+    dismissButtonAriaLabel='Close'
+    aria-live={'assertive'}>
     {`${queryState.statusText} - ${queryState.status} `}
     {queryState.duration && <>
       {`- ${queryState.duration}`}<FormattedMessage id='milliseconds' />

diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 export function termsOfUseMessage(termsOfUse: any, actions: any, classes: any, language: string) {
   return termsOfUse && (
   <MessageBar messageBarType={MessageBarType.info}
-    isMultiline={false} onDismiss={actions.clearTermsOfUse}>
+    isMultiline={true}
+    onDismiss={actions.clearTermsOfUse}
+    dismissButtonAriaLabel='Close'>
     <FormattedMessage id='use the Microsoft Graph API' />
         <a className={classes.links} href={'https://docs.microsoft.com/' + language +
       '/legal/microsoft-apis/terms-of-use?context=graph/context'} target='_blank'>