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 && (