Added role='dialog' to EuiFlyout and documented correct way to make i…

…t announce itself with aria attributes (#916) * Add role='dialog' to EuiFlyout and document correct way to make it announce itself with aria attributes.
elastic · Jun 11, 2018 · 6cc98e2 · 6cc98e2
1 parent d222621
commit 6cc98e2
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.52`.
+**Bug fixes**
+
+- Added `role="dialog"` to `EuiFlyout` to improve screen reader accessibility ([#916](https://github.com/elastic/eui/pull/916))
 
 ## [`0.0.52`](https://github.com/elastic/eui/tree/v0.0.52)
 

diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
@@ -37,16 +37,23 @@ export class Flyout extends Component {
   }
 
   render() {
-
     let flyout;
+
     if (this.state.isFlyoutVisible) {
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
+          aria-labelledby="flyoutTitle"
         >
           <EuiFlyoutBody>
             <EuiText>
-              <p>You can use ESC to close this panel, but we could also pass in a close button like so.</p>
+              <h3 id="flyoutTitle">
+                A flyout
+              </h3>
+
+              <p>
+                You can use ESC to close this panel, but we could also pass in a close button like so.
+              </p>
 
               <EuiButton
                 iconType="cross"
@@ -59,6 +66,7 @@ export class Flyout extends Component {
         </EuiFlyout>
       );
     }
+
     return (
       <div>
         <EuiButton onClick={this.showFlyout}>

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
@@ -139,10 +139,11 @@ export class FlyoutComplicated extends Component {
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
+          aria-labelledby="flyoutComplicatedTitle"
         >
           <EuiFlyoutHeader>
             <EuiTitle>
-              <h2>
+              <h2 id="flyoutComplicatedTitle">
                 Flyout header
               </h2>
             </EuiTitle>
@@ -184,6 +185,7 @@ export class FlyoutComplicated extends Component {
         </EuiFlyout>
       );
     }
+
     return (
       <div>
         <EuiButton onClick={this.showFlyout}>

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
@@ -41,6 +41,7 @@ export const FlyoutExample = {
             from the right side of the screen. It should be used any time you
             need to perform quick, individual actions to a larger page or list.
           </p>
+
           <ul>
             <li>
               <EuiCode>size</EuiCode> accepts <EuiCode>s / m / l</EuiCode> and
@@ -52,6 +53,11 @@ export const FlyoutExample = {
               to within the flyout. It is off by default.
             </li>
           </ul>
+
+          <p>
+            Notice how these examples use <EuiCode>aria-labelledby</EuiCode> and <EuiCode>aria-describedby</EuiCode> to
+            announce the flyout to screen readers when the user opens it.
+          </p>
         </div>
       ),
       props: { EuiFlyout },

diff --git a/src-docs/src/views/flyout/flyout_size.js b/src-docs/src/views/flyout/flyout_size.js
@@ -45,10 +45,17 @@ export class FlyoutSize extends Component {
           ownFocus
           onClose={this.closeFlyout}
           size="s"
+          aria-labelledby="flyoutSizeTitle"
         >
           <EuiFlyoutBody>
             <EuiText>
-              <p>You can use ESC to close this panel, but we could also pass in a close button like so.</p>
+              <h3 id="flyoutSizeTitle">
+                A flyout
+              </h3>
+
+              <p>
+                You can use ESC to close this panel, but we could also pass in a close button like so.
+              </p>
 
               <EuiButton
                 iconType="cross"

diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap
@@ -7,6 +7,7 @@ exports[`EuiFlyout is rendered 1`] = `
       aria-label="aria-label"
       class="euiFlyout euiFlyout--medium testClass1 testClass2"
       data-test-subj="test subject string"
+      role="dialog"
       tabindex="0"
     />
   </div>

diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js
@@ -46,6 +46,7 @@ export class EuiFlyout extends Component {
 
     const flyoutContent = (
       <div
+        role="dialog"
         ref={node => { this.flyout = node; }}
         className={classes}
         tabIndex={0}
@@ -68,6 +69,8 @@ export class EuiFlyout extends Component {
     return (
       <span>
         {optionalOverlay}
+        {/* Trap focus even when ownFocus={false}, otherwise closing the flyout won't return focus
+            to the originating button */}
         <FocusTrap
           focusTrapOptions={{
             fallbackFocus: () => this.flyout,