carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.75k stars 1.8k forks source link

[Feature Request]: Line tabs unselected border color #15963

Closed kingtraceyj closed 6 months ago

kingtraceyj commented 6 months ago

The problem

Resources

Issue: https://github.com/carbon-design-system/carbon-website/issues/3669 Style PDF

Notes:

From @mbgower The visual cue of the tablist relies on the visible line under all tabitems. So I believe that the grey line under the unselected tab items should meet 3:1 contrast.

When that happens, the visual different between the darker grey line and the blue selected line will be negligible; however, the text is in bold, so color is not the only visual designator of selection state.

The solution

Design needs to further investigate how this could potentially affect products and hierarchy of information

First explorations found in Figma

Design considerations: • How will this affect hover and active states? • Does this make it harder to see which tab is selected? • Consider adding in 2px of spacing between tabs if going to change to higher contrast

Examples

No response

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

github-actions[bot] commented 6 months ago

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

kingtraceyj commented 6 months ago

Presented higher contrast border for line tabs at A11y guild meeting.

We will keep the $border-subtle as is. After looking through examples, the higher contrast border makes it harder to quickly see what tabs is selected and creates an unintended stronger hierarchy. We also believe that users would be able to identify a tab group without any border so the border might not be necessary.