Problem/Motivation

When the Image tab gains focus, there is insufficient change in contrast to indicate that focus has been achieved. This is a violation of WCAG 2.1 1.4.1 A Use of color

Steps to reproduce

1. Install Drupal 9.3.12
2. Login as admin
3. Go to /admin/config/content/formats/manage/full_html?destination=/admin/config/content/formats
4. Select CKEditor as the text editor
5. Use the tab key to move the focus to the Image tab.

Expected results:
On focus, the word Image either gains an underline (preferred) or else the difference between focus and unfocused is at least 3:1 in contrast.

Actual result:
On focus, the word Image changes from #004F80 to #2073BF, a contrast change of 1.75:1.

3277559 focused.png shows the tab label Image having focus
3277559 unfocused.png shows the tab label Image not having focus

While it is true that the user can't accomplish anything by activating the focused location, it still needs to be clear for orientation where the focus is.

Proposed resolution

Increase the contrast between focused and unfocused to 3:1. However, there also needs to be 3:1 contrast between unfocused and surrounding text that is not a (potential) link.

If it is not possible to achieve both contrasts - which is often a result in multi-color situations - then the correct solution might be to underline on focus, even though clicking the link would not achieve anything in this particular case.

CommentFileSizeAuthor
#34 a8d26479b506bb3bff35c91940943281.png24.64 KBavpaderno
#29 a70663e5e13317e238a735659ec88f43.png22.47 KBavpaderno
#29 6a5dc76af6f0fae28fd9db778196b9e5.png21.53 KBavpaderno
#29 3e6489941e4e9b2d08543927a1d1cd41.png21.91 KBavpaderno
#23 Focusedappliedpatch.png1.23 MBroberttabigue
#23 Unfocusedappliedpatch.png1.28 MBroberttabigue
aft_pat_contrast.png43.98 KBsonam.chaturvedi
aftr_pat_unfocused.png38.74 KBsonam.chaturvedi
bef_pat13_focused.png21.01 KBsonam.chaturvedi
bef_pat13_unfocused.png20.94 KBsonam.chaturvedi
aftr_pat13_focused.png210.7 KBsonam.chaturvedi
#17 interdiff_11-13.txt821 byteslucassc
#13 3277559-13.patch574 byteslucassc
#11 3277559after_patch.png3.47 KBashishsingh27
#11 3277559-11.patch547 bytesashishsingh27
#5 3277559-5.patch724 bytesmanojkumar_97
#5 After-patch-unfocused.png34.58 KBmanojkumar_97
#5 After-patch-focused.png35.33 KBmanojkumar_97
#5 Contrast ratio.png39.26 KBmanojkumar_97
#5 Before-patch-unfocused.png35.13 KBmanojkumar_97
#5 Before-patch-focused.png41.91 KBmanojkumar_97
#2 3277559 focused.png9.22 KBcharles belov
#2 3277559 unfocused.png10.53 KBcharles belov

Issue fork seven-3277559

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Charles Belov created an issue. See original summary.

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented
Issue summary: View changes
StatusFileSize
new 3277559 unfocused.png10.53 KB
new 3277559 focused.png9.22 KB

Unfocused:
Showing color of the word "Image" when it doesn't have focus
Focused:
Showing color of the word "Image" when it has focus

rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
commented
Issue tags: +Novice, +Portland2022

Tagging as Novice, great issue to work on

manojkumar_97’s picture

manojkumar_97 commented
Assigned: Unassigned » manojkumar_97
manojkumar_97’s picture

manojkumar_97 commented
Assigned: manojkumar_97 » Unassigned
Status: Active » Needs review
StatusFileSize
new Before-patch-focused.png41.91 KB
new Before-patch-unfocused.png35.13 KB
new Contrast ratio.png39.26 KB
new After-patch-focused.png35.33 KB
new After-patch-unfocused.png34.58 KB
new 3277559-5.patch724 bytes

Before Patch:

Contrast ratio:

After Patch:

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented
Issue summary: View changes
charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

I've updated my comment #1 to include my images as well as label which is which re unfocused vs. focused.

I've also updated the original issue. This may be more complicated than simply fixing the contrast between focused and unfocused. I'm realizing as I view the proposed solution that there may not be sufficient contrast between "CKEditor Plugin Settings" and unfocused "Image" to make it obvious to people with color perception issues or low vision that "Image" is something that can gain focus.

Since there are three colors that need to have a 3:1 ratio from one to another, that is, "CKEditor Plugin Settings", unfocused "Image", and focused "Image", it may not actually be possible to achieve that. That means there may need to be a different solution, such as underlining "Image" on focus. But in this case, clicking/pressing enter for Image won't achieve anything, since it's not a link when that tab is the active tab. (This would be clearer on pages where there are more than one active tab.)

So, before we jump into a solution in code, I'd like to see some discussion as to what the best practices solution would be.

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented
Status: Needs review » Needs work
mgifford’s picture

mgifford
he/him
Primary language English
commented

There would be other ways to provide visual cues that a tab has focus. Whether it is adding a vertical line between the sidebar & body, or including a corner on the top right of the Image cell.

I've seen SC 1.4.1 used more when red, green or yellow are used to highlight process states. Having different brightnesses of any one of those colours is usually ok.

Maybe SC 1.4.11: Non-text Contrast is better? I'm not sure.

Anyways, which SC it falls under isn't critical. Having an additional visual indicator would help everyone know which tab has focus. I'm in favour of enhancing this.

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

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should 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.

