[Dropdown] [BUGFIX] Update aria-label logic

.changeset/selfish-laws-knock.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Dropdown] Change logic for aria-label

packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -350,7 +350,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              id="uid-dropdown-widget-2-dropdown-label"
+              for="uid-dropdown-widget-2-dropdown"
             >
               Test visible label
             </label>
@@ -370,7 +370,6 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
-                aria-labelledby="uid-dropdown-widget-2-dropdown-label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
                 id="uid-dropdown-widget-2-dropdown"
                 role="combobox"
@@ -429,7 +428,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              id="uid-dropdown-widget-4-dropdown-label"
+              for="uid-dropdown-widget-4-dropdown"
             >
               Test visible label
             </label>
@@ -449,7 +448,6 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
-                aria-labelledby="uid-dropdown-widget-4-dropdown-label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
                 id="uid-dropdown-widget-4-dropdown"
                 role="combobox"
@@ -508,7 +506,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
           >
             <label
               class="text_f1191h-o_O-LabelLarge_5s82ln"
-              id="uid-dropdown-widget-0-dropdown-label"
+              for="uid-dropdown-widget-0-dropdown"
             >
               Test visible label
             </label>
@@ -528,7 +526,6 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Test ARIA label"
-                aria-labelledby="uid-dropdown-widget-0-dropdown-label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
                 id="uid-dropdown-widget-0-dropdown"
                 role="combobox"

packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap

@@ -37,7 +37,6 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 aria-expanded="true"
                 aria-haspopup="listbox"
                 aria-label="Select an answer"
-                aria-labelledby="uid-dropdown-widget-2-dropdown-label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
                 id="uid-dropdown-widget-2-dropdown"
                 role="combobox"
@@ -110,7 +109,6 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Select an answer"
-                aria-labelledby="uid-dropdown-widget-0-dropdown-label"
                 class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
                 id="uid-dropdown-widget-0-dropdown"
                 role="combobox"

packages/perseus/src/widgets/dropdown/dropdown.stories.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
 
 import {
+    dropdownWithEmptyPlaceholder,
     dropdownWithVisibleLabel,
     inlineDropdownWithVisibleLabel,
     question1,
@@ -29,3 +30,9 @@ export const InlineDropdownWithVisibleLabel = (
 ): React.ReactElement => {
     return <RendererWithDebugUI question={inlineDropdownWithVisibleLabel} />;
 };
+
+export const DropdownWithEmptyPlaceholder = (
+    args: StoryArgs,
+): React.ReactElement => {
+    return <RendererWithDebugUI question={dropdownWithEmptyPlaceholder} />;
+};

packages/perseus/src/widgets/dropdown/dropdown.testdata.ts

@@ -150,3 +150,35 @@ export const inlineDropdownWithVisibleLabel: PerseusRenderer = {
         },
     },
 };
+
+export const dropdownWithEmptyPlaceholder: PerseusRenderer = {
+    content:
+        "The total number of boxes the forklift can carry is [[☃ dropdown 1]] $60$.",
+    images: {},
+    widgets: {
+        "dropdown 1": {
+            type: "dropdown",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                placeholder: "",
+                choices: [
+                    {
+                        content: "greater than or equal to",
+                        correct: false,
+                    },
+                    {
+                        content: "less than or equal to",
+                        correct: true,
+                    },
+                ],
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -74,7 +74,7 @@ class Dropdown extends React.Component<Props> implements Widget {
                 key="placeholder"
                 value="0"
                 disabled
-                label={this.props.placeholder}
+                label={this.props.placeholder || " "}
             />,
             ...this.props.choices.map((choice, i) => (
                 <OptionItem
@@ -101,7 +101,7 @@ class Dropdown extends React.Component<Props> implements Widget {
                         {this.props.visibleLabel && (
                             <LabelLarge
                                 tag="label"
-                                id={ids.get("dropdown-label")}
+                                htmlFor={ids.get("dropdown")}
                             >
                                 {this.props.visibleLabel}
                             </LabelLarge>
@@ -116,9 +116,9 @@ class Dropdown extends React.Component<Props> implements Widget {
                             disabled={this.props.apiOptions.readOnly}
                             aria-label={
                                 this.props.ariaLabel ||
+                                this.props.visibleLabel ||
                                 this.context.strings.selectAnAnswer
                             }
-                            aria-labelledby={ids.get("dropdown-label")}
                             // This is currently necessary for SRs to read the labels properly.
                             // However, WB is working on a change to add the "combobox" role to
                             // all dropdowns.