You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
⚠️ 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)
Accessiblity Pass
Normal text: WCAG AA
Large text: WCAG AAA
Graphical elements: WCAG AA
Light theme #0043CE (Blue70)
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
The text was updated successfully, but these errors were encountered:
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:
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)
Accessiblity Pass
Normal text: WCAG AA
Large text: WCAG AAA
Graphical elements: WCAG AA
Light theme #0043CE (Blue70)
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
The text was updated successfully, but these errors were encountered: