Improve the visual representation of none active vertical tabs in forced color mode

Problem/Motivation

Followup for #3604037: Indicate that grouping elements have child element errors for UX and a11y

In forced color it is cognitively challenging to distinguish the active vertical from none active vertical tabs, because the sole distinguishing element indicating the active state is the missing border on the right for LTR and the missing border on the left for RTL. Users have either to follow a vertical tab starting from the left in LTR and follow the tab to the right end and then see if there is a border or not and then move downward with their visual focus until a vertical tab with a none existing right border appears in LTR. Or they have to go with their visual focus row by row left to right in LTR until they identify the missing border identifying the active vertical tab. Depending on the abilities of the person interacting with vertical tabs in forced color mode that can turn into a daunting and challenging task each and every time they visit this page.

In regular mode the other three borders of none active vertical tabs are in a lighter color making it easier to distinguish active from none active vertical tabs.

it has to be noted that the top border of the vertical tab on top and the bottom border of the vertical tab on the bottom are missing a border in regular mode while in forced color mode only the border for the vertical tab at the bottom is missing in case the active vertical is neither the vertical tab on top nor the vertical tab at the bottom.

Steps to reproduce

• go to admin/config/people/accounts in chrome or edge
• activate the forced color mode by opening the rendering tool tab in the devtools
• set the prefers-color-scheme to dark
• set forced-colors to active
• set prefers-contrast to more

Proposed resolution

To improve the visual representation of vertical tabs @kentr and myself came up with the following approach to also provide some additional visual cue to people relying on forced color mode:

1. Set any border on top, bottom, left (LTR)/right (RTL) for any non active vertical tab that is not right next to the active vertical tab to dotted instead of solid.
2. Make sure that the top border of the vertical tab on top and the bottom border of the vertical tab at the bottom show a solid light border in regular mode and a dotted border in forced color mode.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet