Problem

  • Can’t see Select arrow in IE 11
  • Arrow doesn’t meet contrast requirements in Edge
  • Arrow doesn’t meet contrast requirements in Firefox

Steps to reproduce

Enable High Contrast mode in Windows

CommentFileSizeAuthor
#21 hc-select.gif20.85 KBmherchel
#20 firefox-after.png127.86 KBmherchel
#20 edge-afater.png69.1 KBmherchel
#20 ie11-after.png171.93 KBmherchel
#20 ie11-before-patch.png177.2 KBmherchel
#19 3171728-10.0.x-19.patch2.49 KBjasonfelix
#18 3171728-9.4.x-17.patch3.44 KBjasonfelix
#15 claro-firefox.png156.36 KBmherchel
#15 claro-select-msedge.png55.09 KBmherchel
#15 claro-select-before.png151.43 KBmherchel
#14 3171728-9.4.x-14.patch3.1 KBjasonfelix
#13 3171728-9.4.x-13.patch3.1 KBjasonfelix
#12 3171728-10.0.x-12.patch2.46 KBjasonfelix
#5 interdiff_2-5.txt1.24 KBkatherined
#5 3171728-5.patch3.04 KBkatherined
#4 recording (6).gif72.96 KBkatherined
#4 recording (5).gif66.84 KBkatherined
#2 firefox-high-contrast-white.jpg32.17 KBkatherined
#2 firefox-high-contrast-focus.jpg36.17 KBkatherined
#2 ie-high-contrast-white.jpg28.2 KBkatherined
#2 IE-high-contrast.jpg60.96 KBkatherined
#2 select-chrome-after.jpg13.99 KBkatherined
#2 select-chrome-focus-after.jpg15.67 KBkatherined
#2 select-chrome-focus-before.jpg12.83 KBkatherined
#2 select-chrome-before.jpg11.22 KBkatherined
#2 3171728-2.patch3.82 KBkatherined

Comments

DyanneNova created an issue. See original summary.

katherined’s picture

katherined
she/her
Primary language English
commented
StatusFileSize
new 3171728-2.patch3.82 KB
new select-chrome-before.jpg11.22 KB
new select-chrome-focus-before.jpg12.83 KB
new select-chrome-focus-after.jpg15.67 KB
new select-chrome-after.jpg13.99 KB
new IE-high-contrast.jpg60.96 KB
new ie-high-contrast-white.jpg28.2 KB
new firefox-high-contrast-focus.jpg36.17 KB
new firefox-high-contrast-white.jpg32.17 KB

This patch takes the same approach as #3171727-3: Claro breadcrumb divider needs Windows High Contrast mode improvements. I've changed the default icon state to currentColor, and eliminated the focus state since it does not provide sufficient contrast in Firefox using high-contrast mode. Since Firefox can't be targeted with a high-contrast media query, this seems like a worthwhile compromise. Screenshots of that are below. I've left the disabled state, as it is needed for the icon to be visible in Firefox with high-contrast enabled, and this seems like the best result for all browsers and modes. Firefox high-contrast with the light theme shows the select icon with low contrast in the disabled state, but the disabled state is low contrast using its default colors as well.

Chrome, before:

Chrome, after:

IE 11 high-contrast:

Firefox high-contrast (top one has focus):

katherined’s picture

katherined
she/her
Primary language English
commented
Status: Active » Needs review
katherined’s picture

katherined
she/her
Primary language English
commented
StatusFileSize
new recording (5).gif66.84 KB
new recording (6).gif72.96 KB

Adding gifs for clarity.

Before:

After:

katherined’s picture

katherined
she/her
Primary language English
commented
StatusFileSize
new 3171728-5.patch3.04 KB
new interdiff_2-5.txt1.24 KB

Restoring the focus state because it uses a blue that provides acceptable contrast.

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.

tanubansal’s picture

tanubansal commented

Patch #5 is restoring the focus state on 9.1

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +high contrast, +wcag131

tagging

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.

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.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work
Issue tags: +forced colors

Thanks for the patch @katherined!

currentColor doesn't work when the SVG is being used as a background image. Furthermore, there's a bug in Chromium/Edge where it doesn't work as expected when used as a fill in an embedded SVG.

The same issue was solved in Olivero and passed review from the accessibility maintainers. We should fix it here in the same way.

See #3223271-14: Olivero: Select dropdown icons need more contrast in Windows High Contrast mode

jasonfelix’s picture

jasonfelix commented
Status: Needs work » Needs review
StatusFileSize
new 3171728-10.0.x-12.patch2.46 KB

Attached is a patch for 10.0.x. Patch 9.4.x incoming.

jasonfelix’s picture

jasonfelix commented
StatusFileSize
new 3171728-9.4.x-13.patch3.1 KB

Attaching patch for 9.4.x.

jasonfelix’s picture

jasonfelix commented
StatusFileSize
new 3171728-9.4.x-14.patch3.1 KB

Trying the patch again

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
StatusFileSize
new claro-select-before.png151.43 KB
new claro-select-msedge.png55.09 KB
new claro-firefox.png156.36 KB

The patch in #12 looks perfect. I walked @jasonfelix through this process. This is the same code that went into Olivero and has approval from the accessibility team.

Leaving as Needs Review, because I still need to review the 9.4.x patch.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Reverting changes to summary

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

The 9.4.x patch doesn't work with IE11. This is because the high contrast media query precedes the rule that it overrides.

Will fix Monday

jasonfelix’s picture

jasonfelix commented
Status: Needs work » Needs review
StatusFileSize
new 3171728-9.4.x-17.patch3.44 KB

Fixing issues

jasonfelix’s picture

jasonfelix commented
StatusFileSize
new 3171728-10.0.x-19.patch2.49 KB

I realized the 10.0.x patch didn't remove the background image for focus and disabled states. This fixes that.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new ie11-before-patch.png177.2 KB
new ie11-after.png171.93 KB
new edge-afater.png69.1 KB
new firefox-after.png127.86 KB

#18 looks good. Leaving as needs review until I test the 10.0.x patch.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new hc-select.gif20.85 KB

#19 looks perfect as well.

  • ckrina committed 9a69d91 on 10.0.x 
    Issue #3171728 by jasonfelix, katherined, mherchel, DyanneNova,...

  • ckrina committed 83c74c6 on 9.4.x 
    Issue #3171728 by jasonfelix, katherined, mherchel, DyanneNova,...
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Reviewed & tested by the community » Fixed

Committed 9a69d91 and pushed to 10.0.x. Also committed and pushed to 9.4.x. Thanks!

Status: Fixed » Closed (fixed)

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