From 78ee53c9416e3633c4163ccc5c9f90c46f90dde6 Mon Sep 17 00:00:00 2001
From: anakaren-rojas <anakaren@khanacademy.org>
Date: Mon, 1 Jul 2024 09:26:05 -0700
Subject: [PATCH] fix(LEMS-2086): Add aria label to Popover Content (#2263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Aria-labels are not being added to the `View` component, causing accessibility issues.
This PR adds aria-label to `View`

Issue: LEMS-2089

## Test plan:

Author: anakaren-rojas

Reviewers: catandthemachines, jeresig, anakaren-rojas, handeyeco

Required Reviewers:

Approved By: catandthemachines, jeresig, jeresig

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ codecov/project, ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2263
---
 .changeset/selfish-spiders-care.md            |  5 +++
 .../src/components/__tests__/popover.test.tsx | 37 +++++++++++++++++++
 .../src/components/popover-content-core.tsx   |  2 +
 3 files changed, 44 insertions(+)
 create mode 100644 .changeset/selfish-spiders-care.md

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(
+                <Popover
+                    onClose={jest.fn()}
+                    content={
+                        <PopoverContentCore aria-label="Popover Content Core">
+                            <button data-close-button onClick={close}>
+                                Close Popover
+                            </button>
+                        </PopoverContentCore>
+                    }
+                >
+                    <Button>Open default popover</Button>
+                </Popover>,
+            );
+
+            // 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<Props> {
 
     render(): React.ReactNode {
         const {
+            "aria-label": ariaLabel,
             children,
             closeButtonLight,
             closeButtonLabel,
@@ -87,6 +88,7 @@ export default class PopoverContentCore extends React.Component<Props> {
                     color !== "white" && styles[color],
                     style,
                 ]}
+                aria-label={ariaLabel}
             >
                 {closeButtonVisible && (
                     <CloseButton