Remove value prefix on Select combobox accessible name

cultureamp · Nov 20, 2023 · 204169f · 204169f
1 parent 391c220
commit 204169f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/.changeset/long-wombats-provide.md b/.changeset/long-wombats-provide.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Remove value prefix on Select combobox accessible name
diff --git a/packages/components/src/__future__/Select/Select.spec.tsx b/packages/components/src/__future__/Select/Select.spec.tsx
@@ -36,7 +36,7 @@ describe("<Select />", () => {
     it("makes sure the menu to be labelled by trigger", () => {
       const { getByRole } = render(<SelectWrapper selectedKey="batch-brew" />)
       const menu = getByRole("combobox", {
-        name: "Batch brew Mock Label",
+        name: "Mock Label",
       })
       expect(menu).toHaveTextContent("Batch brew")
     })
@@ -76,7 +76,7 @@ describe("<Select />", () => {
           />
         )
         const trigger = getByRole("combobox", {
-          name: "Batch brew Mock Label",
+          name: "Mock Label",
         })
         await user.click(trigger)
         await waitFor(() => {
@@ -93,7 +93,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.click(trigger)
           await waitFor(() => {
@@ -108,7 +108,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" defaultOpen />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
 
           await user.click(trigger)
@@ -147,7 +147,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -160,7 +160,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -305,9 +305,7 @@ describe("<Select />", () => {
         })
         await user.keyboard("{Enter}")
 
-        await user.click(
-          getByRole("combobox", { name: "Short black Mock Label" })
-        )
+        await user.click(getByRole("combobox", { name: "Mock Label" }))
         await waitFor(() => {
           expect(
             getByRole("option", { name: "Short black", selected: true })
@@ -320,7 +318,7 @@ describe("<Select />", () => {
         const { getByRole } = render(
           <SelectWrapper onSelectionChange={spy} defaultOpen />
         )
-        const trigger = getByRole("combobox", { name: "Select Mock Label" })
+        const trigger = getByRole("combobox", { name: "Mock Label" })
 
         await user.tab()
         await waitFor(() => {
@@ -332,7 +330,7 @@ describe("<Select />", () => {
         await user.keyboard("{Enter}")
         await waitFor(() => {
           expect(spy).toHaveBeenCalledTimes(1)
-          expect(trigger).toHaveAccessibleName("Short black Mock Label")
+          expect(trigger).toHaveAccessibleName("Mock Label")
         })
       })
     })

diff --git a/packages/components/src/__future__/Select/Select.tsx b/packages/components/src/__future__/Select/Select.tsx
@@ -116,13 +116,23 @@ export const Select = <Option extends SelectOption = SelectOption>({
 
   const {
     labelProps,
-    triggerProps,
+    triggerProps: reactAriaTriggerProps,
     valueProps,
     menuProps,
     errorMessageProps,
     descriptionProps,
   } = useSelect(ariaSelectProps, state, triggerRef)
 
+  // Hack incoming:
+  // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
+  // We use role=combobox, meaning screen readers will read the value.
+  // So we're modifying the `aria-labelledby` property to remove the value element id.
+  // Issue: https://github.com/adobe/react-spectrum/issues/4091
+  const triggerProps = {
+    ...reactAriaTriggerProps,
+    "aria-labelledby": reactAriaTriggerProps["aria-labelledby"]?.split(" ")[1],
+  }
+
   const { buttonProps } = useButton(triggerProps, triggerRef)
   const selectToggleProps = {
     ...buttonProps,