[a11y]: Screen Reader doesn't read options in Dropdown correctly

RachelGHogan commented 2 months ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.64.1 (reproduced in 1.66.0)

React version

No response

Automated testing tool and ruleset

Screenreader

Assistive technology

Google Chrome Screen Reader v53.0.2784.15

Description

It seems that if you have multiple properties within an object that you pass through the items field (even if one of them matches the itemToString function), all the screenreader says is "expanded", instead of the expected "[option name/ abel] not selected x of y".

You can see in the below screenshot that the itemToString is parsing just fine, since the label of the dropdown is option 3, and you can see in the console as well that both option 1 and 3 were correctly parsed.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-ba7pgw-j28fwm?file=src%2FApp.jsx

Steps to reproduce

Pass a list with an object with more than 1 property to the items field of a dropdown. Example available in the stackblitx above

Suggested Severity

None

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

finken2 commented 2 weeks ago

I'm running into the same thing. We have two dropdowns on a page:

one dropdown which works fine
another which won't read the items I believe this issue isn't multiple properties, but actually the id property being in the item.

I took your stackblitz and modified/simplified a little: https://stackblitz.com/edit/github-ba7pgw-xpupkw?file=src%2FApp.jsx Here's a recording as well, with macos voiceover (but no audio) https://github.com/user-attachments/assets/a6612312-7426-4265-a623-fc62da7b4f84

I also tested in our code on ibm cloud, just deleting the id property from a list of items, and it seems to resolve the issue.

finken2 commented 1 week ago

I think i got to the bottom of this today: The root cause is the aria-activedescendant in downshift's menu updates to the IDs of the different items in the list. That's fine when downshift is managing the IDs, which it is if the items don't contain IDs. However, if your items have IDs, that's what ends up on the DOM node b/c of this PR in carbon, so the downshift aria info is pointing to nonexistent items, and nothing is read. I think the solution is to rollback that PR, unless we're going to get into the downshift code.

TLDR: Basically, downshift is using the ID for things, so we shouldn't be mucking with it.

carbon-design-system / carbon