Problem/Motivation

It appears the CSS has been copied over from the Drupal 7 module. In D8, the Seven admin theme has slightly different input & page background colors, which makes the contrast look off.

Currently: https://i.imgur.com/UK9OP74.png
Expected: https://i.imgur.com/jnEsDwA.png

Proposed resolution

Remaining tasks

Decide if this needs to be done. See #11 and #12

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#36 after-patch.png71.73 KBMadhu Kumar M E
#32 After Patch 2756483 up.png373.44 KBchetanbharambe
#32 Before Patch 2756483 Up.png367.11 KBchetanbharambe
#26 After-patch.png49.18 KBBhumikaVarshney
#26 before-patch.png43.09 KBBhumikaVarshney
#25 after_apply_patch.png285.56 KBvikashsoni
#25 before_apply_patch.png283.49 KBvikashsoni
#23 after.png285.56 KBjanmejaig
#23 before.png283.49 KBjanmejaig
#2 2756483-vertical_tab_bg_color.patch692 bytesAlgeron
#4 aftertest12.jpg201.63 KBakhil.desai
#4 before.jpg203.22 KBakhil.desai
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Algeron created an issue. See original summary.

Algeron’s picture

Algeron CreditAttribution: Algeron at XIO commented
Project: Field Group » Drupal core
Version: 8.x-1.x-dev » 8.2.x-dev
Component: User interface » Seven theme
FileSize
2756483-vertical_tab_bg_color.patch692 bytes

Proposed patch in attachment

Algeron’s picture

Algeron CreditAttribution: Algeron at XIO commented
Status: Active » Needs review
akhil.desai’s picture

akhil.desai CreditAttribution: akhil.desai commented
FileSize
aftertest12.jpg201.63 KB
before.jpg203.22 KB

I have tested the above patch #2 and its working fine for me

the screenshot before applying the patchbefore

the screenshot after applying the patchtest

akhil.desai’s picture

akhil.desai CreditAttribution: akhil.desai commented

checked patch #2 and it is working fine for me
before applying the patchbefore
after applying the patchtest

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Seven, +theme, +styleguide
xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Assigned: Unassigned » star-szr

Assigning frontend issues to Cottser for potential review. Thanks!

akhil.desai’s picture

akhil.desai CreditAttribution: akhil.desai at Srijan | A Material+ Company commented
xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Issue tags: +beta deadline

Unless the current contrast is insufficient for accessibility (etc.) this is a task. As a design chance this would have a beta deadline.

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr as a volunteer and at Northern Commerce commented
Assigned: star-szr » Unassigned
Status: Reviewed & tested by the community » Needs review

At least if we go based on the Seven Style Guide the existing colour seems correct.

https://groups.drupal.org/node/283223#Color

eggshell: #fcfcfa
"used for: text fields, UI panel surfaces (fieldsets, etc.)"

I think this would fall under that UI panel surface definition.

See also https://groups.drupal.org/node/283223#Vertical_Tabs

Not to say the Seven Style Guide is set in stone but it seems like this has definitely been thought of. Might need more motivation here as to why this should be changed.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett at Acquia commented
Issue summary: View changes
Issue tags: +Needs issue summary update, +Accessibility

What is the contrast ratio before and after?
See https://www.drupal.org/node/464500 for our requirement.

That link also provides tools for checking the contrast.

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr as a volunteer and at Northern Commerce commented

Yup +1 to checking for contrast, thanks @tim.plunkett.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Issue tags: -beta deadline

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

janmejaig’s picture

janmejaig CreditAttribution: janmejaig at Srijan | A Material+ Company for Drupal India Association commented
FileSize
before.png283.49 KB
after.png285.56 KB

I am able to applied the patch for the Drupal 9.1.x , this seems to be working fine for me , this can be move to RTBC .

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

vikashsoni’s picture

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented
FileSize
before_apply_patch.png283.49 KB
after_apply_patch.png285.56 KB

I have apply the patch #2 and its working fine for me

