[8.19] [ObsUX] [A11y] Improve color alternative for element announcement (elastic#219250) (elastic#219353)

MiriamAparicio · web-flow · commit 606de71a7680 · 2025-04-28T13:18:35.000+02:00
# Backport This will backport the following commits from `main` to `8.19`: - [[ObsUX] [A11y] Improve color alternative for element announcement (elastic#219250)](elastic#219250)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -25696,7 +25696,6 @@
     "xpack.infra.ml.steps.setupProcess.when.description": "Par défaut, les tâches de Machine Learning analysent les 4 dernières semaines de données et continuent à s'exécuter indéfiniment.",
     "xpack.infra.ml.steps.setupProcess.when.timePicker.label": "Date de début",
     "xpack.infra.ml.steps.setupProcess.when.title": "Quand votre modèle commence-t-il ?",
-    "xpack.infra.node.ariaLabel": "{nodeName}, cliquer pour ouvrir le menu",
     "xpack.infra.nodeContextMenu.createRuleLink": "Créer une règle d'inventaire",
     "xpack.infra.nodeContextMenu.description": "Afficher les détails pour {label} {value}",
     "xpack.infra.nodeContextMenu.title": "Détails de {inventoryName}",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -25672,7 +25672,6 @@
     "xpack.infra.ml.steps.setupProcess.when.description": "デフォルトでは、機械学習ジョブは直近4週間のデータを分析し、無限に実行し続けます。",
     "xpack.infra.ml.steps.setupProcess.when.timePicker.label": "開始日",
     "xpack.infra.ml.steps.setupProcess.when.title": "いつモデルを開始しますか？",
-    "xpack.infra.node.ariaLabel": "{nodeName}、クリックしてメニューを開きます",
     "xpack.infra.nodeContextMenu.createRuleLink": "インベントリルールの作成",
     "xpack.infra.nodeContextMenu.description": "{label} {value} の詳細を表示",
     "xpack.infra.nodeContextMenu.title": "{inventoryName}の詳細",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -25726,7 +25726,6 @@
     "xpack.infra.ml.steps.setupProcess.when.description": "默认情况下，Machine Learning 作业会分析过去 4 周的数据，并继续无限期地运行。",
     "xpack.infra.ml.steps.setupProcess.when.timePicker.label": "开始日期",
     "xpack.infra.ml.steps.setupProcess.when.title": "您的模型何时开始？",
-    "xpack.infra.node.ariaLabel": "{nodeName}，单击打开菜单",
     "xpack.infra.nodeContextMenu.createRuleLink": "创建库存规则",
     "xpack.infra.nodeContextMenu.description": "查看 {label} {value} 的详情",
     "xpack.infra.nodeContextMenu.title": "{inventoryName} 详情",
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/color_label.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/color_label.tsx
@@ -12,9 +12,10 @@ import React from 'react';
 export interface Props {
   color: string;
   label: string;
+  paletteSelected: string;
 }
 
-export const SwatchLabel = ({ label, color }: Props) => {
+export const ColorLabel = ({ label, color, paletteSelected }: Props) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem grow={false}>
@@ -23,8 +24,8 @@ export const SwatchLabel = ({ label, color }: Props) => {
           color={color}
           size="xl"
           aria-label={i18n.translate('xpack.infra.legendControls.iconColorLabel', {
-            defaultMessage: '{label} color',
-            values: { label },
+            defaultMessage: '{label} {paletteSelected} color',
+            values: { label, paletteSelected },
           })}
         />
       </EuiFlexItem>
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx
@@ -67,7 +67,7 @@ export const GroupOfNodes = React.memo<Props>(
           options={options}
           nodeType={nodeType}
         />
-        <Nodes>
+        <Nodes role="list">
           {group.width ? (
             group.nodes.map((node) => (
               <Node
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
@@ -37,7 +37,7 @@ import {
 } from '../../../../../common/inventory/types';
 import { getColorPalette } from '../../lib/get_color_palette';
 import { convertBoundsToPercents } from '../../lib/convert_bounds_to_percents';
-import { SwatchLabel } from './swatch_label';
+import { ColorLabel } from './color_label';
 import { PalettePreview } from './palette_preview';
 
 interface Props {
@@ -211,6 +211,9 @@ export const LegendControls = ({
         >
           <>
             <EuiSelect
+              aria-label={i18n.translate('xpack.infra.legendControls.colorPalette.ariaLabel', {
+                defaultMessage: 'Color palette selection',
+              })}
               options={PALETTE_OPTIONS}
               value={draftLegend.palette}
               id="palette"
@@ -282,7 +285,8 @@ export const LegendControls = ({
         <EuiFormRow
           fullWidth
           label={
-            <SwatchLabel
+            <ColorLabel
+              paletteSelected={draftLegend.palette}
               color={first(paletteColors)!}
               label={i18n.translate('xpack.infra.legendControls.minLabel', {
                 defaultMessage: 'Minimum',
@@ -311,7 +315,8 @@ export const LegendControls = ({
           fullWidth
           display="columnCompressed"
           label={
-            <SwatchLabel
+            <ColorLabel
+              paletteSelected={draftLegend.palette}
               color={last(paletteColors)!}
               label={i18n.translate('xpack.infra.legendControls.maxLabel', {
                 defaultMessage: 'Maximum',
@@ -339,6 +344,9 @@ export const LegendControls = ({
         <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
+              aria-label={i18n.translate('xpack.infra.legendControls.cancelButton.ariaLabel', {
+                defaultMessage: 'Cancel',
+              })}
               data-test-subj="infraLegendControlsCancelButton"
               type="submit"
               size="s"
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx
@@ -73,12 +73,13 @@ export const Node = ({
       position="right"
       content={<ConditionalToolTip currentTime={currentTime} node={node} nodeType={nodeType} />}
     >
-      <div>
+      <div role="listitem">
         <NodeSquare
           squareSize={squareSize}
           togglePopover={toggleAssetPopover}
           color={color}
           nodeName={node.name}
+          nodeMetric={metric ? metric.name : ''}
           value={value}
           showBorder={detailsItemId === node.id || isPopoverOpen}
         />
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
@@ -163,19 +163,21 @@ export const NodeSquare = ({
   nodeName,
   value,
   showBorder,
+  nodeMetric,
 }: {
   squareSize: number;
   togglePopover: UseBooleanHandlers['toggle'];
   color: string;
   nodeName: string;
   value: string;
   showBorder?: boolean;
+  nodeMetric?: string;
 }) => {
   const valueMode = squareSize > 70;
   const ellipsisMode = squareSize > 30;
   const nodeAriaLabel = i18n.translate('xpack.infra.node.ariaLabel', {
-    defaultMessage: '{nodeName}, click to open menu',
-    values: { nodeName },
+    defaultMessage: '{nodeName} {value} {nodeMetric} ',
+    values: { nodeName, nodeMetric, value },
   });
   const style: CSSProperties | undefined = showBorder ? { border: 'solid 4px #000' } : undefined;
 
