Add role='dialog' to EuiFlyout and document correct way to make it an…

…nounce itself with aria attributes.
elastic · Jun 8, 2018 · 21d92a1 · 21d92a1
1 parent aaf1baa
commit 21d92a1
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 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,24 @@ export class Flyout extends Component {
   }
 
   render() {
-
     let flyout;
+
     if (this.state.isFlyoutVisible) {
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
+          aria-labelledby="flyoutTitle"
+          aria-describedby="flyoutDescription"
         >
           <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 id="flyoutDescription">
+                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 +67,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,16 +139,18 @@ export class FlyoutComplicated extends Component {
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
+          aria-labelledby="flyoutComplicatedTitle"
+          aria-describedby="flyoutComplicatedDescription"
         >
           <EuiFlyoutHeader>
             <EuiTitle>
-              <h2>
+              <h2 id="flyoutComplicatedTitle">
                 Flyout header
               </h2>
             </EuiTitle>
             <EuiSpacer size="s" />
             <EuiTextColor color="subdued">
-              <EuiText>
+              <EuiText id="flyoutComplicatedDescription">
                 <p>Put navigation items in the header, and cross tab actions in a footer.</p>
               </EuiText>
             </EuiTextColor>
@@ -184,6 +186,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,18 @@ export class FlyoutSize extends Component {
           ownFocus
           onClose={this.closeFlyout}
           size="s"
+          aria-labelledby="flyoutSizeTitle"
+          aria-describedby="flyoutSizeDescription"
         >
           <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 id="flyoutSizeDescription">
+                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}