From 624be81437ed560984ea662647451f4846a71141 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Mon, 30 Sep 2024 16:53:39 -0700 Subject: [PATCH] [Locked Figures Aria] Use TextArea instead of TextField (#1706) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: Replace LabeledTextField with TextArea in `locked-figures-aria-tsx` so that multiline aria labels are easier to work with. Issue: none ## Test plan: `yarn jest` Storybook - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags - All the locked figure types should have updated aria label fields. | Before | After | | --- | --- | | Screenshot 2024-09-30 at 4 25 45 PM | Screenshot 2024-09-30 at 4 25 29 PM | Author: nishasy Reviewers: anakaren-rojas, #perseus, benchristel, catandthemachines Required Reviewers: Approved By: anakaren-rojas Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: https://github.com/Khan/perseus/pull/1706 --- .changeset/brown-dancers-attend.md | 5 ++ .../locked-figure-aria.test.tsx | 5 ++ .../locked-figures/locked-figure-aria.tsx | 68 +++++++++++-------- 3 files changed, 48 insertions(+), 30 deletions(-) create mode 100644 .changeset/brown-dancers-attend.md diff --git a/.changeset/brown-dancers-attend.md b/.changeset/brown-dancers-attend.md new file mode 100644 index 0000000000..692176e912 --- /dev/null +++ b/.changeset/brown-dancers-attend.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": patch +--- + +[Locked Figures Aria] Use TextArea instead of TextField in the locked figures aria settings diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx index dc5d60275d..13d1dacc68 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx @@ -1,3 +1,4 @@ +import {RenderStateRoot} from "@khanacademy/wonder-blocks-core"; import {render, screen} from "@testing-library/react"; import {userEvent as userEventLib} from "@testing-library/user-event"; import * as React from "react"; @@ -24,6 +25,7 @@ describe("LockedFigureAria", () => { prePopulatedAriaLabel="Pre-populated aria label" onChangeProps={() => {}} />, + {wrapper: RenderStateRoot}, ); const titleText = screen.getByText("Aria label"); @@ -53,6 +55,7 @@ describe("LockedFigureAria", () => { prePopulatedAriaLabel="Pre-populated aria label" onChangeProps={() => {}} />, + {wrapper: RenderStateRoot}, ); const input = screen.getByRole("textbox"); @@ -72,6 +75,7 @@ describe("LockedFigureAria", () => { prePopulatedAriaLabel="Pre-populated aria label" onChangeProps={onChangeProps} />, + {wrapper: RenderStateRoot}, ); const autoGenButton = screen.getByRole("button", { @@ -95,6 +99,7 @@ describe("LockedFigureAria", () => { prePopulatedAriaLabel="Pre-populated aria label" onChangeProps={onChangeProps} />, + {wrapper: RenderStateRoot}, ); // Act diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx index 9d33e494bb..c0ebcd02b3 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx @@ -1,10 +1,10 @@ import {components} from "@khanacademy/perseus"; import Button from "@khanacademy/wonder-blocks-button"; import {View} from "@khanacademy/wonder-blocks-core"; -import {LabeledTextField} from "@khanacademy/wonder-blocks-form"; -import {Spring} from "@khanacademy/wonder-blocks-layout"; -import {spacing} from "@khanacademy/wonder-blocks-tokens"; -import {LabelMedium} from "@khanacademy/wonder-blocks-typography"; +import {TextArea} from "@khanacademy/wonder-blocks-form"; +import {Spring, Strut} from "@khanacademy/wonder-blocks-layout"; +import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {LabelMedium, LabelXSmall} from "@khanacademy/wonder-blocks-typography"; import pencilCircle from "@phosphor-icons/core/regular/pencil-circle.svg"; import {StyleSheet} from "aphrodite"; import * as React from "react"; @@ -19,32 +19,39 @@ type Props = { function LockedFigureAria(props: Props) { const {ariaLabel, prePopulatedAriaLabel, onChangeProps} = props; + const id = React.useId(); + const ariaLabelId = `aria-label-${id}`; return ( - - Aria label - - - Aria label is used by screen readers to describe - content to users who may be visually impaired.{" "} -
-
- Populating this field will make it so that users can - use a screen reader to navigate to this point and - hear the description. -
-
- If you leave this field blank, the point will be - hidden from screen readers. Users will not be able - to navigate to this point using a screen reader. - - - } - description={`The figure is hidden from screen readers - if this field is left blank.`} + + + + Aria label + + + + Aria label is used by screen readers to describe content to + users who may be visually impaired.
+
+ Populating this field will make it so that users can use a + screen reader to navigate to this point and hear the + description. +
+
+ If you leave this field blank, the point will be hidden from + screen readers. Users will not be able to navigate to this + point using a screen reader. + + + + + The figure is hidden from screen readers if this field is left + blank. + + +