[8.18] [ObsUX][A11y] Add announcement keyboard elements improvements (#216592) (#216987)

# Backport This will backport the following commits from `main` to `8.18`: - [[ObsUX][A11y] Add announcement keyboard elements improvements (#216592)](https://github.com/elastic/kibana/pull/216592)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-23 17:28:26 -04:00 · 2025-04-03 13:43:34 +01:00 · 2025-04-03 13:43:34 +01:00 · 99662f5f87
commit 99662f5f87
parent fb48a0196d
4 changed files with 71 additions and 41 deletions
--- a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx
@ -5,9 +5,9 @@
 * 2.0.
 */

-import { EuiLink, EuiToolTip } from '@elastic/eui';
-import React from 'react';
-
+import { EuiButtonEmpty, EuiScreenReaderOnly, EuiToolTip } from '@elastic/eui';
+import React, { useCallback, useState } from 'react';
+import { i18n } from '@kbn/i18n';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import type {
  InfraWaffleMapGroup,
@ -21,43 +21,72 @@ interface Props {
  options: InfraWaffleMapOptions;
 }

-export class GroupName extends React.PureComponent<Props, {}> {
-  public render() {
-    const { group, isChild } = this.props;
-    const linkStyle = {
-      fontSize: isChild ? '0.85em' : '1em',
-    };
-    return (
+export const GroupName: React.FC<Props> = ({ onDrilldown, group, isChild, options }) => {
+  const [a11yAnnouncement, setA11yAnnouncement] = useState('');
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+
+      if (options.groupBy.length === 0) {
+        setA11yAnnouncement(
+          i18n.translate('xpack.infra.inventory.groupBy.noChangeMessage', {
+            defaultMessage: 'No changes were made when selecting {group}.',
+            values: { group: group.name },
+          })
+        );
+        return;
+      }
+
+      setA11yAnnouncement(
+        i18n.translate('xpack.infra.inventory.groupBy.groupingByMessage', {
+          defaultMessage: 'Grouping by {group}...',
+          values: { group: group.name },
+        })
+      );
+
+      const currentPath =
+        isChild && options.groupBy.length > 1 ? options.groupBy[1] : options.groupBy[0];
+      onDrilldown(`${currentPath.field}: "${group.name}"`);
+    },
+    [group.name, isChild, onDrilldown, options.groupBy]
+  );
+
+  const buttonStyle = {
+    fontSize: isChild ? '0.85em' : '1em',
+  };
+
+  return (
+    <>
+      <EuiScreenReaderOnly>
+        <div aria-live="polite" role="status">
+          {a11yAnnouncement}
+        </div>
+      </EuiScreenReaderOnly>
+
      <GroupNameContainer>
        <Inner isChild={isChild}>
          <Name>
            <EuiToolTip position="top" content={group.name}>
-              <EuiLink
-                style={linkStyle}
-                onClickCapture={this.handleClick}
-                data-test-subj="groupNameLink"
+              <EuiButtonEmpty
+                aria-label={i18n.translate('xpack.infra.inventory.groupBySelectorButtonLabel', {
+                  defaultMessage: 'Group by {group}',
+                  values: { group: group.name },
+                })}
+                style={buttonStyle}
+                onClick={handleClick}
+                data-test-subj="groupNameButton"
              >
                {group.name}
-              </EuiLink>
+              </EuiButtonEmpty>
            </EuiToolTip>
          </Name>
          <Count>{group.count}</Count>
        </Inner>
      </GroupNameContainer>
-    );
-  }
-
-  private handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    const { groupBy } = this.props.options;
-    // When groupBy is empty that means there is nothing todo so let's just do nothing.
-    if (groupBy.length === 0) {
-      return;
-    }
-    const currentPath = this.props.isChild && groupBy.length > 1 ? groupBy[1] : groupBy[0];
-    this.props.onDrilldown(`${currentPath.field}: "${this.props.group.name}"`);
-  };
-}
+    </>
+  );
+};

 const GroupNameContainer = euiStyled.div`
  position: relative;
--- 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
@ -259,10 +259,6 @@ export const LegendControls = ({
            checked={draftLegend.reverseColors}
            onChange={handleReverseColors}
            compressed
-            style={{
-              position: 'relative',
-              top: '8px',
-            }}
          />
        </EuiFormRow>
        <EuiFormRow
@ -281,10 +277,6 @@ export const LegendControls = ({
            checked={draftAuto}
            onChange={handleAutoChange}
            compressed
-            style={{
-              position: 'relative',
-              top: '8px',
-            }}
          />
        </EuiFormRow>
        <EuiFormRow
--- a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/swatch_label.tsx
@ -5,7 +5,8 @@
 * 2.0.
 */

-import { EuiColorPickerSwatch, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiText, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';

 export interface Props {
@ -17,7 +18,15 @@ export const SwatchLabel = ({ label, color }: Props) => {
  return (
    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
      <EuiFlexItem grow={false}>
-        <EuiColorPickerSwatch color={color} />
+        <EuiIcon
+          type="stopFilled"
+          color={color}
+          size="xl"
+          aria-label={i18n.translate('xpack.infra.legendControls.iconColorLabel', {
+            defaultMessage: '{label} color',
+            values: { label },
+          })}
+        />
      </EuiFlexItem>
      <EuiFlexItem>
        <EuiText size="xs">
--- a/x-pack/test/functional/page_objects/infra_home_page.ts
+++ b/x-pack/test/functional/page_objects/infra_home_page.ts
@ -129,8 +129,8 @@ export function InfraHomePageProvider({ getService, getPageObjects }: FtrProvide
      await comboBox.setElement(groupByCustomField, field);
      await testSubjects.click('groupByCustomFieldAddButton');
      await this.waitForLoading();
-      const groupNameLinks = await testSubjects.findAll('groupNameLink');
-      return Promise.all(groupNameLinks.map(async (link) => link.getVisibleText()));
+      const groupNameButtons = await testSubjects.findAll('groupNameButton');
+      return Promise.all(groupNameButtons.map((link) => link.getVisibleText()));
    },

    async enterSearchTerm(query: string) {