[Locked Figures Aria] Use TextArea instead of TextField

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.
Khan · Sep 30, 2024 · 9fe4aea · 9fe4aea
1 parent e297f3d
commit 9fe4aea
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 30 deletions.
diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.test.tsx b/...us-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/...perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/...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 (
         <View>
-            <LabeledTextField
-                label={
-                    <View style={styles.row}>
-                        <LabelMedium>Aria label</LabelMedium>
-                        <Spring />
-                        <InfoTip>
-                            Aria label is used by screen readers to describe
-                            content to users who may be visually impaired.{" "}
-                            <br />
-                            <br />
-                            Populating this field will make it so that users can
-                            use a screen reader to navigate to this point and
-                            hear the description.
-                            <br />
-                            <br />
-                            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.
-                        </InfoTip>
-                    </View>
-                }
-                description={`The figure is hidden from screen readers
-                            if this field is left blank.`}
+            <Strut size={spacing.xSmall_8} />
+            <View style={styles.row}>
+                <LabelMedium tag="label" htmlFor={ariaLabelId}>
+                    Aria label
+                </LabelMedium>
+                <Spring />
+                <InfoTip>
+                    Aria label is used by screen readers to describe content to
+                    users who may be visually impaired. <br />
+                    <br />
+                    Populating this field will make it so that users can use a
+                    screen reader to navigate to this point and hear the
+                    description.
+                    <br />
+                    <br />
+                    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.
+                </InfoTip>
+            </View>
+            <Strut size={spacing.xxSmall_6} />
+            <LabelXSmall style={styles.caption}>
+                The figure is hidden from screen readers if this field is left
+                blank.
+            </LabelXSmall>
+            <Strut size={spacing.xxSmall_6} />
+            <TextArea
+                id={ariaLabelId}
                 value={ariaLabel ?? ""}
                 onChange={(newValue) => {
                     onChangeProps({
@@ -53,7 +60,8 @@ function LockedFigureAria(props: Props) {
                     });
                 }}
                 placeholder="Ex. Point at (x, y)"
-                style={styles.ariaLabelTextField}
+                rows={1}
+                resizeType="vertical"
             />
 
             <Button
@@ -80,8 +88,8 @@ const styles = StyleSheet.create({
     button: {
         alignSelf: "start",
     },
-    ariaLabelTextField: {
-        marginTop: spacing.xSmall_8,
+    caption: {
+        color: color.offBlack64,
     },
 });