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

Accessibility/tables #1181

Merged
merged 3 commits into from
Sep 11, 2018
Merged

Accessibility/tables #1181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9c3c74
accessible tables
snide Sep 7, 2018
1dc9ad2
better formatting
snide Sep 10, 2018
5041640
cl
snide Sep 10, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
- Added `infraApp` icon ([#1161](https://github.com/elastic/eui/pull/1161))
- Added sizes to `EuiButtonIcon` ([#1145](https://github.com/elastic/eui/pull/1145))
- Added `singleSelection.asPlainText` prop to `EuiComboBox` ([#1139](https://github.com/elastic/eui/pull/1139))
- Added proper aria labeling to `EuiSearchBar` and `EuiBasicTable` so searching is properly announced ([#1181](https://github.com/elastic/eui/pull/1181))

**Bug fixes**

Expand Down
231 changes: 231 additions & 0 deletions src/components/basic_table/__snapshots__/basic_table.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -92,6 +103,17 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -177,6 +199,17 @@ exports[`EuiBasicTable empty is rendered 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
0
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -213,6 +246,17 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
0
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -257,6 +301,17 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
0
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -293,6 +348,17 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -382,6 +448,17 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -465,6 +542,17 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -548,6 +636,17 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
2
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -617,6 +716,17 @@ exports[`EuiBasicTable with pagination 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -702,6 +812,17 @@ exports[`EuiBasicTable with pagination and error 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -744,6 +865,17 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -891,6 +1023,17 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -991,6 +1134,17 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -1155,6 +1309,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -1410,6 +1575,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -1574,6 +1750,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -1738,6 +1925,17 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -1987,6 +2185,17 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCellCheckbox
key="_selection_column_h"
Expand Down Expand Up @@ -2137,6 +2346,17 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down Expand Up @@ -2225,6 +2445,17 @@ exports[`EuiBasicTable with sorting 1`] = `
<EuiTable
responsive={true}
>
<EuiScreenReaderOnly>
<caption
aria-live="polite"
aria-relevant="text"
role="status"
>
Below is a table of
3
items.
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
Expand Down
Loading