diff --git a/.changeset/long-wombats-provide.md b/.changeset/long-wombats-provide.md
new file mode 100644
index 00000000000..48eeb5afbe8
--- /dev/null
+++ 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
index cf60c15e8f0..5854675f15e 100644
--- a/packages/components/src/__future__/Select/Select.spec.tsx
+++ b/packages/components/src/__future__/Select/Select.spec.tsx
@@ -33,14 +33,35 @@ const SelectWrapper = ({
describe("", () => {
describe("Trigger", () => {
- it("makes sure the menu to be labelled by trigger", () => {
+ it("has the label as the accessible name", () => {
+ const { getByRole } = render()
+ const menu = getByRole("combobox", {
+ name: "Mock Label",
+ })
+ expect(menu).toBeInTheDocument()
+ })
+
+ it("has the value when an item is selected", () => {
const { getByRole } = render()
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(
+ <>
+
+
+ >
+ )
+ 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()
@@ -76,7 +97,7 @@ describe("", () => {
/>
)
const trigger = getByRole("combobox", {
- name: "Batch brew Mock Label",
+ name: "Mock Label",
})
await user.click(trigger)
await waitFor(() => {
@@ -93,7 +114,7 @@ describe("", () => {
)
const trigger = getByRole("combobox", {
- name: "Batch brew Mock Label",
+ name: "Mock Label",
})
await user.click(trigger)
await waitFor(() => {
@@ -108,7 +129,7 @@ describe("", () => {
)
const trigger = getByRole("combobox", {
- name: "Batch brew Mock Label",
+ name: "Mock Label",
})
await user.click(trigger)
@@ -147,7 +168,7 @@ describe("", () => {
)
const trigger = getByRole("combobox", {
- name: "Batch brew Mock Label",
+ name: "Mock Label",
})
await user.tab()
await waitFor(() => {
@@ -160,7 +181,7 @@ describe("", () => {
)
const trigger = getByRole("combobox", {
- name: "Batch brew Mock Label",
+ name: "Mock Label",
})
await user.tab()
await waitFor(() => {
@@ -305,9 +326,7 @@ describe("", () => {
})
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("", () => {
const { getByRole } = render(
)
- 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("", () => {
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
index 575b763f02a..babc0a2741f 100644
--- a/packages/components/src/__future__/Select/Select.tsx
+++ b/packages/components/src/__future__/Select/Select.tsx
@@ -116,13 +116,26 @@ export const Select =