ashishsingh27’s picture

ashishsingh27 commented
Version: 9.4.x-dev » 9.5.x-dev
Status: Needs work » Needs review
StatusFileSize
new 3277559-11.patch547 bytes
new 3277559after_patch.png3.47 KB

Hi,

I am adding a patch with the vertical border on right side to highlight the focused state and have added #eee color on hover state.

Also, Attaching the after patch image for reference.

I think this works for the required change to provide visual cues that tab has focus.

lucassc’s picture

lucassc
he/him
Primary language Portuguese, Brazil
Location Rio de Janeiro
commented
Assigned: Unassigned » lucassc
Issue tags: +Needs reroll

Hi!

I tried apply patch in #11 against 9.5.x-dev and received the following message:

error: patch failed: core/themes/seven/css/components/vertical-tabs.css:115
error: core/themes/seven/css/components/vertical-tabs.css: patch does not apply

I'll work on this.

lucassc’s picture

lucassc
he/him
Primary language Portuguese, Brazil
Location Rio de Janeiro
commented
Issue tags: -Needs reroll
StatusFileSize
new 3277559-13.patch574 bytes

Rerolled #11

Status: Needs review » Needs work

The last submitted patch, 13: 3277559-13.patch, failed testing. View results

lucassc’s picture

lucassc
he/him
Primary language Portuguese, Brazil
Location Rio de Janeiro
commented
Assigned: lucassc » Unassigned
diegors’s picture

diegors
He/Him
Primary language Portuguese, Brazil
Location Campinas - Brazil
commented
Assigned: Unassigned » diegors
lucassc’s picture

lucassc
he/him
Primary language Portuguese, Brazil
Location Rio de Janeiro
commented
StatusFileSize
new interdiff_11-13.txt821 bytes

Hi!

Sorry, I forgot to explain what I did in the reroll. As it was a simple patch, I just copied the content to a new patch from 9.5.x-dev.

Attaching interdiff.

diegors’s picture

diegors
He/Him
Primary language Portuguese, Brazil
Location Campinas - Brazil
commented
Assigned: diegors » Unassigned
Status: Needs work » Needs review

The patch works correctly in drupal 9,5.x

the test works on the local machine:

PHPUnit 8.5.28 #StandWithUkraine

Testing Drupal\Tests\ckeditor\FunctionalJavascript\MediaTest
..............                                                    14 / 14 (100%)

Time: 5.8 minutes, Memory: 8.00 MB

OK (14 tests, 378 assertions)
sonam.chaturvedi’s picture

sonam.chaturvedi commented

Verified and Tested patch#13 on 9.5.x-dev.
Patch applied successfully.

Before Patch:
Focused:
before focused

Unfocused:
before unfocused

After Patch:
Unfocused:
after unfocused

Focused:
after focused

Contrast:
after contrast

rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
commented

@sonam.chaturvedi can you try uploading those screenshots again?

sonam.chaturvedi’s picture

sonam.chaturvedi commented

Thanks @rootwork for highlighting that. I have uploaded the screenshot again as part of my previous comment.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Project: Drupal core » Seven
Version: 9.5.x-dev » 1.0.0-alpha1
Component: Seven theme » Code

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.

roberttabigue’s picture

roberttabigue commented
Status: Needs review » Needs work
StatusFileSize
new Unfocusedappliedpatch.png1.28 MB
new Focusedappliedpatch.png1.23 MB

Hi @longwave,

It seems the patch #13 when applying it to the Seven contrib theme 1.0.0-alpha1 as a Default theme and with Drupal core version of 9.5.6 is not reflecting/working on my end.

Moving this to "Needs work" and please see the attached screenshot for reference.
Thanks.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: Seven tab between unfocused and focused provides color-only change » The difference between unfocused and focused tabs is a color-only change
Version: 1.0.0-alpha1 » 1.0.x-dev
Issue summary: View changes
Issue tags: -Novice +Needs merge request

immaculatexavier made their first commit to this issue’s fork.

immaculatexavier opened merge request !108

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs work » Needs review
Issue tags: -Needs merge request
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: The difference between unfocused and focused tabs is a color-only change » The difference between unfocused and focused vertical tabs is a color-only change
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs review » Needs work
StatusFileSize
new 3e6489941e4e9b2d08543927a1d1cd41.png21.91 KB
new 6a5dc76af6f0fae28fd9db778196b9e5.png21.53 KB
new a70663e5e13317e238a735659ec88f43.png22.47 KB

The blue bar should be on the left side, not the right side, similarly to what happen with the node edit form.

screenshot

Only local images are allowed.

These are the vertical tabs without any change.

Only local images are allowed.

The background of the selected vertical tab should be the same background used for the vertical tab content, as in the last screenshot.

(I changed the screenshots for better ones.)

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

In that second image, is there a reason one of the inactive tabs has a white background? (Image resize)

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented

In that second image, is there a reason one of the inactive tabs has a white background? (Image resize)

The mouse was hovering that item.

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

I have tested the patch in Firefox and I believe the focus and active tab indicators give good contrast.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Assigned: Unassigned » avpaderno
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs work » Needs review
StatusFileSize
new a8d26479b506bb3bff35c91940943281.png24.64 KB

screenshot

  • avpaderno committed 03aa0c78 on 2.0.x 
    Issue #3277559: The difference between unfocused and focused tabs is a...
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs review » Fixed
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Assigned: avpaderno » Unassigned

Status: Fixed » Closed (fixed)

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