maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Fixes empty table header cell and duplicate ID accessibility issues (#54917) (#55046)

Browse source 
* [ML] Fixes empty table header cell and duplicate ID accessibility issues

* [ML] Fix anomalies table columns test
This commit is contained in:
Pete Harverson 2020-01-16 16:11:49 +00:00 committed by GitHub
parent 8202e21eb8
commit 093028eecf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
x-pack/legacy/plugins/ml/public/application/components/anomalies_table/anomalies_table.test.js
View file

@ -63,9 +63,6 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.arrayContaining([
expect.objectContaining({
name: '',
}),
expect.objectContaining({
name: 'time',
}),

14
x-pack/legacy/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
View file

@ -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)}

1
x-pack/legacy/plugins/ml/public/application/components/anomalies_table/links_menu.js
View file

@ -479,7 +479,6 @@ export const LinksMenu = injectI18n(
return (
<EuiPopover
id="singlePanel"
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}

12
x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
View file

@ -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,

37
x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js
View file

@ -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,

12
x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx
View file

@ -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,