[ObsUX][A11y] Add aria-label to group by count (#217302)

Closes https://github.com/elastic/kibana/issues/194974

### What was done

- for the `All` button a description and spell out was done in
https://github.com/elastic/kibana/pull/216592
- added aria-label to count number so it spells out the number of type
of node
<img width="460" alt="Screenshot 2025-04-07 at 11 26 32"
src="https://github.com/user-attachments/assets/7b0e814f-7713-4a6c-9b6c-2a45bb9b28c5"
/>
<img width="460" alt="Screenshot 2025-04-07 at 11 26 15"
src="https://github.com/user-attachments/assets/33ca56d4-09e6-4b5a-be36-7771b1467272"
/>
<img width="460" alt="Screenshot 2025-04-07 at 11 25 51"
src="https://github.com/user-attachments/assets/2c8bcf14-6308-4c22-a76a-b8313f2f580e"
/>
<img width="460" alt="Screenshot 2025-04-07 at 11 24 47"
src="https://github.com/user-attachments/assets/10497f74-77ba-48a9-ac2d-d3cbdcbeb609"
/>

x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx

@@ -7,8 +7,9 @@
 
 import { EuiButtonEmpty, EuiScreenReaderOnly, EuiToolTip, useEuiFontSize } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
-import { i18n } from '@kbn/i18n';
 import styled from '@emotion/styled';
+import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
+import { i18n } from '@kbn/i18n';
 import type {
   InfraWaffleMapGroup,
   InfraWaffleMapOptions,
@@ -19,9 +20,10 @@ interface Props {
   group: InfraWaffleMapGroup;
   isChild?: boolean;
   options: InfraWaffleMapOptions;
+  nodeType: InventoryItemType;
 }
 
-export const GroupName: React.FC<Props> = ({ onDrilldown, group, isChild, options }) => {
+export const GroupName: React.FC<Props> = ({ onDrilldown, group, isChild, options, nodeType }) => {
   const [a11yAnnouncement, setA11yAnnouncement] = useState('');
 
   const handleClick = useCallback(
@@ -69,11 +71,14 @@ export const GroupName: React.FC<Props> = ({ onDrilldown, group, isChild, option
           <Name>
             <EuiToolTip position="top" content={group.name}>
               <EuiButtonEmpty
-                aria-label={i18n.translate('xpack.infra.inventory.groupBySelectorButtonLabel', {
-                  defaultMessage: 'Group by {group}',
-                  values: { group: group.name },
-                })}
-                style={buttonStyle}
+                aria-label={i18n.translate(
+                  'xpack.infra.inventory.groupBySelectorButton.ariaLabel',
+                  {
+                    defaultMessage: 'Group by {group}',
+                    values: { group: group.name },
+                  }
+                )}
+                css={buttonStyle}
                 onClick={handleClick}
                 data-test-subj="groupNameButton"
               >
@@ -81,7 +86,14 @@ export const GroupName: React.FC<Props> = ({ onDrilldown, group, isChild, option
               </EuiButtonEmpty>
             </EuiToolTip>
           </Name>
-          <Count>{group.count}</Count>
+          <Count
+            aria-label={i18n.translate('xpack.infra.inventory.groupByCount.ariaLabel', {
+              defaultMessage: '{count} {nodeType} in this group',
+              values: { nodeType, count: group.count },
+            })}
+          >
+            {group.count}
+          </Count>
         </Inner>
       </GroupNameContainer>
     </>

x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx

@@ -30,7 +30,12 @@ interface Props {
 export const GroupOfGroups: React.FC<Props> = (props) => {
   return (
     <GroupOfGroupsContainer>
-      <GroupName group={props.group} onDrilldown={props.onDrilldown} options={props.options} />
+      <GroupName
+        group={props.group}
+        onDrilldown={props.onDrilldown}
+        options={props.options}
+        nodeType={props.nodeType}
+      />
       <Groups>
         {props.group.groups.map((group) => (
           <GroupOfNodes

x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx

@@ -60,7 +60,13 @@ export const GroupOfNodes = React.memo<Props>(
 
     return (
       <GroupOfNodesContainer style={{ width }}>
-        <GroupName group={group} onDrilldown={onDrilldown} isChild={isChild} options={options} />
+        <GroupName
+          group={group}
+          onDrilldown={onDrilldown}
+          isChild={isChild}
+          options={options}
+          nodeType={nodeType}
+        />
         <Nodes>
           {group.width ? (
             group.nodes.map((node) => (