search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.24k stars 199 forks source link

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

Open majornista opened 1 year ago

majornista commented 1 year ago

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

Screen capture showing insufficient contrast to distinguish the selected item in SideNav

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 commented 1 year ago

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

pfulton commented 1 year ago

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

jenndiaz commented 1 year ago

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 commented 11 months ago

@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 commented 11 months ago

@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 commented 4 months ago

@najikahalsema to check the status of the progress!

najikahalsema commented 4 months ago

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