fix: add aria-alert for spinner (#633)

* fix: add announcement for loading spinner
microsoft · Jun 27, 2018 · 0354be5 · 0354be5
1 parent c223b27
commit 0354be5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/public/index.css b/public/index.css
@@ -439,6 +439,10 @@ i[data-icon-name="Delete"]:hover, i[data-icon-name="Edit"]:hover{
     box-shadow: none !important;
     position: relative;
 }
+.cl-screen-reader {
+  position: absolute;
+  left: -999em;
+}
 
 .cl-chatmodal {
   height: 100%;

diff --git a/src/components/modals/SpinnerWindow.tsx b/src/components/modals/SpinnerWindow.tsx
@@ -15,17 +15,22 @@ const debug = false;
 class SpinnerWindow extends React.Component<Props, {}> {
     render() {
         return (
-            <Modal
-                isOpen={this.props.displaySpinner.length > 0}
-                isBlocking={true}
-                containerClassName='cl-spinner'>
-                <Spinner size={SpinnerSize.large} />
-                {debug &&
-                    <div>
-                        {this.props.displaySpinner.join("\n\n")}
-                    </div>
-                }
-            </Modal>
+            <React.Fragment>
+                <Modal
+                    isOpen={this.props.displaySpinner.length > 0}
+                    isBlocking={true}
+                    containerClassName='cl-spinner'>
+                    <Spinner size={SpinnerSize.large} />
+                    {debug &&
+                        <div>
+                            {this.props.displaySpinner.join("\n\n")}
+                        </div>
+                    }
+                </Modal>
+                <div role="alert" aria-live="assertive" className="cl-spinner-aria">
+                    {this.props.displaySpinner.length > 0 && <span className="cl-screen-reader">Loading</span>}
+                </div>
+            </React.Fragment>
         );
     }
 }

diff --git a/src/routes/Apps/App/Dashboard.tsx b/src/routes/Apps/App/Dashboard.tsx
@@ -72,7 +72,7 @@ class Dashboard extends React.Component<Props, ComponentState> {
                             iconProps={{ iconName: 'Sync' }}
                         />
                         <div role="alert" aria-live="assertive">
-                            {this.state.retrying && <span className="cl-dashboard-retry">Retrying</span>}
+                            {this.state.retrying && <span className="cl-screen-reader">Retrying</span>}
                         </div>
                     </div>
                 )}