[a11y]: Dropdown component contrast for item with focus/selection fails

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-dropdown--default

React version

https://react.carbondesignsystem.com/?path=/story/components-dropdown--default

Automated testing tool and ruleset

n/a

Assistive technology

n/a

Description

When the dropdown is open, there is a thin blue focus indicator around the entire option list. However, the actual item with 'focus' (i.e., the item I have moved to with my arrow keys) is only indicated by a light grey highlight that contrasts only 1.2:1 against the dropdown list background. This applies to dropdown, multiselect and combobox, but is most noticeable on multiselect, where multiple items can be selected.

This must contrast 3:1 with the unfocused options. And then the text in the option must also contrast 4.5:1 against any background. It is likely that an inversion may be necessary (white text on darker background) This is how a default select element is done (although note that the browser default fails text contrast, so don't emulate it!).

You could also pursue something other than a fill to distinguish the item with focus. For instance, the select-only combobox in the ARIA Authoring practices just uses a focus rectangle to show which has focus. (Note that they also add a black outline to the options list so that it is distinguishable from other page content. If you replaced your thin blue focus indicator around the list with a black line and then put a focus on the option itself, this would resolve it.)

WCAG 2.1 Violation

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-dropdown--default

Steps to reproduce

Open Dropdown in storybook and arrow through options.

Code of Conduct

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

Tasks

Preview Give feedback

1. Investigate the following and assess with design:
2. Remove the 1px blue focus border around the listbox
3. Change the focus border on the input to be 1px when the listbox is opened
4. Apply a 2px blue focus border to the currently focused item within the listbox

[mbgower]

This also applies to the select component.

[tay1orjones]

We've had some explorations on this before: #7929 (comment)

[mbgower]

Thanks for finding that background, @tay1orjones ! It's a little painful reading all the background, but the ulimate decision they arrived at two years ago is very similar to where we arrive on the recent call, with the exception that we're now talking about removing the focus around the whole listbox and just putting it on the item with focus (as well as leaving on the parent component in at least combobox and filterable multiselect dropdown). Either is fine from an accessibility point of view, but I'm inclined to support the view that the focus on the the item instead of the list is clearer and 'looks' less busy.

[mbgower]

@sstrubberg there are obviously design decisions necessary here to know how to proceed, but IMO resolving these contrast failures for focus/selection in a dropdown would be a good goal for the year. This already fails Non-text Contrast, and it will become manifestly more obvious as a failure when WCAG 2.2's Focus Appearance comes into force.

[tay1orjones]

@mbgower will this be solved by #13120? I'm thinking we could close this as a duplicate of that one?

[grahamharper]

Anything I or my team as community contributors do to help move this along? Design or dev.

[sstrubberg]

Thanks for reaching out @grahamharper. Let me connect with the team. After re-reading the issue, it appears as though there will be a lot of moving parts to resolve this.