From ba5f33460d6d5131f95955abae135c9ee138c858 Mon Sep 17 00:00:00 2001 From: anakaren-rojas Date: Tue, 25 Jun 2024 10:25:46 -0700 Subject: [PATCH] fix(LEMS-2082): update expression popover role and remove aria-checked (#1371) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: ### Issue Summary Based on a Level Access audit, the keypad button in the expression widget - doesn't have the appropriate role - misuses the `aria-checked` label ### Fix Summary - Updated `Clickable` component's role to be button - Removed `aria-checked` Issue: LEMS-2082 ## Test plan: 1. Navigate to [Expression Widget](https://prod-znd-240624-anakaren-ar-4.khanacademy.org/internal-courses/test-everything/test-everything-1/expression/e/expression-exercise) 2. Click the expression widget ![image](https://github.com/Khan/perseus/assets/171845986/6eed2f65-796a-42e6-a837-1a1747938b39) 3. Fix reflects updated component role and does not display 'aria-checked' ### Screenshots #### Before ![image](https://github.com/Khan/perseus/assets/171845986/d967771a-9d43-4386-bc52-2288719cca1c) #### After ![image](https://github.com/Khan/perseus/assets/171845986/3816991e-ed0b-4fec-beeb-0378a715c6c0) Author: anakaren-rojas Reviewers: catandthemachines, #perseus Required Reviewers: Approved By: catandthemachines Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: https://github.com/Khan/perseus/pull/1371 --- .changeset/tidy-zebras-dream.md | 6 ++++++ .../src/widgets/__tests__/expression-editor.test.tsx | 2 +- .../perseus/src/components/__tests__/math-input.test.tsx | 8 ++++---- packages/perseus/src/components/math-input.tsx | 3 +-- 4 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 .changeset/tidy-zebras-dream.md diff --git a/.changeset/tidy-zebras-dream.md b/.changeset/tidy-zebras-dream.md new file mode 100644 index 0000000000..09e2762cf9 --- /dev/null +++ b/.changeset/tidy-zebras-dream.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus": major +"@khanacademy/perseus-editor": major +--- + +update attributes for expression widget button diff --git a/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx index d6621d044c..21aebcd42d 100644 --- a/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx +++ b/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx @@ -253,7 +253,7 @@ describe("expression-editor", () => { jest.runOnlyPendingTimers(); await userEvent.click( - screen.getByRole("switch", { + screen.getByRole("button", { name: "open math keypad", }), ); diff --git a/packages/perseus/src/components/__tests__/math-input.test.tsx b/packages/perseus/src/components/__tests__/math-input.test.tsx index 1a4629703b..4c4ca41669 100644 --- a/packages/perseus/src/components/__tests__/math-input.test.tsx +++ b/packages/perseus/src/components/__tests__/math-input.test.tsx @@ -83,7 +83,7 @@ describe("Perseus' MathInput", () => { jest.runOnlyPendingTimers(); // Act - screen.getByRole("switch").click(); + screen.getByRole("button").click(); await userEvent.click(screen.getByRole("button", {name: "1"})); await userEvent.click(screen.getByRole("button", {name: "Plus"})); await userEvent.click(screen.getByRole("button", {name: "2"})); @@ -111,7 +111,7 @@ describe("Perseus' MathInput", () => { // Act // focusing the input triggers the popover - screen.getByRole("switch").click(); + screen.getByRole("button").click(); await userEvent.click(screen.getByRole("button", {name: "1"})); await userEvent.click(screen.getByRole("button", {name: "Plus"})); await userEvent.click(screen.getByRole("button", {name: "2"})); @@ -138,7 +138,7 @@ describe("Perseus' MathInput", () => { // Act // focusing the input triggers the popover - screen.getByRole("switch").click(); + screen.getByRole("button").click(); await userEvent.click(screen.getByRole("button", {name: "1"})); // Assert @@ -160,7 +160,7 @@ describe("Perseus' MathInput", () => { // Act // focusing the input triggers the popover - screen.getByRole("switch").click(); + screen.getByRole("button").click(); await userEvent.tab(); // to "123" tab await userEvent.tab(); // to extra keys tab await userEvent.tab(); // to whole keypad diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx index d5eaee536a..f5a0f79b44 100644 --- a/packages/perseus/src/components/math-input.tsx +++ b/packages/perseus/src/components/math-input.tsx @@ -364,8 +364,7 @@ class InnerMathInput extends React.Component { ? this.context.strings.closeKeypad : this.context.strings.openKeypad } - aria-checked={this.state.keypadOpen} - role="switch" + role="button" onClick={() => this.state.keypadOpen ? this.closeKeypad()