[Bug][a11y]: SideNav: State of active SideNavItem lacks 3 to 1 contrast ratio.

[majornista]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

SideNav, SideNavItem

Expected behavior

The selected SideNavItem color MUST have at least a 3 to 1 luminosity contrast ratio with either the inner or outer adjacent background.

Actual behavior

The selected SideNavItem color does not have at least a 3 to 1 luminosity contrast ratio with either the inner or outer adjacent background.

Color and contrast ratio details: Selected state color: #EEEEEE Adjacent background color: #FAFAFA The contrast ratio is: 1.1:1

This is a failure of WCAG Success Criteria: 1.4.11 Non-text Contrast (Level AA) – WCAG 2.1 WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

Screenshots

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

@pfulton this is scheduled for Core Tokens at some point, right?

[pfulton]

@Westbrook Yes! @jenndiaz has it in progress right now.

[jenndiaz]

I did reach out to design about this while working on the migration of the SideNav component. As of now it is a know issue that they have intentionally not addressed yet. Here is the full response.

[najikahalsema]

@jenndiaz Could you make an issue for this in Spectrum CSS so it can be tracked over there? Also, could you re-link the full response? That link doesn't seem to work.

[jenndiaz]

@najikahalsema I apologize, you all are not in the channel with the thread where design explained this. Here is a quoted copy of it.

Lynn Hao hi, [@Jenn Diaz] ! I believe this is a known issue that the design team has intentionally not addressed, yet. the primary concern of updating to meet 3:1 is that it's very difficult to still ensure the label will have 4.5:1 contrast with the background. it's more likely that we'd need to swap the colors, so that the selected background is dark, and the text is light. however, this can also be really prominent and might not be desired for all contexts. in the specific case of our docs sites, there's also always a title available elsewhere on the page. for example, "Action group" here is shown as the page title. this helps ensure people know where they are on the page. this is very similar to what iOS does – they require a page title to be located somewhere on the page, when the menu item isn't accessible standalone (ie, in a tab bar). here are two tickets from the past in our backlog about this: https://jira.corp.adobe.com/browse/SDS-2599 this ticket is for exploring possible other solutions for this issue https://jira.corp.adobe.com/browse/SDS-10103 this ticket is for adding the "swapped" bg/text option as emphasized, for cases where a page title isn't available

here is the issue I created for Spectrum-CSS

[Rajdeepc]

@najikahalsema to check the status of the progress!

[najikahalsema]

This is still an issue that needs to be addressed in S2, so we can keep this issue open...