sharing the screenshot ...

BhumikaVarshney’s picture

BhumikaVarshney CreditAttribution: BhumikaVarshney as a volunteer and at OpenSense Labs commented
FileSize
before-patch.png43.09 KB
After-patch.png49.18 KB

I am able to applied the patch for the Drupal 9.2.x , this seems to be working fine for me.
RTBC+1

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at OpenConcept Consulting Inc. commented
Issue tags: +wcag143

That will help the color contrast for sure. Just needs the issue summary update.

Poojita0802’s picture

Poojita0802 CreditAttribution: Poojita0802 at QED42 commented
Assigned: Unassigned » Poojita0802
Poojita0802’s picture

Poojita0802 CreditAttribution: Poojita0802 at QED42 commented
Assigned: Poojita0802 » Unassigned

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

chetanbharambe’s picture

chetanbharambe CreditAttribution: chetanbharambe at QED42 for Drupal India Association commented
Status: Needs review » Reviewed & tested by the community

Verified and tested patch #2.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance -> Apply Seven theme
# Goto: Any Block and Configure that block
# Click on any vertical tabs and observe the background-color

Expected Results:
# After applying Patch #2, [Vertical tabs] Background color is matching with Seven admin theme.

Actual Results:
# Currently, [Vertical tabs] Background color is not optimal for the Seven admin theme.

Please refer attached screenshots for the same
Looks good to me.
Can be a move to RTBC

chetanbharambe’s picture

chetanbharambe CreditAttribution: chetanbharambe at QED42 for Drupal India Association commented
FileSize
Before Patch 2756483 Up.png367.11 KB
After Patch 2756483 up.png373.44 KB

Forgot to attach screenshots in Comment #31

quietone’s picture

quietone CreditAttribution: quietone as a volunteer commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review

I have read the issue and there is still work to do here.

In #11 Cottser questioned if this change was needed at all. In #12 a review of the contrast was asked for as well. Neither of these comment have been addressed by the following work, which are mostly screenshots.

This was tagged for an Issue Summary update, which still needs to be done.

Setting to NR to get a decision on whether this change should be implemented or not. Adding this to the IS as the only remaining task.

@janmejaig, @vikashsoni, @BhumikaVarshney, @chetanbharambe thanks for the interest in helping with this issue. It is good practice to read all the comments before working on an issue.In this case testing and screenshots are not needed. Previous comments are questioning if this work needs to be done at all. That needs to be resolved first. And there is no need to add another set of screenshots based on the same patch. Therefor, credit has been removed per How is credit granted for Drupal core issues.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Madhu Kumar M E’s picture

Madhu Kumar M E CreditAttribution: Madhu Kumar M E commented
FileSize
after-patch.png71.73 KB

I applied patch #2 it working fine, it looks good if we apply some dark colour or we can increase the opacity, as of now there is no such big difference after applying patch.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
CreditAttribution: bnjmnm at Acquia commented

Pre-emptive credit removal for @vikashsoni as the screenshots in #25 are renamed copies of the same shots uploaded in #23 (which as mentioned in #33 aren't needed at this stage anyway.

Harish1688’s picture

Harish1688 CreditAttribution: Harish1688 at Srijan | A Material+ Company commented

Tested the patch (2756483-vertical_tab_bg_color.patch) working fine, looks good for RTBC.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
CreditAttribution: bnjmnm at Acquia commented
Status: Needs review » Closed (works as designed)

It's already been confirmed in #12 this is a correct implementation of the Seven style guide.

To confirm the style guide was not implementing something with insufficient contrast, I did a contrast check on vertical tabs.
Within active tabs, the lowest content/background contrast ration is 6.81:1 which is well above the 4.5:1 to meet AA requirements.

Within inactive tabs this gets a littler lower at 5.12:1, but still comfortably above the AA contrast requirement.

Given that this is the correct implementation of Seven designs, and it does not result in an accessibility bug, I'm going to mark this issue closed.