Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes for accessibility tickets #821

Merged
merged 17 commits into from
May 14, 2018
Merged

Fixes for accessibility tickets #821

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
36f91ad
pagination labeling fixes #735
snide May 11, 2018
e39a031
fixes #621 adds menubar roles to side nav
snide May 11, 2018
48b16d8
fixes #734, adds more descriptive aria labeling for pagination
snide May 11, 2018
5355ddf
update snapshots
snide May 11, 2018
b8639bc
fixes #729, apply aria-live to popovers
snide May 11, 2018
81ada28
fixes #723, provides screen reader notice for bottom bar appearance
snide May 11, 2018
3614a0e
fix ownFocus needing to be true for non-context menu sitations. apply…
snide May 11, 2018
7b36ccf
feedback
snide May 11, 2018
4cf3206
fixes #616 adds home page label
snide May 11, 2018
fdd9acd
fixes #687, documentation button labeling
snide May 11, 2018
bddb74e
snapshot updates
snide May 11, 2018
1c89762
fixes #617 applies aria label to theme selector
snide May 11, 2018
a950bbd
fixes #746 applies proper label to select all checkboxes in table
snide May 11, 2018
585bdd4
snapshots
snide May 11, 2018
af4f873
changelog
snide May 11, 2018
76d40c6
clone element and id no longer needed for popover
snide May 11, 2018
98b7766
more snapshots
snide May 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src-docs/src/components/guide_page/guide_page_chrome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,15 @@ export class GuidePageChrome extends Component {
}

renderSubSections = (subSections = []) => {
if (subSections.length <= 1) {
console.log(subSections);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove console.log


const subSectionsWithTitles = subSections.filter(item => (item.title));

if (subSectionsWithTitles.length <= 1) {
return;
}

return subSections.map(({ title, id }) => ({
return subSectionsWithTitles.map(({ title, id }) => ({
id: `subSection-${id}`,
name: title,
onClick: this.onClickLink.bind(this, id),
Expand Down
78 changes: 59 additions & 19 deletions src/components/bottom_bar/__snapshots__/bottom_bar.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,75 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiBottomBar is rendered 1`] = `
<div
aria-label="aria-label"
class="euiBottomBar euiBottomBar--paddingMedium testClass1 testClass2"
data-test-subj="test subject string"
>
Content
</div>
Array [
<p
aria-live="assertive"
class="euiScreenReaderOnly"
>
There is a new menu opening with page level controls at the bottom of the document.
</p>,
<div
aria-label="aria-label"
class="euiBottomBar euiBottomBar--paddingMedium testClass1 testClass2"
data-test-subj="test subject string"
>
Content
</div>,
]
`;

exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
<div
class="euiBottomBar euiBottomBar--paddingLarge"
/>
Array [
<p
aria-live="assertive"
class="euiScreenReaderOnly"
>
There is a new menu opening with page level controls at the bottom of the document.
</p>,
<div
class="euiBottomBar euiBottomBar--paddingLarge"
/>,
]
`;

exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
<div
class="euiBottomBar euiBottomBar--paddingMedium"
/>
Array [
<p
aria-live="assertive"
class="euiScreenReaderOnly"
>
There is a new menu opening with page level controls at the bottom of the document.
</p>,
<div
class="euiBottomBar euiBottomBar--paddingMedium"
/>,
]
`;

exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
<div
class="euiBottomBar"
/>
Array [
<p
aria-live="assertive"
class="euiScreenReaderOnly"
>
There is a new menu opening with page level controls at the bottom of the document.
</p>,
<div
class="euiBottomBar"
/>,
]
`;

exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
<div
class="euiBottomBar euiBottomBar--paddingSmall"
/>
Array [
<p
aria-live="assertive"
class="euiScreenReaderOnly"
>
There is a new menu opening with page level controls at the bottom of the document.
</p>,
<div
class="euiBottomBar euiBottomBar--paddingSmall"
/>,
]
`;
10 changes: 10 additions & 0 deletions src/components/bottom_bar/bottom_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';

import { EuiPortal } from '../portal';
import { EuiScreenReaderOnly } from '../accessibility';

const paddingSizeToClassNameMap = {
none: null,
Expand Down Expand Up @@ -32,6 +33,10 @@ export class EuiBottomBar extends Component {
}
}

handleScreenReaderFocus() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where/how is this used?

this.bar.focus();
}

render() {
const {
children,
Expand All @@ -50,6 +55,11 @@ export class EuiBottomBar extends Component {

return (
<EuiPortal>
<EuiScreenReaderOnly>
<p aria-live="assertive">
There is a new menu opening with page level controls at the bottom of the document.
</p>
</EuiScreenReaderOnly>
<div
className={classes}
ref={node => { this.bar = node; }}
Expand Down
10 changes: 8 additions & 2 deletions src/components/pagination/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const EuiPagination = ({
key={index}
onClick={onPageClick.bind(null, i)}
hideOnMobile
aria-label={`Page ${i + 1} of ${lastPageInRange}`}
>
{i + 1}
</EuiPaginationButton>
Expand All @@ -42,7 +43,7 @@ export const EuiPagination = ({
iconType="arrowLeft"
disabled={activePage === 0}
color="text"
aria-label="Previous"
aria-label="Previous page"
/>
);

Expand All @@ -54,6 +55,7 @@ export const EuiPagination = ({
key="0"
onClick={onPageClick.bind(null, 0)}
hideOnMobile
aria-label={`Page 1 of ${lastPageInRange}`}
>
1
</EuiPaginationButton>
Expand All @@ -65,6 +67,7 @@ export const EuiPagination = ({
key="beginningEllipsis"
isPlaceholder
hideOnMobile
aria-hidden
>
<span>&hellip;</span>
</EuiPaginationButton>
Expand All @@ -81,6 +84,7 @@ export const EuiPagination = ({
key="endingEllipsis"
isPlaceholder
hideOnMobile
aria-hidden
>
<span>&hellip;</span>
</EuiPaginationButton>
Expand All @@ -92,6 +96,7 @@ export const EuiPagination = ({
key={pageCount - 1}
onClick={onPageClick.bind(null, pageCount - 1)}
hideOnMobile
aria-label={`Jump to the last page, number ${pageCount}`}
>
{pageCount}
</EuiPaginationButton>
Expand All @@ -102,7 +107,7 @@ export const EuiPagination = ({
<EuiButtonIcon
onClick={onPageClick.bind(null, activePage + 1)}
iconType="arrowRight"
aria-label="Previous"
aria-label="Next page"
disabled={activePage === pageCount - 1}
color="text"
/>
Expand All @@ -124,6 +129,7 @@ export const EuiPagination = ({
return (
<div
className={classes}
role="group"
{...rest}
>
{previousButton}
Expand Down
5 changes: 5 additions & 0 deletions src/components/popover/__snapshots__/popover.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
/>
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
id="8"
/>
Expand All @@ -95,6 +96,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
/>
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
id="9"
/>
Expand All @@ -112,6 +114,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
/>
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
id="10"
tabindex="0"
Expand All @@ -130,6 +133,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
/>
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel test"
id="11"
/>
Expand All @@ -147,6 +151,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
/>
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel"
id="12"
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/popover/popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ export class EuiPopover extends Component {
tabIndex={tabIndex}
hasShadow
id={id}
aria-live="assertive"
>
{children}
</EuiPanel>
Expand Down
Loading