a11y: accessibility issue 2068 (#2779)

* fix: narrator does not announce reloading * fix test case Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Apr 29, 2020 · 012f8ef · 012f8ef
1 parent 6ab67b2
commit 012f8ef
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/Composer/packages/client/__tests__/components/TestController/errorCallout.test.tsx b/Composer/packages/client/__tests__/components/TestController/errorCallout.test.tsx
@@ -21,7 +21,7 @@ describe('<ErrorCallout />', () => {
       />
     );
 
-    const container = document.querySelector('[role="alertdialog"]');
+    const container = document.querySelector('[ data-testid="errorCallout"]');
     expect(container).toHaveTextContent('title test');
 
     const tryButton = getByText(container as HTMLElement, 'Try again');

diff --git a/Composer/packages/client/src/components/TestController/errorCallout.tsx b/Composer/packages/client/src/components/TestController/errorCallout.tsx
@@ -21,14 +21,13 @@ export const ErrorCallout: React.FC<IErrorCalloutProps> = props => {
   const { onDismiss, onTry, target, visible, error } = props;
   return (
     <Callout
-      role="alertdialog"
-      ariaLabelledBy="callout-label-id"
-      ariaDescribedBy="callout-description-id"
       gapSpace={0}
       target={target}
       onDismiss={onDismiss}
       setInitialFocus={true}
       hidden={!visible}
+      data-testid={'errorCallout'}
+      ariaLabel={formatMessage(`{title}. {msg}`, { title: error.title, msg: error.message })}
     >
       <div css={calloutContainer}>
         <p css={calloutLabel} id="callout-label-id">

diff --git a/Composer/packages/client/src/components/TestController/index.tsx b/Composer/packages/client/src/components/TestController/index.tsx
@@ -135,6 +135,12 @@ export const TestController: React.FC = () => {
           hidden={showError}
           onClick={handleOpenEmulator}
         />
+        <div
+          aria-live={'assertive'}
+          aria-label={formatMessage(`{ botStatus}`, {
+            botStatus: publishing ? 'Publishing' : reloading ? 'Reloading' : '',
+          })}
+        />
         <Loading botStatus={botStatus} />
         <div ref={addRef}>
           <ErrorInfo hidden={!showError} onClick={handleErrorButtonClick} count={errorLength} />