Open majornista opened 1 year ago
@pfulton this is scheduled for Core Tokens at some point, right?
@Westbrook Yes! @jenndiaz has it in progress right now.
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.
@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.
@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
@najikahalsema to check the status of the progress!
This is still an issue that needs to be addressed in S2, so we can keep this issue open...
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?
Sample code that illustrates the problem
No response
Logs taken while reproducing problem
No response