Improving a11y of BottomBar and ControlBar

CHANGELOG.md

@@ -19,6 +19,7 @@
 **Bug fixes**
 
 - Fixed building dev & docs on Windows ([#2847](https://github.com/elastic/eui/pull/2847))
+- Fixed screen reader discovery issues with `EuiBottomBar` and `EuiControlBar` ([#2861](https://github.com/elastic/eui/pull/2861))
 - Fixed a bug in `EuiDataGrid` causing the first cell to autofocus if interactive ([#2872](https://github.com/elastic/eui/pull/2872))
 
 **Breaking changes**

src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

@@ -2,74 +2,107 @@
 
 exports[`EuiBottomBar is rendered 1`] = `
 Array [
-  <p
-    aria-live="assertive"
-    class="euiScreenReaderOnly"
-  >
-    There is a new menu opening with page level controls at the end of the document.
-  </p>,
-  <div
+  <section
     aria-label="aria-label"
     class="euiBottomBar euiBottomBar--paddingMedium testClass1 testClass2"
     data-test-subj="test subject string"
   >
+    <h2
+      class="euiScreenReaderOnly"
+    >
+      Page level controls
+    </h2>
     Content
-  </div>,
+  </section>,
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new region landmark with page level controls at the end of the document.
+  </p>,
 ]
 `;
 
 exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
 Array [
+  <section
+    aria-label="Page level controls"
+    class="euiBottomBar euiBottomBar--paddingLarge"
+  >
+    <h2
+      class="euiScreenReaderOnly"
+    >
+      Page level controls
+    </h2>
+  </section>,
   <p
     aria-live="assertive"
     class="euiScreenReaderOnly"
   >
-    There is a new menu opening with page level controls at the end of the document.
+    There is a new region landmark with page level controls at the end of the document.
   </p>,
-  <div
-    class="euiBottomBar euiBottomBar--paddingLarge"
-  />,
 ]
 `;
 
 exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
 Array [
+  <section
+    aria-label="Page level controls"
+    class="euiBottomBar euiBottomBar--paddingMedium"
+  >
+    <h2
+      class="euiScreenReaderOnly"
+    >
+      Page level controls
+    </h2>
+  </section>,
   <p
     aria-live="assertive"
     class="euiScreenReaderOnly"
   >
-    There is a new menu opening with page level controls at the end of the document.
+    There is a new region landmark with page level controls at the end of the document.
   </p>,
-  <div
-    class="euiBottomBar euiBottomBar--paddingMedium"
-  />,
 ]
 `;
 
 exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
 Array [
+  <section
+    aria-label="Page level controls"
+    class="euiBottomBar"
+  >
+    <h2
+      class="euiScreenReaderOnly"
+    >
+      Page level controls
+    </h2>
+  </section>,
   <p
     aria-live="assertive"
     class="euiScreenReaderOnly"
   >
-    There is a new menu opening with page level controls at the end of the document.
+    There is a new region landmark with page level controls at the end of the document.
   </p>,
-  <div
-    class="euiBottomBar"
-  />,
 ]
 `;
 
 exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
 Array [
+  <section
+    aria-label="Page level controls"
+    class="euiBottomBar euiBottomBar--paddingSmall"
+  >
+    <h2
+      class="euiScreenReaderOnly"
+    >
+      Page level controls
+    </h2>
+  </section>,
   <p
     aria-live="assertive"
     class="euiScreenReaderOnly"
   >
-    There is a new menu opening with page level controls at the end of the document.
+    There is a new region landmark with page level controls at the end of the document.
   </p>,
-  <div
-    class="euiBottomBar euiBottomBar--paddingSmall"
-  />,
 ]
 `;

src/components/bottom_bar/bottom_bar.tsx

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
 import classNames from 'classnames';
-
-import { CommonProps } from '../common';
-import { EuiPortal } from '../portal';
+import React, { Component } from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { CommonProps } from '../common';
 import { EuiI18n } from '../i18n';
+import { EuiPortal } from '../portal';
 
 type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
 
@@ -28,10 +27,15 @@ interface Props extends CommonProps {
    * Padding applied to the bar
    */
   paddingSize?: BottomBarPaddingSize;
+
+  /**
+   * Customize the screen reader heading that helps users find this control. Default is "Page level controls".
+   */
+  landmarkHeading?: string;
 }
 
 export class EuiBottomBar extends Component<Props> {
-  private bar: HTMLDivElement | null = null;
+  private bar: HTMLElement | null = null;
 
   componentDidMount() {
     const height = this.bar ? this.bar.clientHeight : -1;
@@ -42,7 +46,7 @@ export class EuiBottomBar extends Component<Props> {
   }
 
   componentWillUnmount() {
-    document.body.style.paddingBottom = null;
+    document.body.style.paddingBottom = '';
     if (this.props.bodyClassName) {
       document.body.classList.remove(this.props.bodyClassName);
     }
@@ -54,6 +58,7 @@ export class EuiBottomBar extends Component<Props> {
       className,
       paddingSize = 'm',
       bodyClassName,
+      landmarkHeading,
       ...rest
     } = this.props;
 
@@ -65,22 +70,46 @@ export class EuiBottomBar extends Component<Props> {
 
     return (
       <EuiPortal>
+        <EuiI18n
+          token="euiBottomBar.screenReaderHeading"
+          default="Page level controls">
+          {(screenReaderHeading: string) => (
+            // Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice
+            // A bug in voiceover won't list some landmarks in the rotor without an aria-label
+            <section
+              aria-label={
+                landmarkHeading ? landmarkHeading : screenReaderHeading
+              }
+              className={classes}
+              ref={node => {
+                this.bar = node;
+              }}
+              {...rest}>
+              <EuiScreenReaderOnly>
+                <h2>
+                  {landmarkHeading ? landmarkHeading : screenReaderHeading}
+                </h2>
+              </EuiScreenReaderOnly>
+              {children}
+            </section>
+          )}
+        </EuiI18n>
         <EuiScreenReaderOnly>
           <p aria-live="assertive">
-            <EuiI18n
-              token="euiBottomBar.screenReaderAnnouncement"
-              default="There is a new menu opening with page level controls at the end of the document."
-            />
+            {landmarkHeading ? (
+              <EuiI18n
+                token="euiBottomBar.customScreenReaderAnnouncement"
+                default="There is a new region landmark called {landmarkHeading} with page level controls at the end of the document."
+                values={{ landmarkHeading }}
+              />
+            ) : (
+              <EuiI18n
+                token="euiBottomBar.screenReaderAnnouncement"
+                default="There is a new region landmark with page level controls at the end of the document."
+              />
+            )}
           </p>
         </EuiScreenReaderOnly>
-        <div
-          className={classes}
-          ref={node => {
-            this.bar = node;
-          }}
-          {...rest}>
-          {children}
-        </div>
       </EuiPortal>
     );
   }