search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[TreeView] selected and focus indicators do not meet contrast ratio required by WCAG SC 1.4.11 #12559

Open amhci opened 7 months ago

amhci commented 7 months ago

Steps to reproduce

Link to live example: Go to https://mui.com/x/react-tree-view/ and Edit in StackBlitz. NOTE: I tried CodeSandbox too, but for this example at least, it gives an error FYI.

Steps:

  1. Click on the first item "Data Grid". Note this node is now both selected and focused.
  2. Press the down arrow key to move the focus to the second node. Note the first node is now selected and the second node is focused.

Current behavior

The steps above demonstrate a node with both focus and selected state at the same time and then two individual nodes with the focused and selected state, respectively.

Both of these states use a semi-transparent background to indicate the state. The issue is that the rendered indicators for selected and focused states do not have enough contrast with their surroundings.

Refer to first paragraph under the "User Interface Components" header in the WCAG 2.2 Understanding Docs:

Unless the control is inactive, any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio. (emphasis added)

Selected+focused vs. #FFF bg (1.27:1)

Screenshot 2024-03-25 at 2 36 38 PM

Focused vs. #FFF bg (1.28:1)

Screenshot 2024-03-25 at 2 36 06 PM

Selected vs. #FFF bg (1.1:1)

Screenshot 2024-03-25 at 2 35 10 PM

These do not meet the 3:1 ratio required. Furthermore, using a change in background color for both states means you cannot easily distinguish between them or when both states are active on the same node. You would need to choose a color scheme that has a 3:1 contrast ratio between 3 separate colors and the background -- all while still maintaining the required contrast between text and background-- to achieve this. I don't even know if that's technically possible.

Expected behavior

I strongly encourage the team to adopt different approaches to indicate selected and focused states. For example, I added a pseudo element that mimics the approach of indicating selection in the Tabs component via the existence of a thick line/rectangle. Then I used a complete inversion of the foreground and background to indicate focus. The result is you now meet contrast ratios for all states and you can now easily distinguish between them: https://github.com/mui/mui-x/assets/98350973/f20db594-9773-4800-bee2-7dfa763f9872

Clearly my solution doesn't directly work for MUI's default styling, but you get the idea. I think the "thick line/rectangle" thing works well for selected and you are already doing this for Tabs. You could even re-use the same sliding animation (assuming that's sticking around for Material 3/MUI 6).

Context

N/A

Your environment

N/A -- all environments

Search keywords: contrast selected focus wcag Order ID: 77929

michelengelen commented 7 months ago

Hey @amhci, thanks for raising this issue. I will add this to our board for the team to estimate.