Screen readers read out object code when using useMultipleSelection hook

[jamesryan-dev]

• downshift version: ^7.6.0 ( but bug also occurs on your example page via your docs )
• node version: ^18
• npm (or yarn) version: ^9

Relevant code or config

But if present here in your docs so I have only included this:

https://www.downshift-js.com/use-multiple-selection/

What you did:

• Using a screen reader
• Remove one of the items

We are using the removeSelectedItem function which is causing this screen reader issue I believe

What happened:

You will hear, "[object, object] has been removed"

Problem description:

Screen readers are reading out code

Suggested solution:

I'm not sure sorry

[jamesryan-dev]

any updates on this?

[ApplyBoardDak]

this also happens on Downshift v8. the removeSelectedItem will read [object object] if useMultipleSelection uses an object as its type instead of a string. in v7 and v8 you can get around this by implementing getA11yRemovalMessage like so:

  const { getSelectedItemProps, getDropdownProps, removeSelectedItem, reset } =
    useMultipleSelection<OptionWithGroup>({
      getA11yRemovalMessage: (options) => {
        return `${options.removedSelectedItem.label} has been removed`
      },
      ...