diff --git a/CHANGELOG.md b/CHANGELOG.md index af406eae3ec..f7dff221a74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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** 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..449a9c7cee9 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,17 @@ 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..26db8be6c34 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} />