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>