Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
[UI Framework] Improve accessibility issues in the UI framework (elas…
Browse files Browse the repository at this point in the history
…tic#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
  • Loading branch information
timroes authored and Tim Roes committed Oct 2, 2017
1 parent 6c057a2 commit 2f88558
Show file tree
Hide file tree
Showing 52 changed files with 244 additions and 46 deletions.
10 changes: 5 additions & 5 deletions ui_framework/doc_site/src/services/routes/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions ui_framework/doc_site/src/views/bar/bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ui_framework/doc_site/src/views/bar/bar_three_sections.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions ui_framework/doc_site/src/views/button/button_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions ui_framework/doc_site/src/views/button/button_group_united.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions ui_framework/doc_site/src/views/button/button_with_icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export default () => (

<KuiButton
buttonType="basic"
aria-label="Book flight"
icon={<KuiButtonIcon className="fa-plane" />}
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Original file line number Diff line number Diff line change
@@ -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>
);
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
);
2 changes: 1 addition & 1 deletion ui_framework/doc_site/src/views/event/event.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions ui_framework/doc_site/src/views/event/event_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
13 changes: 13 additions & 0 deletions ui_framework/doc_site/src/views/form/form_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
3 changes: 3 additions & 0 deletions ui_framework/doc_site/src/views/form_layout/field_group.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<button class="kuiMicroButton" title="Edit">
<button class="kuiMicroButton" title="Edit" aria-label="Edit">
<span class="kuiIcon fa-gear"></span>
</button>
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 2f88558

Please sign in to comment.