From f9c3c74087523dd896b697366b97ce77f047e399 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 7 Sep 2018 13:33:09 -0700 Subject: [PATCH 1/3] accessible tables --- .../__snapshots__/basic_table.test.js.snap | 210 ++++++++++++++++++ .../in_memory_table.test.js.snap | 11 + src/components/basic_table/basic_table.js | 19 +- src/components/search_bar/search_box.js | 8 + 4 files changed, 247 insertions(+), 1 deletion(-) diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index 00d3e59ef5d..d9fdafebc25 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -9,6 +9,16 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 0 + items. + + + + + Below is a table of + 0 + items. + + + + + Below is a table of + 0 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 2 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 3 + items. + + + + + Below is a table of + 2 + items. + + diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js index f8309b764ed..64a1fe1b1fd 100644 --- a/src/components/basic_table/basic_table.js +++ b/src/components/basic_table/basic_table.js @@ -29,6 +29,7 @@ import { LoadingTableBody } from './loading_table_body'; import { EuiTableHeaderMobile } from '../table/mobile/table_header_mobile'; import { EuiTableSortMobile } from '../table/mobile/table_sort_mobile'; import { withRequiredProp } from '../../utils/prop_types/with_required_prop'; +import { EuiScreenReaderOnly } from '../accessibility'; const dataTypesProfiles = { auto: { @@ -341,6 +342,7 @@ export class EuiBasicTable extends Component { const { compressed, responsive } = this.props; const mobileHeader = responsive ? ({this.renderTableMobileSort()}) : undefined; + const caption = this.renderTableCaption(); const head = this.renderTableHead(); const body = this.renderTableBody(); return ( @@ -348,7 +350,11 @@ export class EuiBasicTable extends Component { ref={element => { this.tableElement = element; }} > {mobileHeader} - {head}{body} + + {caption} + {head} + {body} + ); } @@ -380,6 +386,17 @@ export class EuiBasicTable extends Component { return items.length ? : null; } + renderTableCaption() { + + const { items } = this.props; + + return ( + + Below is a table of {items.length} items. + + ); + } + renderTableHead() { const { items, columns, selection } = this.props; diff --git a/src/components/search_bar/search_box.js b/src/components/search_bar/search_box.js index 78c6ef4a5a9..4073ae6f38f 100644 --- a/src/components/search_bar/search_box.js +++ b/src/components/search_bar/search_box.js @@ -48,6 +48,13 @@ export class EuiSearchBox extends Component { ...rest } = this.props; + let ariaLabel; + if (incremental) { + ariaLabel = 'This is a search bar. As you type, the results lower in the page will automatically filter.'; + } else { + ariaLabel = 'This is a search bar. After typing your query, hit enter to filter the results lower in the page.'; + } + return ( this.inputElement = input} @@ -57,6 +64,7 @@ export class EuiSearchBox extends Component { incremental={incremental} onSearch={(query) => onSearch(query)} isInvalid={isInvalid} + aria-label={ariaLabel} title={title} {...rest} /> From 1dc9ad28d7905baa346d1346ae8e67686572a833 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 10 Sep 2018 12:23:36 -0700 Subject: [PATCH 2/3] better formatting --- .../__snapshots__/basic_table.test.js.snap | 63 ++++++++++++------- .../in_memory_table.test.js.snap | 3 +- src/components/basic_table/basic_table.js | 2 +- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index d9fdafebc25..449a9c7cee9 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -11,7 +11,8 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback > Below is a table of @@ -104,7 +105,8 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1 > Below is a table of @@ -199,7 +201,8 @@ exports[`EuiBasicTable empty is rendered 1`] = ` > Below is a table of @@ -245,7 +248,8 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = ` > Below is a table of @@ -299,7 +303,8 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = ` > Below is a table of @@ -345,7 +350,8 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = ` > Below is a table of @@ -444,7 +450,8 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1 > Below is a table of @@ -537,7 +544,8 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1` > Below is a table of @@ -630,7 +638,8 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = ` > Below is a table of @@ -709,7 +718,8 @@ exports[`EuiBasicTable with pagination 1`] = ` > Below is a table of @@ -804,7 +814,8 @@ exports[`EuiBasicTable with pagination and error 1`] = ` > Below is a table of @@ -856,7 +867,8 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` > Below is a table of @@ -1013,7 +1025,8 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = ` > Below is a table of @@ -1123,7 +1136,8 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` > Below is a table of @@ -1297,7 +1311,8 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a > Below is a table of @@ -1562,7 +1577,8 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 > Below is a table of @@ -1736,7 +1752,8 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 > Below is a table of @@ -1910,7 +1927,8 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a > Below is a table of @@ -2169,7 +2187,8 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and > Below is a table of @@ -2329,7 +2348,8 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = ` > Below is a table of @@ -2427,7 +2447,8 @@ exports[`EuiBasicTable with sorting 1`] = ` > Below is a table of diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap index d39dfdff8ac..5819b3859b1 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap @@ -108,7 +108,8 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` > diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js index 64a1fe1b1fd..26db8be6c34 100644 --- a/src/components/basic_table/basic_table.js +++ b/src/components/basic_table/basic_table.js @@ -392,7 +392,7 @@ export class EuiBasicTable extends Component { return ( - Below is a table of {items.length} items. + Below is a table of {items.length} items. ); } From 504164060a29ea5e848c048191037119313d194d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 10 Sep 2018 13:46:07 -0700 Subject: [PATCH 3/3] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2a9c933ea4..c1d56d8364a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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**