carbon
carbon copied to clipboard
Sage
MultiSelect - VoiceOver announcing items as "selected" when they are not
Current behaviour
when using MultiSelect with VoiceOver on Mac, when moving through items in the list each item is announced as "selected" - regardless of whether it is currently selected or not.
On inspection, the aria-selected property of each item simply tracks the one that is currently highlighted, with no relation to what is actually selected (shown in the pills inside the textbox) - see screenshot. This means the same issue likely affects all screenreaders.
The same problem exists on FilterableSelect, and also on simple Select (on simple Select the aria-selected property follows the same faulty logic as described above, but VoiceOver, at least, does not seem to announce "selected").
Expected behaviour
The aria-selected property should only be set to "true" if the element is actually currently selected (displayed in the textbox). Screenreaders should announce "selected" or not accordingly. (At least this should happen on MultiSelect. I'm not so clear on what should happen on FilterableSelect or simple Select - it's probably worth researching what similar components in other libraries do.)
CodeSandbox or Storybook URL
https://carbon.sage.com/?path=/story/select-multiselect--default-story
JIRA Ticket (Sage Only)
No response
Suggested Solution
The aria-selected property should reflect what is currently selected, not the currently highlighted item. (At least on MultiSelect.)
Carbon Version
108.0.0
Design Tokens Version
2.24.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
:tada: This issue has been resolved in version 111.0.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
