Remove value prefix on Select combobox accessible name (#4329)

* Remove value prefix on Select combobox accessible name

* Add test for accessible name with no value selected

* Adjust to use everything after first space, allowing another label reference

.changeset/long-wombats-provide.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Remove value prefix on Select combobox accessible name

packages/components/src/__future__/Select/Select.spec.tsx

@@ -33,14 +33,35 @@ const SelectWrapper = ({
 
 describe("<Select />", () => {
   describe("Trigger", () => {
-    it("makes sure the menu to be labelled by trigger", () => {
+    it("has the label as the accessible name", () => {
+      const { getByRole } = render(<SelectWrapper />)
+      const menu = getByRole("combobox", {
+        name: "Mock Label",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
+    it("has the value when an item is selected", () => {
       const { getByRole } = render(<SelectWrapper selectedKey="batch-brew" />)
       const menu = getByRole("combobox", {
-        name: "Batch brew Mock Label",
+        name: "Mock Label",
       })
       expect(menu).toHaveTextContent("Batch brew")
     })
 
+    it("allows more aria-labelledby references to be sent in", () => {
+      const { getByRole } = render(
+        <>
+          <div id="extra-label">extra label stuff</div>
+          <SelectWrapper aria-labelledby="extra-label" />
+        </>
+      )
+      const menu = getByRole("combobox", {
+        name: "Mock Label extra label stuff",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
     describe("when uncontrolled", () => {
       it("does not show the menu initially", () => {
         const { queryByRole } = render(<SelectWrapper />)
@@ -76,7 +97,7 @@ describe("<Select />", () => {
           />
         )
         const trigger = getByRole("combobox", {
-          name: "Batch brew Mock Label",
+          name: "Mock Label",
         })
         await user.click(trigger)
         await waitFor(() => {
@@ -93,7 +114,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 +129,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 +168,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 +181,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 +326,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 +339,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 +351,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")
         })
       })
     })

packages/components/src/__future__/Select/Select.tsx

@@ -116,13 +116,26 @@ 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 reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"]
+  const triggerProps = {
+    ...reactAriaTriggerProps,
+    "aria-labelledby": reactAriaLabelledBy?.substring(
+      reactAriaLabelledBy.indexOf(" ") + 1
+    ),
+  }
+
   const { buttonProps } = useButton(triggerProps, triggerRef)
   const selectToggleProps = {
     ...buttonProps,