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.

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

Accessibility: add color token for link component #7647

Closed
marion-bruells opened this issue Jan 25, 2021 · 3 comments · Fixed by #7770
Closed

Accessibility: add color token for link component #7647

marion-bruells opened this issue Jan 25, 2021 · 3 comments · Fixed by #7770

Comments

@marion-bruells
Copy link

marion-bruells commented Jan 25, 2021

Summary

To indicate clickable items in a table row we use the Carbon link component. The current Carbon link component doesn’t support accessibility, when it is used in data tables on rows (hover and selected state).
Example:
box-image

⚠️ Accessibility:
To ensure blue links on selected rows are also accessible, we need to add a new color token to the library.
The current link color for selected rows and rows with hover doesn’t have enough visual contrast between text and background of the table row. Therefore we would like to propose to add the two color tokens:

Request for a new color token for the link component:
Light theme:  #0043CE (Blue70)
Dark theme: #A6C8FF (Blue 30)

Dark theme #A6C8FF (Blue 30)
box-image-3
Accessiblity Pass
Normal text: WCAG AA
Large text: WCAG AAA
Graphical elements: WCAG AA

Light theme #0043CE (Blue70)
image
Pass
Normal text: WCAG AA
Large text: WCAG AAA
Graphical elements: WCAG AA

Detailed documentation about clickable table rows can be found here

Designs were shared with @aagonzales and token should be added by development.

Justification

Links are currently not accessible within data tables. Customers need to have a fully accessible UI with enough visual contrast for links. Currently many teams have clickable links in tables - regardless if persistent or on hover. But the current color token is not accessible on selected rows or hovering rows.

Specific timeline issues / requests

Offering: Watson Knowledge Catalog
Note: This issue is reflected in many services in Cloud Pak for Data and something we want to leverage also in other Cloud & Cognitive products.
It would be great to get this done for one of our upcoming patches/release in CPD.
February update GA: 02/16/21
March update GA: 03/16/21

@aagonzales
Copy link
Member

Approved new token

Name: $link-02
Usage: secondary link color for lower contrast backgrounds.

White theme: #0043CE Blue70
Gray 10 theme: #0043CE Blue70
Gray 90 theme: #A6C8FF (Blue 30)
Gray 100 theme: #A6C8FF (Blue 30)

@tay1orjones
Copy link
Member

I think this also fixes #7051?

@tw15egan
Copy link
Member

tw15egan commented Feb 5, 2021

And it will also close #6845 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants