Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

a11y: Add token to support disabled text #195

Open
blackfalcon opened this issue Nov 27, 2024 · 4 comments · May be fixed by #196
Open

a11y: Add token to support disabled text #195

blackfalcon opened this issue Nov 27, 2024 · 4 comments · May be fixed by #196
Assignees
@jason-capsule42
Labels
design tokens not-reviewed Issue has not been reviewed by Auro team members Type: Feature New Feature

Comments

@blackfalcon
Copy link
Member

blackfalcon commented Nov 27, 2024 •
edited
Loading

Is your feature request related to a problem? Please describe.

In reviewing Flight Search for accessibility issues, I came across the UI attached to this issue.

Screenshot 2024-11-27 at 10 55 48 AM

The CSS is written as

.valuetile.svelte-1unl1vz .valuetile-container .price-callout-container .disabled-text.svelte-1unl1vz {
    color: var(--ds-color-border-disabled-default);
    font-size: var(--ds-text-body-size-sm);
}

The code color: var(--ds-color-border-disabled-default); is the focus of this issue.

  1. --ds-color-border-disabled-default is not the right token to be used for text
  2. --ds-color-border-disabled-default is a deprecated token
  3. There is no relative semantically correct token to request for replacement and is suspect to failed theming UI

Describe the solution you'd like

New tokens specifically for disabled text is requested.

var(--ds-color-text-disabled-default),
var(--ds-color-text-disabled-inverse),

According to WCAG 2.1 - Success Criterion 1.4.11: Non-Text Contrast, this requires a minimum 3:1 contrast ratio for graphical elements and states that it applies to "inactive user interface components," such as disabled text.

The closeted existing Auro token would be var(--ds-color-base-gray-500) with a hex value of #959595 which barely meets the 3:1 contrast requirement (2.99:1) but can be considered an acceptable option for disabled text.

For the inverse, var(--ds-color-base-gray-600) with a hex value of #7e7e7e would meet the 3.1 color contrast ratio 3.1 requirements (3.5:1) using the var(--ds-color-background-primary-100-inverse) token with hex value of #0e2b4f as an inverse background.

I'd also recommend that the token var(--ds-color-text-ui-disabled-default) be updated to alias color.base.gray.500.value to support the #959595 hex value that meets the 3:1 contrast requirement.

Describe alternatives you've considered

The cost of doing nothing is the following; endangerment of not providing a semantic token for disabled text which will result in inconsistent theme updates going forward and the possibility of disengaging users with low-vision impairments and/or color blindness issues.

Additional context

Related issue for flight search team

Exit criteria

This issue can be closed once the requested tokens have been made available for consumption by UI development teams.
@blackfalcon blackfalcon added Type: Feature New Feature design tokens not-reviewed Issue has not been reviewed by Auro team members labels Nov 27, 2024
blackfalcon added a commit that referenced this issue Nov 27, 2024
@blackfalcon
feat: add new token for disabled-text #195
b4468e4 
This commit creates a new semantic token specifically to be used in UIs
where the content of an interaction is to appear as disabled to the end
user. This new token may be used in cases where there is unavailable
features in the UI that are not specifically interactive elements.

On branch dsande/disabledText/195
Changes to be committed:
modified:   src/color/text.json
@blackfalcon blackfalcon linked a pull request Nov 27, 2024 that will close this issue
Open
6 tasks
@blackfalcon blackfalcon linked a pull request Nov 27, 2024 that will close this issue
Add new token for disabled-text #195 #196
Open
6 tasks
@jason-capsule42
Copy link
Member

@blackfalcon we currently already have these two tokens for this purpose defined:

--ds-color-text-ui-disabled-default: #adadad;
--ds-color-text-ui-disabled-inverse: #7e7e7e;

@nklansford We need to make sure we consider this as part of the semantic token conversations that are ongoing.

@blackfalcon
Copy link
Member Author

blackfalcon commented Dec 2, 2024 •
edited
Loading

Hey @jason-capsule42

I did see those tokens in there, but I am unsure as to the rules for using ui tokens. These were initially intended to be used for 'interactive' elements and this use case is for non-interactive text that is to appear as disabled within the search experience.

Also, there is a suggested change to a token to use "value": "{color.base.gray.500.value}", as the disabled-default versus the "value": "{color.base.gray.400.value}", in order to meet the 3:1 contrast ratio that is documented in this issue.

If the decision is to retain only the --ds-color-text-ui-disabled-default/inverse tokens, I am ok with that, but I would strongly recommend changing the token alias reference.

@jason-capsule42
Copy link
Member

Totally agree with where your head is at on this @blackfalcon.

There is a conversation being headed up by @nklansford assessing our semantic naming convention. As more teams are being required to use the tokens to support dual brand theming the complexity of the naming solution in place and the confusion arising from that is showing itself. There is movement to simplify the semantic token names, make them much more obvious about which to use and where and hopefully prevent issues exactly like this in the future.

@jason-capsule42
Copy link
Member

I am going to move this to BLOCKED until the new naming convention is resolved and then I'll come back to this ticket.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jason-capsule42 jason-capsule42

Labels
design tokens not-reviewed Issue has not been reviewed by Auro team members Type: Feature New Feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add new token for disabled-text #195 AlaskaAirlines/AuroDesignTokens
3 participants
@blackfalcon @jason-capsule42 @Patrick-Daly-AA