Inactive vertical tabs do not meet contrast requirements

@kmonahan thanks for the patch
patch working fine and applying cleanly for me

Reviewed and tested the patch today, works great! Thank you!

Adding "wcag143" per comment #56 by @mgifford in the related issue.

I've manually tested it and I've found a very small issue that should be addressed for UX sake. When clicking into another tab the color&underline don't change right away. You have to click outside the active tab to get the right styles. Here's a GIF with the behavior I'm finding both on FF and Chrome:

The JS correctly changes when the tab is switched (the class is-selected is correctly applied right away), but the styles do not apply. It means the state of an element & the specificity used are interfering here: if you take a look to line 79&79 it is defining text-decoration: none; for .vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title. So I would recommend to define both the color and the text-decoration properties with this same specificity.

Moving it back to Needs Work for now.

Adding some more info in the summary for context.

As i understood title of the selected tab should be immediately underlined -> this was done now
But not clear about color @ckrina, can you please re-test and tell what's remaining? If still there are feedbacks, can you please explain for which state of tab styles should be changed? Thanks

Right now as i see user can easily recognize visually when he is on hover/focus state no matter if tab active or not

@kostyashupenko I meant the underline and the color, but reviewing your patch I realized it only needed the text-decoration property changed because color is behaving correctly: it keeps the lighter color because it's focused, not because styles do not apply. So just the underline change should be enough.

I'm not sure proposed solution is correct. I don't think we need to underline the title because there's already non-color indicators that the vertical tab is open because the selected vertical tab doesn't have right border. I think it would be enough to just fix the color contrast issue here.

Good point. I assumed the solution was OK based on the feedback given by @mgifford to the proposal in comment #42 in the related issue for horizontal tabs, but the component behaves different so it might be good to get a clear direction on the best approach form an Accessibility maintainer.

I brought this issue into the Accessibility channel in slack and this was the feedback:

The tabs act as buttons not as links. IMO it’s not normal to underline active buttons. But I’ll defer to whatever the maintainers suggest

@mherchel

I agree that underlining text in buttons is not normal or expected. But making sure that the content still can be read and meets contrast requirements is.That and making sure that there is sufficient distinction between on/off focus states.

@mgifford

I would read this as a no need for the underline, as @lauriii suggests. Updating the issue summary accordingly.

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.

For the background, I used a color the theme already uses, which gives a contrast of 4.53:1. I did not underline the text, as suggest in comment #14.

Thank you!