Skip to content

Commit

Permalink
Accessibility/tables (#1181)
Browse files Browse the repository at this point in the history 
Tables now have proper aria labeling.
  • Loading branch information
@snide
snide authored Sep 11, 2018
1 parent 6558b71 commit 6c02111
Show file tree
Hide file tree
Showing 5 changed files with 270 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,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
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

0 comments on commit 6c02111

Please sign in to comment.