feat(action-popover): add aria-labelledby and aria-describedby props

fix #7107
Sage · Dec 5, 2024 · 5ea9dd6 · 5ea9dd6
1 parent 6675b86
commit 5ea9dd6
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 4 deletions.
diff --git a/...onents/action-popover/action-popover-menu-button/action-popover-menu-button.component.tsx b/...onents/action-popover/action-popover-menu-button/action-popover-menu-button.component.tsx
@@ -11,7 +11,8 @@ import { IconType } from "../../icon";
 
 export type ActionPopoverMenuButtonAria = {
   "aria-haspopup": string;
-  "aria-label": string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
   "aria-controls": string;
   "aria-expanded": string;
 };
@@ -41,6 +42,7 @@ export const ActionPopoverMenuButton = ({
   iconPosition,
   size,
   children,
+  ariaAttributes,
   ...props
 }: ActionPopoverMenuButtonProps) => (
   <MenuButtonOverrideWrapper>
@@ -49,6 +51,7 @@ export const ActionPopoverMenuButton = ({
       iconType={iconType}
       iconPosition={iconPosition}
       size={size}
+      {...ariaAttributes}
       {...props}
     >
       {children}

diff --git a/src/components/action-popover/action-popover.component.tsx b/src/components/action-popover/action-popover.component.tsx
@@ -35,7 +35,8 @@ export interface RenderButtonProps {
   "data-element": string;
   ariaAttributes: {
     "aria-haspopup": string;
-    "aria-label": string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
     "aria-controls": string;
     "aria-expanded": string;
   };
@@ -62,6 +63,10 @@ export interface ActionPopoverProps extends MarginProps {
   rightAlignMenu?: boolean;
   /** Prop to specify an aria-label for the component */
   "aria-label"?: string;
+  /** Prop to specify an aria-labelledby for the component */
+  "aria-labelledby"?: string;
+  /** Prop to specify an aria-describedby for the component */
+  "aria-describedby"?: string;
 }
 
 const onOpenDefault = () => {};
@@ -78,6 +83,8 @@ export const ActionPopover = ({
   horizontalAlignment = "left",
   submenuPosition = "left",
   "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   ...rest
 }: ActionPopoverProps) => {
   const l = useLocale();
@@ -232,7 +239,8 @@ export const ActionPopover = ({
         "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
-          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`,
         },
@@ -244,6 +252,8 @@ export const ActionPopover = ({
         role="button"
         aria-haspopup="true"
         aria-label={ariaLabel || l.actionPopover.ariaLabel()}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         aria-controls={menuID}
         aria-expanded={isOpen}
         tabIndex={isOpen ? -1 : 0}

diff --git a/src/components/action-popover/action-popover.test.tsx b/src/components/action-popover/action-popover.test.tsx
@@ -140,6 +140,32 @@ test("uses the aria-label prop if provided", () => {
   expect(screen.getByRole("button")).toHaveAccessibleName("test aria label");
 });
 
+test("renders with the provided aria-labelledby prop", () => {
+  render(
+    <>
+      <span id="test-label-id">test label</span>
+      <ActionPopover aria-labelledby="test-label-id">
+        <ActionPopoverItem>example item</ActionPopoverItem>
+      </ActionPopover>
+    </>,
+  );
+  expect(screen.getByRole("button")).toHaveAccessibleName("test label");
+});
+
+test("renders with the provided aria-describedby prop", () => {
+  render(
+    <>
+      <span id="test-description-id">test description</span>
+      <ActionPopover aria-describedby="test-description-id">
+        <ActionPopoverItem>example item</ActionPopoverItem>
+      </ActionPopover>
+    </>,
+  );
+  expect(screen.getByRole("button")).toHaveAccessibleDescription(
+    "test description",
+  );
+});
+
 test("renders with the menu closed by default", () => {
   render(
     <ActionPopover>
@@ -1825,7 +1851,7 @@ test("an error is thrown, with appropriate error message, if an invalid element
   globalConsoleSpy.mockRestore();
 });
 
-test("an error is thrown, with appropriate error message, if a submenu has incorrecr children", async () => {
+test("an error is thrown, with appropriate error message, if a submenu has incorrect children", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
   const globalConsoleSpy = jest
@@ -1911,6 +1937,37 @@ describe("when the renderButton prop is passed", () => {
 
     expect(menuButton).toHaveAttribute("tabindex", "-1");
   });
+
+  it("renders the menu button with the provided aria-labelledby and aria-describedby", () => {
+    render(
+      <>
+        <span id="test-label-id">test label</span>
+        <span id="test-description-id">test description</span>
+        <ActionPopover
+          renderButton={(props) => (
+            <ActionPopoverMenuButton
+              buttonType="tertiary"
+              iconType="dropdown"
+              iconPosition="after"
+              size="small"
+              aria-labelledby="test-label-id"
+              aria-describedby="test-description-id"
+              {...props}
+            >
+              Foo
+            </ActionPopoverMenuButton>
+          )}
+        >
+          <ActionPopoverItem onClick={jest.fn()}>foo</ActionPopoverItem>
+        </ActionPopover>
+      </>,
+    );
+
+    const menuButton = screen.getByRole("button");
+    expect(menuButton).toBeVisible();
+    expect(menuButton).toHaveAccessibleName("test label");
+    expect(menuButton).toHaveAccessibleDescription("test description");
+  });
 });
 
 describe("When ActionPopoverMenu contains multiple disabled items", () => {