Fixes for accessibility tickets

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Ensure switches’ inputs are still hidden when `[disabled]` ([#778](https://github.com/elastic/eui/pull/778))
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))
+- Added better accessibility labeling to `EuiPagination`, `EuiSideNav`, `EuiPopover`, `EuiBottomBar` and `EuiBasicTable`. ([#821](https://github.com/elastic/eui/pull/821))
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -71,6 +71,7 @@ export class GuidePageChrome extends Component {
  <Link
  to="/"
  className="guideLogo"
+ aria-label="Go to home page"
  >
  <EuiIcon type="logoElastic" size="l" />
  </Link>
@@ -93,11 +94,14 @@ export class GuidePageChrome extends Component {
  }
 
  renderSubSections = (subSections = []) => {
- if (subSections.length <= 1) {
+
+ 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),

src-docs/src/components/guide_theme_selector/guide_theme_selector.js

@@ -37,6 +37,7 @@ export class GuideThemeSelector extends Component {
  iconType="arrowDown"
  iconSide="right"
  onClick={this.onThemeButtonClick}
+ aria-label="Select a visual theme"
  >
  <strong>Elastic UI</strong> <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
  </EuiButtonEmpty>

src-docs/src/views/guidelines/button.js

@@ -287,9 +287,9 @@ export default() => (
  frame="frame"
  >
  <div>
- <EuiButtonIcon size="s" iconType="pencil" aria-label="Next"/>
+ <EuiButtonIcon size="s" iconType="pencil" aria-label="Edit"/>
  &nbsp;&nbsp;&nbsp;&nbsp;
- <EuiButtonIcon size="s" iconType="expand" aria-label="Next"/>
+ <EuiButtonIcon size="s" iconType="expand" aria-label="Expand"/>
  </div>
  </GuideRuleExample>
  <GuideRuleExample
@@ -300,11 +300,11 @@ export default() => (
  >
  <div>
  <EuiButton>
- <EuiIcon type="pencil"/>
+ <EuiIcon type="pencil" aria-label="Edit" />
  </EuiButton>
  &nbsp;&nbsp;&nbsp;&nbsp;
- <EuiButton >
- <EuiIcon type="expand"/>
+ <EuiButton>
+ <EuiIcon type="expand" aria-label="Expand" />
  </EuiButton>
  </div>
  </GuideRuleExample>

src-docs/src/views/popover/popover.js

@@ -42,7 +42,6 @@ export default class extends Component {
  return (
  <EuiPopover
  id="popover"
- ownFocus
  button={button}
  isOpen={this.state.isPopoverOpen}
  closePopover={this.closePopover.bind(this)}

src/components/basic_table/__snapshots__/basic_table.test.js.snap

@@ -483,6 +483,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -511,6 +512,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -540,6 +542,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -569,6 +572,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -635,6 +639,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -666,6 +671,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -695,6 +701,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -724,6 +731,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -790,6 +798,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -828,6 +837,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -885,6 +895,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -942,6 +953,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -1036,6 +1048,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -1067,6 +1080,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -1096,6 +1110,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -1125,6 +1140,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -1191,6 +1207,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -1222,6 +1239,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -1251,6 +1269,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -1280,6 +1299,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -1346,6 +1366,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -1384,6 +1405,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -1439,6 +1461,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -1494,6 +1517,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"
@@ -1586,6 +1610,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
  width="24px"
  >
  <EuiCheckbox
+ aria-label="Select all rows"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectAll"
@@ -1617,6 +1642,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
  key="_selection_column_1"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-1"
@@ -1646,6 +1672,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
  key="_selection_column_2"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-2"
@@ -1675,6 +1702,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
  key="_selection_column_3"
  >
  <EuiCheckbox
+ aria-label="Select this row"
  checked={false}
  compressed={false}
  data-test-subj="checkboxSelectRow-3"

src/components/basic_table/basic_table.js

@@ -366,6 +366,7 @@ export class EuiBasicTable extends Component {
  disabled={disabled}
  onChange={onChange}
  data-test-subj="checkboxSelectAll"
+ aria-label="Select all rows"
  />
  </EuiTableHeaderCellCheckbox>
  );
@@ -562,6 +563,7 @@ export class EuiBasicTable extends Component {
  checked={checked}
  onChange={onChange}
  title={title}
+ aria-label="Select this row"
  data-test-subj={`checkboxSelectRow-${itemId}`}
  />
  </EuiTableRowCellCheckbox>