diff --git a/.changeset/selfish-spiders-care.md b/.changeset/selfish-spiders-care.md new file mode 100644 index 000000000..10291ad6a --- /dev/null +++ b/.changeset/selfish-spiders-care.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-popover": patch +--- + +Adding aria label attr to View component diff --git a/packages/wonder-blocks-popover/src/components/__tests__/popover.test.tsx b/packages/wonder-blocks-popover/src/components/__tests__/popover.test.tsx index 6e5707dc0..c24ac6e46 100644 --- a/packages/wonder-blocks-popover/src/components/__tests__/popover.test.tsx +++ b/packages/wonder-blocks-popover/src/components/__tests__/popover.test.tsx @@ -582,6 +582,43 @@ describe("Popover", () => { }), ).toBeInTheDocument(); }); + + it("should correctly describe the popover content core's aria label", async () => { + // Arrange + render( + + + + } + > + + , + ); + + // Act + // Open the popover + const openButton = await screen.findByRole("button", { + name: "Open default popover", + }); + + await userEvent.click(openButton); + const popover = await screen.findByRole("dialog"); + + // disabling this check because we need to access the popover content core + // in order to verify the aria-label is getting passed correctly + // eslint-disable-next-line testing-library/no-node-access + const popoverContentCore = popover.firstChild as HTMLElement; + + // Assert + expect(popoverContentCore.getAttribute("aria-label")).toBe( + "Popover Content Core", + ); + }); }); describe("keyboard navigation", () => { diff --git a/packages/wonder-blocks-popover/src/components/popover-content-core.tsx b/packages/wonder-blocks-popover/src/components/popover-content-core.tsx index 39bde0f2f..903ae1f4d 100644 --- a/packages/wonder-blocks-popover/src/components/popover-content-core.tsx +++ b/packages/wonder-blocks-popover/src/components/popover-content-core.tsx @@ -70,6 +70,7 @@ export default class PopoverContentCore extends React.Component { render(): React.ReactNode { const { + "aria-label": ariaLabel, children, closeButtonLight, closeButtonLabel, @@ -87,6 +88,7 @@ export default class PopoverContentCore extends React.Component { color !== "white" && styles[color], style, ]} + aria-label={ariaLabel} > {closeButtonVisible && (