[Fleet] Fix screen reader announcement for actions buttons across Fleet tables

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx

@@ -7,6 +7,7 @@
 
 import React, { memo, useState, useMemo, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 
 import type { AgentPolicy } from '../../../types';
@@ -88,6 +89,13 @@ export const AgentPolicyActionMenu = memo<{
       }
     }, [onCancelEnrollment, setIsEnrollmentFlyoutOpen]);
 
+    const actionsAriaLabel = fullButton
+      ? undefined
+      : i18n.translate('xpack.fleet.agentPolicyActionMenu.actionsAriaLabel', {
+          defaultMessage: 'Actions for {policyName}',
+          values: { policyName: agentPolicy.name },
+        });
+
     return (
       <AgentPolicyCopyProvider>
         {(copyAgentPolicyPrompt) => {
@@ -350,6 +358,7 @@ export const AgentPolicyActionMenu = memo<{
               <ContextMenuActions
                 isOpen={isContextMenuOpen}
                 onChange={onContextMenuChange}
+                aria-label={actionsAriaLabel}
                 button={
                   fullButton
                     ? {

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/data_stream/list_page/components/data_stream_row_actions.tsx

@@ -19,6 +19,11 @@ export const DataStreamRowActions = memo<{ datastream: DataStream }>(({ datastre
   const { dashboards } = datastream;
   const dashboardLocator = useDashboardLocator();
 
+  const actionsAriaLabel = i18n.translate('xpack.fleet.dataStreamList.rowActionsAriaLabel', {
+    defaultMessage: 'Actions for {dataset}',
+    values: { dataset: datastream.dataset },
+  });
+
   const actionNameSingular = (
     <FormattedMessage
       id="xpack.fleet.dataStreamList.viewDashboardActionText"
@@ -58,7 +63,7 @@ export const DataStreamRowActions = memo<{ datastream: DataStream }>(({ datastre
         ],
       },
     ];
-    return <ContextMenuActions panels={apmItem} />;
+    return <ContextMenuActions panels={apmItem} aria-label={actionsAriaLabel} />;
   }
 
   if (!dashboards || dashboards.length === 0) {
@@ -74,7 +79,7 @@ export const DataStreamRowActions = memo<{ datastream: DataStream }>(({ datastre
         ],
       },
     ];
-    return <ContextMenuActions panels={disabledItems} />;
+    return <ContextMenuActions panels={disabledItems} aria-label={actionsAriaLabel} />;
   }
 
   if (dashboards.length === 1) {
@@ -91,7 +96,7 @@ export const DataStreamRowActions = memo<{ datastream: DataStream }>(({ datastre
         ],
       },
     ];
-    return <ContextMenuActions panels={panelItems} />;
+    return <ContextMenuActions panels={panelItems} aria-label={actionsAriaLabel} />;
   }
 
   const panelItems = [
@@ -119,5 +124,5 @@ export const DataStreamRowActions = memo<{ datastream: DataStream }>(({ datastre
     },
   ];
 
-  return <ContextMenuActions panels={panelItems} />;
+  return <ContextMenuActions panels={panelItems} aria-label={actionsAriaLabel} />;
 });

x-pack/platform/plugins/shared/fleet/public/components/context_menu_actions.tsx

@@ -27,6 +27,7 @@ type Props = {
   isOpen?: boolean;
   isManaged?: boolean;
   onChange?: (isOpen: boolean) => void;
+  'aria-label'?: string;
 } & (
   | {
       items: EuiContextMenuPanelProps['items'];
@@ -36,64 +37,69 @@ type Props = {
     }
 );
 
-export const ContextMenuActions = React.memo<Props>(({ button, onChange, isOpen, ...props }) => {
-  const [isOpenState, setIsOpenState] = useState(false);
-  const handleCloseMenu = useCallback(() => {
-    if (onChange) {
-      onChange(false);
-    } else {
-      setIsOpenState(false);
-    }
-  }, [setIsOpenState, onChange]);
-  const handleToggleMenu = useCallback(() => {
-    if (onChange) {
-      onChange(!isOpen);
-    } else {
-      setIsOpenState(!isOpenState);
-    }
-  }, [isOpenState, onChange, isOpen]);
+export const ContextMenuActions = React.memo<Props>(
+  ({ button, onChange, isOpen, 'aria-label': ariaLabel, ...props }) => {
+    const [isOpenState, setIsOpenState] = useState(false);
+    const handleCloseMenu = useCallback(() => {
+      if (onChange) {
+        onChange(false);
+      } else {
+        setIsOpenState(false);
+      }
+    }, [setIsOpenState, onChange]);
+    const handleToggleMenu = useCallback(() => {
+      if (onChange) {
+        onChange(!isOpen);
+      } else {
+        setIsOpenState(!isOpenState);
+      }
+    }, [isOpenState, onChange, isOpen]);
 
-  const actionButton = button ? (
-    <EuiButton {...button.props} onClick={handleToggleMenu} isDisabled={props.isManaged}>
-      {button.children}
-    </EuiButton>
-  ) : (
-    <EuiButtonIcon
-      isDisabled={props.isManaged}
-      iconType="boxesVertical"
-      onClick={handleToggleMenu}
-      aria-label={i18n.translate('xpack.fleet.genericActionsMenuText', {
-        defaultMessage: 'Open',
-      })}
-      data-test-subj="agentActionsBtn"
-    />
-  );
+    const actionButton = button ? (
+      <EuiButton {...button.props} onClick={handleToggleMenu} isDisabled={props.isManaged}>
+        {button.children}
+      </EuiButton>
+    ) : (
+      <EuiButtonIcon
+        isDisabled={props.isManaged}
+        iconType="boxesVertical"
+        onClick={handleToggleMenu}
+        aria-label={
+          ariaLabel ??
+          i18n.translate('xpack.fleet.genericActionsMenuText', {
+            defaultMessage: 'Actions',
+          })
+        }
+        data-test-subj="agentActionsBtn"
+      />
+    );
 
-  return (
-    <EuiPopover
-      anchorPosition="downRight"
-      panelPaddingSize="none"
-      button={
-        props.isManaged ? (
-          <EuiToolTip
-            title={i18n.translate('xpack.fleet.externallyManagedLabel', {
-              defaultMessage: 'This is externally managed integration policy.',
-            })}
-          >
-            {actionButton}
-          </EuiToolTip>
+    return (
+      <EuiPopover
+        anchorPosition="downRight"
+        panelPaddingSize="none"
+        button={
+          props.isManaged ? (
+            <EuiToolTip
+              title={i18n.translate('xpack.fleet.externallyManagedLabel', {
+                defaultMessage: 'This is externally managed integration policy.',
+              })}
+            >
+              {actionButton}
+            </EuiToolTip>
+          ) : (
+            actionButton
+          )
+        }
+        isOpen={isOpen === undefined ? isOpenState : isOpen}
+        closePopover={handleCloseMenu}
+      >
+        {'items' in props ? (
+          <EuiContextMenuPanel items={props.items} />
         ) : (
-          actionButton
-        )
-      }
-      isOpen={isOpen === undefined ? isOpenState : isOpen}
-      closePopover={handleCloseMenu}
-    >
-      {'items' in props ? (
-        <EuiContextMenuPanel items={props.items} />
-      ) : (
-        <EuiContextMenu panels={props.panels} initialPanelId={0} />
-      )}
-    </EuiPopover>
-  );
-});
+          <EuiContextMenu panels={props.panels} initialPanelId={0} />
+        )}
+      </EuiPopover>
+    );
+  }
+);

x-pack/platform/plugins/shared/fleet/public/components/package_policy_actions_menu.tsx

@@ -8,6 +8,7 @@
 import React, { useMemo, useState } from 'react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 
 import { EXCLUDED_FROM_PACKAGE_POLICY_COPY_PACKAGES } from '../../common/constants';
 import type { AgentPolicy, InMemoryPackagePolicy } from '../types';
@@ -250,6 +251,10 @@ export const PackagePolicyActionsMenu: React.FunctionComponent<{
         isOpen={isActionsMenuOpen}
         items={menuItems}
         onChange={(open) => setIsActionsMenuOpen(open)}
+        aria-label={i18n.translate('xpack.fleet.packagePolicyActionsMenu.actionsAriaLabel', {
+          defaultMessage: 'Actions for {policyName}',
+          values: { policyName: packagePolicy.name },
+        })}
       />
     </>
   );