[UI Framework] Improve accessibility issues in the UI framework (#14073)

* Use proper labels in bar example * Make aria-label on icon buttons mandatory * Add role=group to KuiButtonGroup * Add roles to card component * Fix alphabetical ordering in menu * Add accessibility example for KuiCollapseButton * Improve accessibility of Event examples * Add note about labeling to Form docs * Update broken snapshots * Fix icon in HeaderBar example * Add default aria-label to InfoButton if not specified * Fix wrong HTML entities * Fix icon names in Event example * Add icon labels in InfoPanel example * Improve accessibility of Micro and MenuButton examples * Add labels to StatusText example * Apply proper ARIA roles for tabs * Make ToggleButton example accessible * Fix icon names in events sandbox * Also allow aria-labelledby for icon buttons * Fix spelling of collapsible * Make statement about labels more clear * Use proper Link element for linking * Use propTypes to check for icon only buttons * Use defaultProps in KuiInfoButton
elastic · Oct 2, 2017 · ba71872 · ba71872
1 parent 895343d
commit ba71872
Show file tree

Hide file tree

Showing 52 changed files with 244 additions and 46 deletions.
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -147,18 +147,18 @@ const components = [{
 }, {
   name: 'CodeEditor',
   component: CodeEditor,
-  hasReact: true
+  hasReact: true,
+}, {
+  name: 'CollapseButton',
+  component: CollapseButtonExample,
+  hasReact: true,
 }, {
   name: 'ColorPicker',
   component: ColorPickerExample,
   hasReact: true,
 }, {
   name: 'Column',
   component: ColumnExample,
-}, {
-  name: 'CollapseButton',
-  component: CollapseButtonExample,
-  hasReact: true,
 }, {
   name: 'EmptyTablePrompt',
   component: EmptyTablePromptExample,

diff --git a/ui_framework/doc_site/src/views/bar/bar.js b/ui_framework/doc_site/src/views/bar/bar.js
@@ -14,8 +14,8 @@ export default () => (
     </KuiBarSection>
 
     <KuiBarSection>
-      <div>Limit to</div>
-      <input className="kuiTextInput" size="2" value="10" readOnly/>
+      <label htmlFor="limitInputField">Limit to</label>
+      <input id="limitInputField" className="kuiTextInput" size="2" value="10" readOnly/>
       <div>pages</div>
     </KuiBarSection>
   </KuiBar>

diff --git a/ui_framework/doc_site/src/views/bar/bar_three_sections.js b/ui_framework/doc_site/src/views/bar/bar_three_sections.js
@@ -27,8 +27,8 @@ export default () => (
     </KuiBarSection>
 
     <KuiBarSection>
-      <div>Limit to</div>
-      <input className="kuiTextInput" size="2" value="10" readOnly/>
+      <label htmlFor="limitInput">Limit to</label>
+      <input id="limitInput" className="kuiTextInput" size="2" value="10" readOnly/>
       <div>pages</div>
 
       <KuiButtonGroup>

diff --git a/ui_framework/doc_site/src/views/button/button_example.js b/ui_framework/doc_site/src/views/button/button_example.js
@@ -203,8 +203,12 @@ export default props => (
       }]}
     >
       <GuideText>
-        You can toss an icon into a Button, with or without text. You can also use a predefined icon
-        or specify custom icon classes.
+        <p>
+          You can toss an icon into a Button, with or without text. You can also use a predefined icon
+          or specify custom icon classes. If you have a button without textual content, make sure you set
+          the <code>aria-label</code> attribute with a textual representation for screen readers (see
+          last example below).
+        </p>
       </GuideText>
 
       <GuideDemo>

diff --git a/ui_framework/doc_site/src/views/button/button_group_united.js b/ui_framework/doc_site/src/views/button/button_group_united.js
@@ -27,11 +27,13 @@ export default () => (
     <KuiButtonGroup isUnited>
       <KuiButton
         buttonType="basic"
+        aria-label="Previous"
         icon={<KuiButtonIcon type="previous" />}
       />
 
       <KuiButton
         buttonType="basic"
+        aria-label="Next"
         icon={<KuiButtonIcon type="next" />}
       />
     </KuiButtonGroup>

diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -60,6 +60,7 @@ export default () => (
 
     <KuiButton
       buttonType="basic"
+      aria-label="Book flight"
       icon={<KuiButtonIcon className="fa-plane" />}
     />
   </div>

diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button.js
@@ -6,9 +6,9 @@ import {
 
 export default () => (
   <div>
-    <KuiCollapseButton direction="down"/>
-    <KuiCollapseButton direction="up"/>
-    <KuiCollapseButton direction="left"/>
-    <KuiCollapseButton direction="right"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="down"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="up"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="left"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="right"/>
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_aria.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+import {
+  KuiCollapseButton
+} from '../../../../components';
+
+import { htmlIdGenerator } from '../../../../services';
+
+export default class extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false
+    };
+  }
+
+  onToggleContent = (ev) => {
+    ev.preventDefault();
+    this.setState((state) => ({
+      isExpanded: !state.isExpanded
+    }));
+  }
+
+  render() {
+    const { isExpanded } = this.state;
+    const idGen = htmlIdGenerator();
+    return (
+      <div>
+        <KuiCollapseButton
+          onClick={this.onToggleContent}
+          direction={isExpanded ? 'down' : 'up'}
+          aria-label="Toggle panel"
+          aria-expanded={isExpanded}
+          aria-controls={idGen('collapsible')}
+        />
+        <div
+          id={idGen('collapsible')}
+          style={{ display: isExpanded ? 'block' : 'none' }}
+        >
+          Here is some collapsible content.
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js
@@ -13,6 +13,10 @@ import CollapseButton from './collapse_button';
 const collapseButtonSource = require('!!raw!./collapse_button');
 const collapseButtonHtml = renderToHtml(CollapseButton);
 
+import CollapseButtonAria from './collapse_button_aria';
+const collapseButtonAriaSource = require('!!raw!./collapse_button_aria');
+const collapseButtonAriaHtml = renderToHtml(CollapseButtonAria);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -34,5 +38,42 @@ export default props => (
         <CollapseButton />
       </GuideDemo>
     </GuideSection>
+
+    <GuideSection
+      title="CollapseButton accessibility"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: collapseButtonAriaSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: collapseButtonAriaHtml,
+      }]}
+    >
+      <GuideText>
+        To make an expandable element properly accessible you should add the following
+        ARIA-attributes to it:
+        <dl>
+          <dt><code>aria-expanded</code></dt>
+          <dd>
+            should be <code>true</code> or <code>false</code> depending on
+            the state of the collapsable content.
+          </dd>
+          <dt><code>aria-controls</code></dt>
+          <dd>should reference the <code>id</code> of the actual collapsable content element.</dd>
+          <dt><code>aria-label</code></dt>
+          <dd>
+            should contain a label like &quot;Toggle panel&quot; or preferably more specific what
+            it toggles (e.g. &quot;Toggle filter actions&quot;). You don&rsquo;t need to switch the label
+            when the state changes, since a screen reader will use <code>aria-expanded</code> to
+            read out the current state.
+          </dd>
+        </dl>
+        The following example demonstrate the usage of these attributes.
+      </GuideText>
+
+      <GuideDemo>
+        <CollapseButtonAria />
+      </GuideDemo>
+    </GuideSection>
   </GuidePage>
 );
diff --git a/ui_framework/doc_site/src/views/event/event.js b/ui_framework/doc_site/src/views/event/event.js
@@ -11,7 +11,7 @@ import {
 export default () => (
   <KuiEvent>
     <KuiEventSymbol>
-      <span className="kuiIcon kuiIcon--error fa-warning" />
+      <span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
     </KuiEventSymbol>
 
     <KuiEventBody>

diff --git a/ui_framework/doc_site/src/views/event/event_menu.js b/ui_framework/doc_site/src/views/event/event_menu.js
@@ -15,7 +15,7 @@ export default () => (
     <KuiMenuItem>
       <KuiEvent>
         <KuiEventSymbol>
-          <span className="kuiIcon kuiIcon--error fa-warning" />
+          <span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
         </KuiEventSymbol>
 
         <KuiEventBody>
@@ -33,7 +33,7 @@ export default () => (
     <KuiMenuItem>
       <KuiEvent>
         <KuiEventSymbol>
-          <span className="kuiIcon kuiIcon--error fa-warning" />
+          <span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
         </KuiEventSymbol>
 
         <KuiEventBody>
@@ -51,7 +51,7 @@ export default () => (
     <KuiMenuItem>
       <KuiEvent>
         <KuiEventSymbol>
-          <span className="kuiIcon kuiIcon--warning fa-bolt" />
+          <span className="kuiIcon kuiIcon--warning fa-bolt" aria-label="Warning" role="img"/>
         </KuiEventSymbol>
 
         <KuiEventBody>

diff --git a/ui_framework/doc_site/src/views/event/events_sandbox_content.js b/ui_framework/doc_site/src/views/event/events_sandbox_content.js
@@ -36,7 +36,7 @@ export default () => (
           <KuiMenuItem>
             <KuiEvent>
               <KuiEventSymbol>
-                <span className="kuiIcon kuiIcon--info fa-info" />
+                <span className="kuiIcon kuiIcon--info fa-info" aria-label="Info" role="img"/>
               </KuiEventSymbol>
 
               <KuiEventBody>
@@ -54,7 +54,7 @@ export default () => (
           <KuiMenuItem>
             <KuiEvent>
               <KuiEventSymbol>
-                <span className="kuiIcon kuiIcon--error fa-warning" />
+                <span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
               </KuiEventSymbol>
 
               <KuiEventBody>
@@ -72,7 +72,7 @@ export default () => (
           <KuiMenuItem>
             <KuiEvent>
               <KuiEventSymbol>
-                <span className="kuiIcon kuiIcon--warning fa-bolt" />
+                <span className="kuiIcon kuiIcon--warning fa-bolt" aria-label="Warning" role="img"/>
               </KuiEventSymbol>
 
               <KuiEventBody>

diff --git a/ui_framework/doc_site/src/views/form/form_example.js b/ui_framework/doc_site/src/views/form/form_example.js
@@ -28,6 +28,19 @@ export default props => (
         code: labelHtml,
       }]}
     >
+
+      <GuideText>
+        Never forget to label every input element. You can either
+        use a <code>label</code> element with a <code>for</code> attribute
+        referencing the <code>id</code> of the input field, wrap the <code>input</code> field
+        within the <code>label</code> element or use <code>aria-label</code> or <code>aria-labelledby</code>.
+      </GuideText>
+
+      <GuideText>
+        For the sake of simplicity we haven&rsquo;t labeled the input elements on
+        this page correctly.
+      </GuideText>
+
       <GuideDemo
         html={labelHtml}
       />

diff --git a/ui_framework/doc_site/src/views/form_layout/field_group.js b/ui_framework/doc_site/src/views/form_layout/field_group.js
@@ -82,18 +82,21 @@ export default () => (
           <KuiButton
             buttonType="basic"
             className="kuiButton--small"
+            aria-label="Increase"
             icon={<KuiButtonIcon className="fa-plus" />}
           />
 
           <KuiButton
             buttonType="basic"
             className="kuiButton--small"
+            aria-label="Decrease"
             icon={<KuiButtonIcon className="fa-minus" />}
           />
 
           <KuiButton
             buttonType="danger"
             className="kuiButton--small"
+            aria-label="Remove"
             icon={<KuiButtonIcon className="fa-trash" />}
           />
         </KuiButtonGroup>

diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.js b/ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.js
@@ -17,7 +17,7 @@ export default () => {
       <KuiHeaderBarSection>
         <span className="kuiText">
           <span className="kuiStatusText kuiStatusText--error">
-            <span className="kuiStatusText__icon kuiIcon fa-warning" />
+            <span className="kuiStatusText__icon kuiIcon fa-warning" aria-label="Warning" role="img"/>
             Red health
           </span>
         </span>

diff --git a/ui_framework/doc_site/src/views/info_panel/info_panel_error.html b/ui_framework/doc_site/src/views/info_panel/info_panel_error.html
@@ -1,6 +1,10 @@
 <div class="kuiInfoPanel kuiInfoPanel--error">
   <div class="kuiInfoPanelHeader">
-    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
+    <span
+      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"
+      aria-label="Warning"
+      role="img"
+    ></span>
     <span class="kuiInfoPanelHeader__title">
       Sorry, there was an error.
     </span>

diff --git a/ui_framework/doc_site/src/views/info_panel/info_panel_info.html b/ui_framework/doc_site/src/views/info_panel/info_panel_info.html
@@ -1,6 +1,10 @@
 <div class="kuiInfoPanel kuiInfoPanel--info">
   <div class="kuiInfoPanelHeader">
-    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--info fa-info"></span>
+    <span
+      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--info fa-info"
+      aria-label="Info"
+      role="img"
+    ></span>
     <span class="kuiInfoPanelHeader__title">
       Check it out.
     </span>

diff --git a/ui_framework/doc_site/src/views/info_panel/info_panel_success.html b/ui_framework/doc_site/src/views/info_panel/info_panel_success.html
@@ -1,6 +1,10 @@
 <div class="kuiInfoPanel kuiInfoPanel--success">
   <div class="kuiInfoPanelHeader">
-    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--success fa-check"></span>
+    <span
+      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--success fa-check"
+      aria-label="Success"
+      role="img"
+    ></span>
     <span class="kuiInfoPanelHeader__title">
       Good news, everyone!
     </span>

diff --git a/ui_framework/doc_site/src/views/info_panel/info_panel_warning.html b/ui_framework/doc_site/src/views/info_panel/info_panel_warning.html
@@ -1,6 +1,10 @@
 <div class="kuiInfoPanel kuiInfoPanel--warning">
   <div class="kuiInfoPanelHeader">
-    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+    <span
+      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"
+      aria-label="Warning"
+      role="img"
+    ></span>
     <span class="kuiInfoPanelHeader__title">
       Proceed with caution!
     </span>

diff --git a/ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html b/ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html
@@ -12,6 +12,6 @@
 
 <hr class="guideBreak">
 
-<button class="kuiMenuButton kuiMenuButton--basic">
+<button class="kuiMenuButton kuiMenuButton--basic" aria-label="Settings">
   <span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
 </button>
diff --git a/ui_framework/doc_site/src/views/micro_button/micro_button.html b/ui_framework/doc_site/src/views/micro_button/micro_button.html
@@ -1,3 +1,3 @@
-<button class="kuiMicroButton" title="Edit">
+<button class="kuiMicroButton" title="Edit" aria-label="Edit">
   <span class="kuiIcon fa-gear"></span>
 </button>
diff --git a/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html b/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html
@@ -1,9 +1,9 @@
-<button class="kuiMicroButton" title="Edit">
+<button class="kuiMicroButton" title="Edit" aria-label="Edit">
   <span class="kuiIcon fa-gear"></span>
 </button>
 
 &nbsp;
 
-<a href="#" class="kuiMicroButton" title="View">
+<a href="#" class="kuiMicroButton" title="View" aria-label="View">
   <span class="kuiIcon fa-eye"></span>
 </a>