diff --git a/src/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.tsx b/src/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.tsx index e9d1551b05..09bc332472 100644 --- a/src/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.tsx +++ b/src/components/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) => ( @@ -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 index d427fe2461..36e2d1500b 100644 --- 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 index 131b86f04f..68f9abcdd4 100644 --- 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( + <> + test label + + example item + + , + ); + expect(screen.getByRole("button")).toHaveAccessibleName("test label"); +}); + +test("renders with the provided aria-describedby prop", () => { + render( + <> + test description + + example item + + , + ); + expect(screen.getByRole("button")).toHaveAccessibleDescription( + "test description", + ); +}); + test("renders with the menu closed by default", () => { render( @@ -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( + <> + test label + test description + ( + + Foo + + )} + > + foo + + , + ); + + 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", () => {