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

* [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

x-pack/legacy/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,23 +220,26 @@ 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"
@@ -237,7 +247,7 @@ const RemoveLogColumnButton = injectI18n<{
       title={removeColumnLabel}
     />
   );
-});
+};
 
 const LogColumnConfigurationEmptyPrompt: React.FunctionComponent = () => (
   <EuiEmptyPrompt

x-pack/plugins/translations/translations/ja-JP.json

@@ -5276,7 +5276,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": "ログ列",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5419,7 +5419,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": "日志列",