Contrib.social

Improve the styling for vertical tabs

Open on Drupal.org →
Created on 13 February 2025, about 2 months ago

Problem/Motivation

  • In dark mode, if the content area of the vertical tab has too less content and is in consequence too less in height, the tab and the content area become visually disconnected, they are not one cohesive unit anymore.

  • The border of the vertical tab as well as the border wrapping the content area are barely visible in particular in light mode. The active tab and the tab label are clearly visible due to the 4 pixel wide focus border on the left and the use of accent cooler on the tab label, but the rest of the active tab (top and bottom border), the border wrapping the content area, as well as the borders between the not active tabs lack a clear visual structure due to the use of too light borders. In dark mode things are slightly better but still suboptimal (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or vertical_tabs.xlsx.zip → for more details).


    • Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

    Steps to reproduce

    • Edit a text format on admin/config/content/formats/manage/content_format?destination=/admin/config/content/formats and inspect the vertical tabs.

    Proposed resolution

    • Increase the color contrast of --vertical-tabs-border-color against the background layer to reach at least a contrast of 3:1, and increase the color contrast of --gin-border-color, to improve the necessary visual structure in light mode.
    • Although the color contrast is nominally low between the background of the active vertical tab against the background layer in dark mode it has to be noted that the visual structure is better than in the light mode, but it would be still a good thing to increase the contrast further if possible.
    • Make sure if possible that the content area for the active tab no matter how small in height it is is always expanded to the height of all available vertical tabs to the left like in light mode.

    Remaining tasks

    User interface changes

    API changes

    Data model changes

🐛 Bug report
Status

Active

Version

4.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024