Change the border color of tabs to --pst-color-border

[timhoffm]

1555 added a border around tabs. It uses --pst-color-primary:

IMHO primary color gives too much weight on the border. In this PR, suggest to change the color to --pst-color-border:

[trallard]

Hey @timhoffm thanks for taking the time to work on this. Though the primary colour border is intentional to signal that such a tab is in an active state. This brings this state in alignment with the rest of the theme where active states are marked with the primary colour and also helps us meet accessibility standards.

I will let @smeragoel chime in as she led the design, but considering that we are prioritising accessible design and that she did quite a fair amount of research and work to make interactive elements design more accessible I would prefer not making this change.

[timhoffm]

Thanks @trallard for the feedback. To me (as a non-expert on accessibility) the focus should be on the tab head not the not whole tab box. The box is essentially like any static box. The active part is the head. Maybe something like this can work:

Changes:

• All borders to --pst-color-border
• The top border of the active tab head is --pst-color-primary and has doubled width. This is in analogy to "current item" highlighting in top menu and side-bar, where some sort of bar next to the text is used for active elements and
• Non-active tabs are reduced to normal fontweight.
• Added underline for hovering over tabs - IMHO this should be added for consistency irrespective of the other changes.

This is just a suggestion. I'll leave it to you accessibility experts to decide what's best.

[smeragoel]

Thank you for your work, @timhoffm!

I considered --pst-color-border when working on this. However, the problem with this is that it does not provide sufficient contrast against the background and the inactive tabs.

Contrast Comparison: Color	Background #FFFFFF	Inactive Tabs #F3F4F5
--pst-color-border #D1D5DA	1.47:1	1.33:1
Primary Color #0A7D91	4.82:1	4.37:1

The goal behind this redesign was to make the active state clearer and the component more accessible. High contrast is necessary for making the tablist recognizable for all users, which naturally pulls more focus. You can find more details on this here.

Thank you for understanding and supporting our efforts to improve accessibility 😸

[timhoffm]

Thanks, understood.

Semi-OT questions:

• Is the font weight on the tabs intentionally left bold? That setting comes from sphinx-design. I suppose they use it to set their otherwise completely flat tabs apart from regular text (c.f. https://sphinx-design.readthedocs.io/en/latest/tabs.html#tabs). With the grey background here, bold font seems unnecessary.
• Should there be an underline when hovering over tabs? On other navigation elements, we change color and underline. On tabs we only change color.
• Should --pst-color-border be darkened? It's used with cards and also doesn't fulfill the 3:1 contrast limit. Or do cards not count because they are not interactive elements?

[trallard]

Is the font weight on the tabs intentionally left bold? That setting comes from sphinx-design. I suppose they use it to set their otherwise completely flat tabs apart from regular text (c.f. sphinx-design.readthedocs.io/en/latest/tabs.html#tabs). With the grey background here, bold font seems unnecessary.

Yes, this is intentional. To provide a bit more context, there are at least 4 WCAG success criteria that touch on colour and how/when each applies to a given component is highly dependent on context/purpose/use.
One of such criteria is "Use of colour" which involves not using colour as the only way to indicate meaning or convey information. This ensures that components remain accessible for folks using accessibility settings (for example high contrast, screenshot added), assistive tech, and for folks with a variety of visual impairments/disabilities.

Hence using a sufficiently different font weight (from the surrounding body and code text) helps with meeting such criteria.

Should there be an underline when hovering over tabs? On other navigation elements, we change color and underline. On tabs we only change color.

Yes or some other sort of indicator, we noted this already as it seems to have gone missing during implementation. So we should be fixing this soon.

Should --pst-color-border be darkened? It's used with cards and also doesn't fulfill the 3:1 contrast limit. Or do cards not count because they are not interactive elements?

This is a case where the contrast requirement is not critical for accessibility. Since these are not user interface (control) components, the border is not per se a means to convey information (such as state: hover, active, etc.). So, having a relatively low contrast does not hinder accessibility in any way; basically, the border can be considered purely decorative/visual styling. There is, however, a special case of clickable cards, though the Sufficient contrast criteria are met at the interaction point (hover, focus) by changing the border (colour, thickness) and pointer indicator.

[timhoffm]

Thanks for the detailed explanation. 👍

[trallard]

Thanks for taking the time and effort to help us make the theme better @timhoffm 💜