[Logs UI][a11y] Announce name of column on remove column button (#41695)

* [Logs UI][a11y] Announce name of column on remove column button * Use title instead of aria-label * ariaColumnName => columnDescription * Move template string out of i18n * Revert label id change * Inject i18n to field title * Change title to Remove {columnDescription} column * Replace injectI18N with i18n.translate * Fix i18n
elastic · Aug 2, 2019 · a9e0f25 · a9e0f25
1 parent 39b233a
commit a9e0f25
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/.../plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx b/.../plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
@@ -19,7 +19,8 @@ import {
   EuiDroppable,
   EuiIcon,
 } from '@elastic/eui';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback } from 'react';
 import { DragHandleProps, DropResult } from '../../../../../common/eui_draggable';
 
@@ -167,29 +168,35 @@ const FieldLogColumnConfigurationPanel: React.FunctionComponent<{
     remove,
   },
   dragHandleProps,
-}) => (
-  <EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
-    <EuiFlexGroup>
-      <EuiFlexItem grow={false}>
-        <div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
-          <EuiIcon type="grab" />
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem grow={1}>
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.fieldLogColumnTitle"
-          defaultMessage="Field"
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={3}>
-        <code>{field}</code>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <RemoveLogColumnButton onClick={remove} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPanel>
-);
+}) => {
+  const fieldLogColumnTitle = i18n.translate(
+    'xpack.infra.sourceConfiguration.fieldLogColumnTitle',
+    {
+      defaultMessage: 'Field',
+    }
+  );
+  return (
+    <EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
+            <EuiIcon type="grab" />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1}>{fieldLogColumnTitle}</EuiFlexItem>
+        <EuiFlexItem grow={3}>
+          <code>{field}</code>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <RemoveLogColumnButton
+            onClick={remove}
+            columnDescription={`${fieldLogColumnTitle} - ${field}`}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};
 
 const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
   fieldName: React.ReactNode;
@@ -213,31 +220,34 @@ const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <RemoveLogColumnButton onClick={removeColumn} />
+        <RemoveLogColumnButton onClick={removeColumn} columnDescription={String(fieldName)} />
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiPanel>
 );
 
-const RemoveLogColumnButton = injectI18n<{
+const RemoveLogColumnButton: React.FunctionComponent<{
   onClick?: () => void;
-}>(({ intl, onClick }) => {
-  const removeColumnLabel = intl.formatMessage({
-    id: 'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
-    defaultMessage: 'Remove this column',
-  });
+  columnDescription: string;
+}> = ({ onClick, columnDescription }) => {
+  const removeColumnLabel = i18n.translate(
+    'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
+    {
+      defaultMessage: 'Remove {columnDescription} column',
+      values: { columnDescription },
+    }
+  );
 
   return (
     <EuiButtonIcon
-      aria-label={removeColumnLabel}
       color="danger"
       data-test-subj="removeLogColumnButton"
       iconType="trash"
       onClick={onClick}
       title={removeColumnLabel}
     />
   );
-});
+};
 
 const LogColumnConfigurationEmptyPrompt: React.FunctionComponent = () => (
   <EuiEmptyPrompt

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5248,7 +5248,6 @@
     "xpack.infra.sourceConfiguration.noLogColumnsTitle": "列がありません",
     "xpack.infra.sourceConfiguration.podFieldDescription": "Kubernetes ポッドの識別に使用されるフィールドです。推奨値は {defaultValue} です。",
     "xpack.infra.sourceConfiguration.podFieldLabel": "ポッド ID",
-    "xpack.infra.sourceConfiguration.removeLogColumnButtonLabel": "この列を削除",
     "xpack.infra.sourceConfiguration.sourceConfigurationButtonLabel": "構成",
     "xpack.infra.sourceConfiguration.sourceConfigurationIndicesTabTitle": "インデックスとフィールド",
     "xpack.infra.sourceConfiguration.sourceConfigurationLogColumnsTabTitle": "ログ列",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5390,7 +5390,6 @@
     "xpack.infra.sourceConfiguration.noLogColumnsTitle": "无列",
     "xpack.infra.sourceConfiguration.podFieldDescription": "用于标识 Kubernetes Pod 的字段。推荐值为 {defaultValue}。",
     "xpack.infra.sourceConfiguration.podFieldLabel": "Pod ID",
-    "xpack.infra.sourceConfiguration.removeLogColumnButtonLabel": "移除此列",
     "xpack.infra.sourceConfiguration.sourceConfigurationButtonLabel": "配置",
     "xpack.infra.sourceConfiguration.sourceConfigurationIndicesTabTitle": "索引和字段",
     "xpack.infra.sourceConfiguration.sourceConfigurationLogColumnsTabTitle": "日志列",