[ML] Fixes empty table header cell and duplicate ID accessibility iss…

…ues (#54917) (#55046) * [ML] Fixes empty table header cell and duplicate ID accessibility issues * [ML] Fix anomalies table columns test
elastic · Jan 16, 2020 · 093028e · 093028e
1 parent 8202e21
commit 093028e
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 11 deletions.
diff --git a/...k/legacy/plugins/ml/public/application/components/anomalies_table/anomalies_table.test.js b/...k/legacy/plugins/ml/public/application/components/anomalies_table/anomalies_table.test.js
@@ -63,9 +63,6 @@ describe('AnomaliesTable', () => {
 
     expect(columns).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({
-          name: '',
-        }),
         expect.objectContaining({
           name: 'time',
         }),

diff --git a/...egacy/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/...egacy/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiLink } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
 
 import React from 'react';
 import _ from 'lodash';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   formatHumanReadableDate,
@@ -65,7 +66,16 @@ export function getColumns(
 ) {
   const columns = [
     {
-      name: '',
+      name: (
+        <EuiScreenReaderOnly>
+          <p>
+            <FormattedMessage
+              id="xpack.ml.anomaliesTable.showDetailsColumn.screenReaderDescription"
+              defaultMessage="This column contains clickable controls for showing more details on each anomaly"
+            />
+          </p>
+        </EuiScreenReaderOnly>
+      ),
       render: item => (
         <EuiButtonIcon
           onClick={() => toggleRow(item)}

diff --git a/x-pack/legacy/plugins/ml/public/application/components/anomalies_table/links_menu.js b/x-pack/legacy/plugins/ml/public/application/components/anomalies_table/links_menu.js
@@ -479,7 +479,6 @@ export const LinksMenu = injectI18n(
 
       return (
         <EuiPopover
-          id="singlePanel"
           button={button}
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover}

diff --git a/...ion/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx b/...ion/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
@@ -6,12 +6,14 @@
 
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiBadge,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiProgress,
+  EuiScreenReaderOnly,
   EuiText,
   EuiToolTip,
   RIGHT_ALIGNMENT,
@@ -142,6 +144,16 @@ export const getColumns = (
   // update possible column types to something like (FieldDataColumn | ComputedColumn | ActionsColumn)[] when they have been added to EUI
   const columns: any[] = [
     {
+      name: (
+        <EuiScreenReaderOnly>
+          <p>
+            <FormattedMessage
+              id="xpack.ml.dataframe.analyticsList.showDetailsColumn.screenReaderDescription"
+              defaultMessage="This column contains clickable controls for showing more details on each job"
+            />
+          </p>
+        </EuiScreenReaderOnly>
+      ),
       align: RIGHT_ALIGNMENT,
       width: '40px',
       isExpander: true,

diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js
@@ -16,8 +16,8 @@ import { JobDescription } from './job_description';
 import { JobIcon } from '../../../../components/job_message_icon';
 import { getJobIdUrl } from '../utils';
 
-import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink } from '@elastic/eui';
-import { injectI18n } from '@kbn/i18n/react';
+import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 const PAGE_SIZE = 10;
@@ -124,7 +124,16 @@ class JobsListUI extends Component {
     // be updated if we move to always using props for width.
     const columns = [
       {
-        name: '',
+        name: (
+          <EuiScreenReaderOnly>
+            <p>
+              <FormattedMessage
+                id="xpack.ml.jobsList.showDetailsColumn.screenReaderDescription"
+                defaultMessage="This column contains clickable controls for showing more details on each job"
+              />
+            </p>
+          </EuiScreenReaderOnly>
+        ),
         render: item => (
           <EuiButtonIcon
             onClick={() => this.toggleRow(item)}
@@ -167,7 +176,16 @@ class JobsListUI extends Component {
       },
       {
         field: 'auditMessage',
-        name: '',
+        name: (
+          <EuiScreenReaderOnly>
+            <p>
+              <FormattedMessage
+                id="xpack.ml.jobsList.auditMessageColumn.screenReaderDescription"
+                defaultMessage="This column display icons when there are errors or warnings for the job in the past 24 hours"
+              />
+            </p>
+          </EuiScreenReaderOnly>
+        ),
         render: item => <JobIcon message={item} showTooltip={true} />,
       },
       {
@@ -278,7 +296,16 @@ class JobsListUI extends Component {
         width: '15%',
       });
       columns.push({
-        name: '',
+        name: (
+          <EuiScreenReaderOnly>
+            <p>
+              <FormattedMessage
+                id="xpack.ml.jobsList.jobActionsColumn.screenReaderDescription"
+                defaultMessage="This column contains extra actions in a menu that can be performed on each job"
+              />
+            </p>
+          </EuiScreenReaderOnly>
+        ),
         actions: actionsMenuContent(
           this.props.showEditJobFlyout,
           this.props.showDeleteJobModal,

diff --git a/.../transform/public/app/sections/transform_management/components/transform_list/columns.tsx b/.../transform/public/app/sections/transform_management/components/transform_list/columns.tsx
@@ -6,12 +6,14 @@
 
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiBadge,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiProgress,
+  EuiScreenReaderOnly,
   EuiText,
   EuiToolTip,
   RIGHT_ALIGNMENT,
@@ -98,6 +100,16 @@ export const getColumns = (
     ActionsColumnType<TransformListRow>
   ] = [
     {
+      name: (
+        <EuiScreenReaderOnly>
+          <p>
+            <FormattedMessage
+              id="xpack.transform.transformList.showDetailsColumn.screenReaderDescription"
+              defaultMessage="This column contains clickable controls for showing more details on each transform"
+            />
+          </p>
+        </EuiScreenReaderOnly>
+      ),
       align: RIGHT_ALIGNMENT,
       width: '40px',
       isExpander: true,