From 066daab0ea8463e8b2a5381e90ed8392ea20a5bf Mon Sep 17 00:00:00 2001 From: daniellewhyte <30729058+daniellewhyte@users.noreply.github.com> Date: Mon, 2 Dec 2024 12:46:33 -0600 Subject: [PATCH] Add visible label and ARIA label to Dropdown widget (#1845) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: This commit adds two new fields to the Dropdown widget: `ariaLabel` and `visibleLabel`. Issue: LIT-1424 ## Test plan: Screen reader walkthrough with `visibleLabel`: https://github.com/user-attachments/assets/47f4ca21-09a6-4b82-b92a-81841c315f89 Screen reader walkthrough with `ariaLabel` only: (This will probably be most instances as the dropdown widget is mostly used inline, and the visible label makes things too cramped.) https://github.com/user-attachments/assets/ad1dfd76-5bc0-48e5-ab15-f57f2f92d0c3 Updates to widget editor: Screenshot 2024-11-27 at 3 37 07 PM You can also see examples in the course editor on this ZND: https://prod-znd-241122-danielle-dw2.khanacademy.org/devadmin/content/articles/dropdown-with-labels/x56e2ea23d30e405c Author: daniellewhyte Reviewers: mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ Publish npm snapshot (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), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (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/1845 --- .changeset/hot-chairs-sell.md | 6 + .../src/styles/perseus-editor.less | 11 +- .../__stories__/dropdown-editor.stories.tsx | 6 +- .../src/widgets/dropdown-editor.tsx | 74 +++++++++-- .../src/__testdata__/renderer.testdata.ts | 2 + .../__snapshots__/renderer.test.tsx.snap | 51 ++++++-- .../__tests__/extract-perseus-data.test.ts | 1 + .../perseus/src/__tests__/renderer.test.tsx | 21 ++-- packages/perseus/src/perseus-types.ts | 4 + packages/perseus/src/strings.ts | 3 + .../perseus-parsers/dropdown-widget.ts | 3 + .../parse-perseus-json-snapshot.test.ts.snap | 2 + .../dropdown/dropdown-ai-utils.test.ts | 4 +- .../__snapshots__/dropdown.test.ts.snap | 22 +++- .../src/widgets/dropdown/dropdown.stories.tsx | 18 ++- .../src/widgets/dropdown/dropdown.test.ts | 16 ++- .../src/widgets/dropdown/dropdown.testdata.ts | 119 ++++++++++++++++++ .../perseus/src/widgets/dropdown/dropdown.tsx | 75 ++++++++--- 18 files changed, 370 insertions(+), 68 deletions(-) create mode 100644 .changeset/hot-chairs-sell.md diff --git a/.changeset/hot-chairs-sell.md b/.changeset/hot-chairs-sell.md new file mode 100644 index 0000000000..901ba07b9b --- /dev/null +++ b/.changeset/hot-chairs-sell.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus": minor +"@khanacademy/perseus-editor": minor +--- + +Add labels to Dropdown widget diff --git a/packages/perseus-editor/src/styles/perseus-editor.less b/packages/perseus-editor/src/styles/perseus-editor.less index 102b64120e..a7f12136be 100644 --- a/packages/perseus-editor/src/styles/perseus-editor.less +++ b/packages/perseus-editor/src/styles/perseus-editor.less @@ -517,11 +517,16 @@ } .dropdown-info { - float: left; + display: inline-flex; + margin-bottom: 16px; } - .dropdown-placeholder { - float: right; + .dropdown-field { + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; + margin-bottom: 16px; } .remove-choice { diff --git a/packages/perseus-editor/src/widgets/__stories__/dropdown-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/dropdown-editor.stories.tsx index ceebb3b0cb..8fdaff9f6e 100644 --- a/packages/perseus-editor/src/widgets/__stories__/dropdown-editor.stories.tsx +++ b/packages/perseus-editor/src/widgets/__stories__/dropdown-editor.stories.tsx @@ -14,5 +14,9 @@ export default { } as Story; export const Default = (args: StoryArgs): React.ReactElement => { - return ; + return ( +
+ +
+ ); }; diff --git a/packages/perseus-editor/src/widgets/dropdown-editor.tsx b/packages/perseus-editor/src/widgets/dropdown-editor.tsx index ac47c87c1f..6ad21df9cf 100644 --- a/packages/perseus-editor/src/widgets/dropdown-editor.tsx +++ b/packages/perseus-editor/src/widgets/dropdown-editor.tsx @@ -1,5 +1,7 @@ /* eslint-disable @khanacademy/ts-no-error-suppressions */ import {components, EditorJsonify, iconTrash} from "@khanacademy/perseus"; +import {TextField} from "@khanacademy/wonder-blocks-form"; +import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography"; import PropTypes from "prop-types"; import * as React from "react"; import ReactDOM from "react-dom"; @@ -34,11 +36,16 @@ class DropdownEditor extends React.Component { ], }; - onPlaceholderChange: (arg1: React.ChangeEvent) => void = ( - e, - ) => { - const placeholder = e.target.value; - this.props.onChange({placeholder: placeholder}); + onVisibleLabelChange: (arg1: string) => void = (visibleLabel) => { + this.props.onChange({visibleLabel}); + }; + + onAriaLabelChange: (arg1: string) => void = (ariaLabel) => { + this.props.onChange({ariaLabel}); + }; + + onPlaceholderChange: (arg1: string) => void = (placeholder) => { + this.props.onChange({placeholder}); }; onCorrectChange: ( @@ -104,7 +111,7 @@ class DropdownEditor extends React.Component { return (
- Dropdown + Dropdown

The drop down is useful for making inequalities in a @@ -115,13 +122,53 @@ class DropdownEditor extends React.Component {

-
- +
+ + Visible label + + + +

Optional visible label

+ +
+
+ + Aria label + + + +

+ Label text that's read by screen readers. Highly + recommend adding a label here to ensure your + exercise is accessible. For more information on + writing accessible labels, please see{" "} + + this article. + {" "} + If left blank, the value will default to "Select an + answer". +

+ +
+
+ + Placeholder + +

This value will appear as the drop down default. It @@ -132,6 +179,7 @@ class DropdownEditor extends React.Component {

+ Choices
    {this.props.choices.map(function (choice, i) { const checkedClass = choice.correct diff --git a/packages/perseus/src/__testdata__/renderer.testdata.ts b/packages/perseus/src/__testdata__/renderer.testdata.ts index 66dde7d706..9160ef2a84 100644 --- a/packages/perseus/src/__testdata__/renderer.testdata.ts +++ b/packages/perseus/src/__testdata__/renderer.testdata.ts @@ -13,6 +13,8 @@ export const dropdownWidget: DropdownWidget = { graded: true, options: { static: false, + ariaLabel: "Test ARIA label", + visibleLabel: "Test visible label", placeholder: "greater/less than or equal to", choices: [ { diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap index 444ee98190..393a4e9009 100644 --- a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap +++ b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap @@ -345,7 +345,15 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
    -
    +
    +
    @@ -357,12 +365,15 @@ exports[`renderer snapshots correct answer: correct answer 1`] = ` data-testid="dropdown-live-region" />