Improve screen-reader-accessibility of Accordion, ButtonIcon, and Pop…

…over. (#103) - Associate Accordion button with content using id, aria-expanded, and aria-controls. - Do the same thing with Popovers. - Required aria-label or aria-labelledby on ButtonIcon.
elastic · Nov 2, 2017 · 89f2be9 · 89f2be9
1 parent aacb88d
commit 89f2be9
Show file tree

Hide file tree

Showing 34 changed files with 239 additions and 45 deletions.
diff --git a/docs/src/views/accordion/accordion.js b/docs/src/views/accordion/accordion.js
@@ -11,6 +11,7 @@ import {
 export default () => (
   <div>
     <EuiAccordion
+      id="accordion1"
       buttonContent="Click me to toggle open / close"
     >
       <EuiText>
@@ -21,6 +22,7 @@ export default () => (
     <EuiSpacer size="l" />
 
     <EuiAccordion
+      id="accordion2"
       buttonContent="You can click me as well"
     >
       <EuiText>

diff --git a/docs/src/views/accordion/accordion_extra.js b/docs/src/views/accordion/accordion_extra.js
@@ -7,6 +7,7 @@ import {
 
 export default () => (
   <EuiAccordion
+    id="accordionExtra"
     buttonContent="Click to open"
     extraAction={<EuiButton size="s">Extra action!</EuiButton>}
   >

diff --git a/docs/src/views/accordion/accordion_form.js b/docs/src/views/accordion/accordion_form.js
@@ -29,13 +29,16 @@ const repeatableForm = (
           <EuiFieldText icon="user" placeholder="John" />
         </EuiFormRow>
       </EuiFlexItem>
+
       <EuiFlexItem>
         <EuiFormRow label="Password" id={makeId()} helpText="Must include one number and one symbol">
           <EuiFieldPassword icon="lock" />
         </EuiFormRow>
       </EuiFlexItem>
     </EuiFlexGroup>
+
     <EuiSpacer size="m" />
+
     <EuiFormRow label="Body" id={makeId()}>
       <EuiTextArea placeholder="I am a textarea, put some content in me!" />
     </EuiFormRow>
@@ -48,12 +51,14 @@ const buttonContent = (
       <EuiFlexItem grow={false}>
         <EuiIcon type="logoWebhook" size="m" />
       </EuiFlexItem>
+
       <EuiFlexItem>
         <EuiTitle size="s" className="euiAccordionForm__title">
           <h6>Webhook</h6>
         </EuiTitle>
       </EuiFlexItem>
     </EuiFlexGroup>
+
     <EuiText size="s">
       <p>
         <EuiTextColor color="subdued">
@@ -65,16 +70,24 @@ const buttonContent = (
 );
 
 const extraAction = (
-  <EuiButtonIcon iconType="cross" color="danger" className="euiAccordionForm__extraAction" />
+  <EuiButtonIcon
+    iconType="cross"
+    color="danger"
+    className="euiAccordionForm__extraAction"
+    aria-label="Delete"
+  />
 );
 
 export default () => (
   <div>
     <EuiTitle size="s">
       <h3>I am a complicated, highly styled, repeatable form!</h3>
     </EuiTitle>
+
     <EuiSpacer size="l" />
+
     <EuiAccordion
+      id="accordionForm1"
       className="euiAccordionForm"
       buttonClassName="euiAccordionForm__button"
       buttonContent={buttonContent}
@@ -84,7 +97,9 @@ export default () => (
         {repeatableForm}
       </div>
     </EuiAccordion>
+
     <EuiAccordion
+      id="accordionForm2"
       className="euiAccordionForm"
       buttonClassName="euiAccordionForm__button"
       buttonContent={buttonContent}

diff --git a/docs/src/views/button/button_ghost.js b/docs/src/views/button/button_ghost.js
@@ -44,6 +44,7 @@ export default () => (
       color="ghost"
       iconType="user"
       onClick={() => window.alert('Button clicked')}
+      aria-label="Your account"
     />
   </div>
 );
diff --git a/docs/src/views/button/button_icon.js b/docs/src/views/button/button_icon.js
@@ -9,20 +9,23 @@ export default () => (
     <EuiButtonIcon
       onClick={() => window.alert('Button clicked')}
       iconType="arrowRight"
+      aria-label="Next"
     />
 
     <EuiButtonIcon
       size="s"
       color="danger"
       onClick={() => window.alert('Button clicked')}
       iconType="arrowRight"
+      aria-label="Next"
     />
 
     <EuiButtonIcon
       size="s"
       color="disabled"
       onClick={() => window.alert('Button clicked')}
       iconType="arrowRight"
+      aria-label="Next"
     />
   </div>
 );

diff --git a/docs/src/views/context_menu/context_menu.js b/docs/src/views/context_menu/context_menu.js
@@ -135,6 +135,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="contextMenu"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

diff --git a/docs/src/views/context_menu/single_panel.js b/docs/src/views/context_menu/single_panel.js
@@ -79,6 +79,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="singlePanel"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

diff --git a/docs/src/views/form/form_example.js b/docs/src/views/form/form_example.js
@@ -60,11 +60,19 @@ export default props => (
         code: formControlsHtml,
       }]}
       text={
-        <p>
-          These are the base inputs without their labels. If you need labels
-          then use the <EuiCode>FormRow</EuiCode> wrapper as explained
-          in the next example.
-        </p>
+        <div>
+          <p>
+            These are the base inputs without their labels. If you need labels
+            then use the <EuiCode>FormRow</EuiCode> wrapper as explained
+            in the next example.
+          </p>
+          <p>
+            Never forget to label every input element. You can either
+            use a <EuiCode>label</EuiCode> element with a <EuiCode>for</EuiCode> attribute
+            referencing the <EuiCode>id</EuiCode> of the input field, wrap the <EuiCode>input</EuiCode> field
+            within the <EuiCode>label</EuiCode> element or use <EuiCode>aria-label</EuiCode> or <EuiCode>aria-labelledby</EuiCode>.
+          </p>
+        </div>
       }
       demo={
         <FormControls />

diff --git a/docs/src/views/form/form_popover.js b/docs/src/views/form/form_popover.js
@@ -92,6 +92,7 @@ export default class extends Component {
     return (
       <div>
         <EuiPopover
+          id="formPopover"
           ownFocus
           button={button}
           isOpen={this.state.isPopoverOpen}

diff --git a/docs/src/views/form/inline_form_popover.js b/docs/src/views/form/inline_form_popover.js
@@ -84,6 +84,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="inlineFormPopover"
         ownFocus
         button={button}
         isOpen={this.state.isPopoverOpen}

diff --git a/docs/src/views/header/header_app_menu.js b/docs/src/views/header/header_app_menu.js
@@ -40,6 +40,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="headerAppMenu"
         ownFocus
         button={button}
         isOpen={this.state.isOpen}

diff --git a/docs/src/views/header/header_user_menu.js b/docs/src/views/header/header_user_menu.js
@@ -52,6 +52,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="headerUserMenu"
         ownFocus
         button={button}
         isOpen={this.state.isOpen}

diff --git a/docs/src/views/kibana/watches.js b/docs/src/views/kibana/watches.js
@@ -103,6 +103,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="watches"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

diff --git a/docs/src/views/pagination/customizable_pagination.js b/docs/src/views/pagination/customizable_pagination.js
@@ -87,6 +87,7 @@ export default class extends Component {
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiPopover
+            id="customizablePagination"
             button={button}
             isOpen={this.state.isPopoverOpen}
             closePopover={this.closePopover.bind(this)}

diff --git a/docs/src/views/popover/popover.js b/docs/src/views/popover/popover.js
@@ -41,6 +41,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
+        id="popover"
         ownFocus
         button={button}
         isOpen={this.state.isPopoverOpen}

diff --git a/docs/src/views/popover/popover_anchor_position.js b/docs/src/views/popover/popover_anchor_position.js
@@ -176,6 +176,7 @@ export default class extends Component {
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="downLeft"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick1.bind(this)}>
@@ -189,8 +190,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="downCenter"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick2.bind(this)}>
@@ -204,8 +207,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="downRight"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick3.bind(this)}>
@@ -226,6 +231,7 @@ export default class extends Component {
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="upLeft"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick4.bind(this)}>
@@ -239,8 +245,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="upCenter"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick5.bind(this)}>
@@ -254,8 +262,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="upRight"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick6.bind(this)}>
@@ -276,6 +286,7 @@ export default class extends Component {
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="leftUp"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick7.bind(this)}>
@@ -294,8 +305,10 @@ export default class extends Component {
               </EuiText>
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="leftCenter"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick8.bind(this)}>
@@ -309,8 +322,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="leftDown"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick9.bind(this)}>
@@ -336,6 +351,7 @@ export default class extends Component {
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="rightUp"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick10.bind(this)}>
@@ -354,8 +370,10 @@ export default class extends Component {
               </EuiText>
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="rightCenter"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick11.bind(this)}>
@@ -369,8 +387,10 @@ export default class extends Component {
               Popover content
             </EuiPopover>
           </EuiFlexItem>
+
           <EuiFlexItem grow={false}>
             <EuiPopover
+              id="rightDown"
               ownFocus
               button={(
                 <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick12.bind(this)}>

diff --git a/docs/src/views/popover/popover_panel_class_name.js b/docs/src/views/popover/popover_panel_class_name.js
@@ -31,6 +31,7 @@ export default class extends Component {
   render() {
     return (
       <EuiPopover
+        id="popoverPanelClassName"
         ownFocus
         button={(
           <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick.bind(this)}>

diff --git a/docs/src/views/popover/popover_with_title.js b/docs/src/views/popover/popover_with_title.js
@@ -61,6 +61,7 @@ export default class extends Component {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
+            id="downCenterWithTitle"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick1.bind(this)}>
@@ -83,8 +84,10 @@ export default class extends Component {
             </div>
           </EuiPopover>
         </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
           <EuiPopover
+            id="upCenterWithTitle"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick2.bind(this)}>
@@ -107,8 +110,10 @@ export default class extends Component {
             </div>
           </EuiPopover>
         </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
           <EuiPopover
+            id="rightUpWithTitle"
             ownFocus
             button={(
               <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick3.bind(this)}>