From dcc2813f6d33421d8007533c2d7a075c9fe54fe8 Mon Sep 17 00:00:00 2001 From: rockfield Date: Mon, 8 Apr 2019 11:09:14 +0300 Subject: [PATCH 1/6] keyboard and screen reader accessive update for file content, ML --- .../components/file_contents/file_contents.js | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js index 916d90ae54a05..536e2e0bd4afb 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js @@ -5,7 +5,7 @@ */ -import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import React from 'react'; import { @@ -22,27 +22,36 @@ export function FileContents({ data, format, numberOfLines }) { } const formattedData = limitByNumberOfLines(data, numberOfLines); + const fileContentsHeader = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.fileContentsTitle', { + defaultMessage: `File contents` + }); + const fileContentsDescription = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.firstLinesDescription', { + defaultMessage: `First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}`, + values: { + numberOfLines + } + }); + const ariaLabelI18n = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.ariaLabelBeforeSentUserToCodeEditor', { + defaultMessage: `{translatedHeader}. {translatedAmountOfFirstLines} is shown in a code editor below. Hit Tab key to go to code editor.`, + values: { + translatedHeader: fileContentsHeader, + translatedAmountOfFirstLines: fileContentsDescription, + + } + }); return ( -

- +

+ {fileContentsHeader}

-
- -
+
{fileContentsDescription}
From 919af4204e9a6aad4555a3435b8c026d3bc26e1c Mon Sep 17 00:00:00 2001 From: rockfield Date: Mon, 8 Apr 2019 11:13:54 +0300 Subject: [PATCH 2/6] summary: labeled with aria and maden focusable with tabIndex --- .../analysis_summary/analysis_summary.js | 82 ++++++++----------- 1 file changed, 35 insertions(+), 47 deletions(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js b/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js index 3beecb28628f5..6b5325418ddfa 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js @@ -6,6 +6,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import React from 'react'; import { @@ -16,11 +17,12 @@ import { export function AnalysisSummary({ results }) { const items = createDisplayItems(results); + const itemsWithI18n = pimpOutDisplayItemsWithAriaAndI18n(items); return ( -

+

); } +function pimpOutDisplayItemsWithAriaAndI18n(items) { + return items.map(item => Object.assign(item, { + title: {item.title} + })); +} + function createDisplayItems(results) { const items = [ { - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.analyzedLinesNumberTitle', { + defaultMessage: 'Number of lines analyzed' + }), description: results.num_lines_analyzed, }, // { @@ -58,33 +64,24 @@ function createDisplayItems(results) { if (results.format !== undefined) { items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.formatTitle', { + defaultMessage: 'Format' + }), description: results.format, }); if (results.format === 'delimited') { items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.delimiterTitle', { + defaultMessage: 'Delimiter' + }), description: results.delimiter, }); items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.hasHeaderRowTitle', { + defaultMessage: 'Has header row' + }), description: `${results.has_header_row}`, }); @@ -93,39 +90,30 @@ function createDisplayItems(results) { if (results.grok_pattern !== undefined) { items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.grokPatternTitle', { + defaultMessage: 'Grok pattern' + }), description: results.grok_pattern, }); } if (results.timestamp_field !== undefined) { items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.timeFieldTitle', { + defaultMessage: 'Time field' + }), description: results.timestamp_field, }); } if (results.java_timestamp_formats !== undefined) { items.push({ - title: ( - - ), + title: i18n.translate('xpack.ml.fileDatavisualizer.analysisSummary.timeFormatTitle', { + defaultMessage: 'Time {timestampFormats, plural, zero {format} one {format} other {formats}}', + values: { + timestampFormats: results.java_timestamp_formats.length, + } + }), description: results.java_timestamp_formats.join(', '), }); } From 1b77d045701dedee5ec195d678fa6981879d8233 Mon Sep 17 00:00:00 2001 From: Maryia Lapata Date: Tue, 9 Apr 2019 06:52:13 +0300 Subject: [PATCH 3/6] Syntax update Co-Authored-By: rockfield --- .../components/file_contents/file_contents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js index 536e2e0bd4afb..e66588962d2fa 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js @@ -23,7 +23,7 @@ export function FileContents({ data, format, numberOfLines }) { const formattedData = limitByNumberOfLines(data, numberOfLines); const fileContentsHeader = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.fileContentsTitle', { - defaultMessage: `File contents` + defaultMessage: 'File contents' }); const fileContentsDescription = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.firstLinesDescription', { defaultMessage: `First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}`, From f9a74684b84bb4cd2703ec049b7430372004106a Mon Sep 17 00:00:00 2001 From: Maryia Lapata Date: Tue, 9 Apr 2019 06:52:32 +0300 Subject: [PATCH 4/6] Syntax update Co-Authored-By: rockfield --- .../components/file_contents/file_contents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js index e66588962d2fa..8eb560d9f5fb7 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js @@ -26,7 +26,7 @@ export function FileContents({ data, format, numberOfLines }) { defaultMessage: 'File contents' }); const fileContentsDescription = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.firstLinesDescription', { - defaultMessage: `First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}`, + defaultMessage: 'First {numberOfLines, plural, zero {# line} one {# line} other {# lines}}', values: { numberOfLines } From a35a57d9943466130850fdadae25a2d8229553de Mon Sep 17 00:00:00 2001 From: rockfield Date: Tue, 9 Apr 2019 07:04:33 +0300 Subject: [PATCH 5/6] translation --- .../components/file_contents/file_contents.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js index 8eb560d9f5fb7..ee84786cf03af 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js @@ -32,10 +32,12 @@ export function FileContents({ data, format, numberOfLines }) { } }); const ariaLabelI18n = i18n.translate('xpack.ml.fileDatavisualizer.fileContents.ariaLabelBeforeSentUserToCodeEditor', { - defaultMessage: `{translatedHeader}. {translatedAmountOfFirstLines} is shown in a code editor below. Hit Tab key to go to code editor.`, + defaultMessage: + 'File contents.' + + ' First {numberOfLines, plural, zero {# line is} one {# line is} other {# lines are}}' + + ' shown in a code editor below. Hit Tab key to go to code editor.', values: { - translatedHeader: fileContentsHeader, - translatedAmountOfFirstLines: fileContentsDescription, + numberOfLines } }); From a5db6d3e6de3de871b2f9312e72ea89e875e18d6 Mon Sep 17 00:00:00 2001 From: rockfield Date: Tue, 9 Apr 2019 07:10:21 +0300 Subject: [PATCH 6/6] lines iteration --- .../components/analysis_summary/analysis_summary.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js b/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js index 6b5325418ddfa..b4e352f482093 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/analysis_summary/analysis_summary.js @@ -17,7 +17,7 @@ import { export function AnalysisSummary({ results }) { const items = createDisplayItems(results); - const itemsWithI18n = pimpOutDisplayItemsWithAriaAndI18n(items); + const itemsWithI18n = addAriaAndI18nToDisplayItems(items); return ( @@ -42,10 +42,13 @@ export function AnalysisSummary({ results }) { ); } -function pimpOutDisplayItemsWithAriaAndI18n(items) { - return items.map(item => Object.assign(item, { - title: {item.title} - })); +function addAriaAndI18nToDisplayItems(items) { + return items.map(item => ( + { + ...item, + title: {item.title} + } + )); } function createDisplayItems(results) {