Problem/Motivation

In issue #2408511: Rewrite vertical-tabs component inline with our CSS standards the Seven vertical tabs were updated with this code:

+++ b/core/themes/seven/css/components/vertical-tabs.css
@@ -50,60 +49,59 @@
-.vertical-tab-button.selected a,
-.vertical-tab-button a:hover,
-.vertical-tab-button a:focus {
+.vertical-tabs__menu-item.is-selected a,
+.vertical-tabs__menu-item a:hover,
+.vertical-tabs__menu-item a:focus {
   background: #fcfcfa;
   text-shadow: none;
-  text-decoration: none;
 }

This change is unintended and introduced a regression where vertical tabs text is underlined in the hover/focus/selected state. Seven styleguide for reference:

Proposed resolution

Undo the change to text-decoration.

Remaining tasks

  1. Write a patch
  2. Review

User interface changes

Seven vertical tabs text is no longer underlined in the hover/focus/selected state.

API changes

None

CommentFileSizeAuthor
#2 2459607-1.patch698 bytesidebr
#2 2459607-1-after.gif60.05 KBidebr
#2 2459607-1-before.gif58.52 KBidebr
#1 15b.vertical-tabs.png20.81 KBidebr

Comments

idebr’s picture

idebr commented
Issue summary: View changes
StatusFileSize
new 15b.vertical-tabs.png20.81 KB
idebr’s picture

idebr commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new 2459607-1-before.gif58.52 KB
new 2459607-1-after.gif60.05 KB
new 2459607-1.patch698 bytes 
+++ b/core/themes/seven/css/components/vertical-tabs.css
@@ -99,9 +100,6 @@
-.vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
-  text-decoration: underline;
-}

This line was added in #1989488: Vertical tabs style update but it did not show text-decoration as reflected in the screenshots in the issue, so I removed it to bring the vertical tabs in line with the Seven Style guide.

Screencap before:

Screencap after:

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
commented
Status: Needs review » Reviewed & tested by the community

Looks good for me.

lewisnyman’s picture

lewisnyman
he/him
commented

Looks good, in some situations the implementation differs from the original photoshop for accessibility reasons. For this compoenent the text underline is not required, because the background colour change is enough of an indicator.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Reviewed & tested by the community » Fixed

CSS is not frozen in beta. Committed 0a9f467 and pushed to 8.0.x. Thanks!

  • alexpott committed 0a9f467 on 8.0.x 
    Issue #2459607 by idebr: Seven vertical tabs have underlined links in...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.