Contrib.social

Improve the styling for vertical tabs

Open on Drupal.org →
Created on 13 February 2025, 5 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

  • Issue created by @rkoller
  • Comment 5 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario
  • Comment 5 months ago →
    utkarsh_kumar_singh

    I am looking into it.

  • Pipeline finished with Success
    4 months ago
    Total: 453s
    #449369
  • Merge request !598Issue #3506330: Improve the styling for vertical tabs. → (Open) created by Unnamed author
  • Pipeline finished with Success
    4 months ago
    Total: 373s
    #449379
  • Pipeline finished with Success
    4 months ago
    Total: 352s
    #449381
  • Comment 4 months ago →
    utkarsh_kumar_singh

    Fix the issue "Improve the styling for vertical tabs". Please review.

  • Comment 4 months ago →
    utkarsh_kumar_singh
  • Status changed to Needs work 3 months ago
  • Comment 3 months ago →
    🇳🇱Netherlands batigolix Utrecht

    I tried this locally but I did not see a difference.

    @utkarsh_kumar_singh can you add screenshots that show the changes that you made?

  • Comment 3 months ago →
    utkarsh_kumar_singh

    Hi @batigolix,
    Apologies for the delayed response.

    As requested, I'm sharing the before and after images to illustrate the issue and the changes made. Please review them and let me know if any further adjustments are needed.

    Looking forward to your feedback.

  • Comment 3 months ago →
    🇮🇳India snehal-chibde

    hello @utkarsh_kumar_singh, even i have tried this locally, I do not see any changes.
    Added screenshots for reference.

  • Pipeline finished with Success
    3 months ago
    Total: 261s
    #495709
  • Comment 3 months ago →
    utkarsh_kumar_singh

    Hello @snehal-chibde,
    Thank you for review. I’ve updated the MR. I’ve fixed the height of the content to match the height of all vertical tabs in dark mode for better consistency.
    As mentioned in first bullet point in "Proposed resolution" I increased the contrast of --gin-border-color. However, I couldn’t directly adjust the contrast of --vertical-tabs-border-color as this variable is not defined in the Gin theme for light mode. I am adding the screenshots for both light and dark mode.

    Please have a look and let me know your thoughts.

  • Comment 2 months ago →
    🇮🇳India Kanchan Bhogade

    Hi
    have manually tested MR 598 on Drupal 10.3 version with Gin theme
    The MR is applied Successfully...

    Vertical tab height is fixed for the dark mode.
    The border color for light mode also darker.

    Attaching screenshot for reference

    RTBC+1

    Keeping in need review for code verification

  • Status changed to Needs review 24 days ago
  • Comment 24 days ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    @batigolix @snehal-chibde Do the existing screenshots clarify things in the latest version? It seems like with code verification we may be able to get this to RTBC.

  • Comment 18 days ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    There are a few code changes in the MR, but the most important one for this is this code --gin-border-color: #d4d4d8;
    changing to --gin-border-color: #838585;

    Just to compare the greys https://coolors.co/contrast-checker/838585-d4d4d8

    The big thing here is that are these going to work in dark mode, and with forced-colors.

  • Comment 16 days ago →
    🇮🇳India divyansh.gupta Jaipur

    Tested the MR locally. Borders now show properly in light mode, content area height matches tabs in dark mode. MR scoped to vertical tabs only. Ready to be RTBC.

  • Comment 16 days ago →
    🇩🇪Germany jurgenhaas Gottmadingen

    The MR contains lots of unrelated changes that need to be reverted first.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024