This is split off of #3153260: Standardize Olivero's focus states across all non-form controls. We need to ensure that all focus states (including form focus states) are accessible within high contrast mode.

tasks

We'll need videos of navigating the site via keyboard with Windows High Contrast mode with several browsers.

  • IE11
  • Edge
  • Firefox

The videos will need to show the focus states of the various elements and components. Any found issues should be split out into their own followup issues.

This is a stable blocker.

CommentFileSizeAuthor
#14 IE11_-_Win7__before_upgrading_ie___Running_-4.png44.36 KBmherchel
#13 3191682-Olivero-IE11-HC.mp411.92 MBjavi-er
#7 Screenshot 2021-04-01 at 17.40.33.png179.43 KBgauravvvv
#6 edigeolivero-hc-focus-states-3-31.mp45.78 MBmherchel
#6 ff-olivero-hc-focus-states-3-31.mp47.51 MBmherchel
#6 ie11-olivero-hc-focus-states-3-31.mp48.86 MBmherchel

Comments

mherchel created an issue. See original summary.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Issue tags: +stable blocker
andrewmacpherson’s picture

andrewmacpherson commented

Are any currently NOT visible? If so, please change the category to bug.

mherchel’s picture

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

Adding #3206290: Olivero: Windows high contrast mode does not show search icon

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Are any currently NOT visible? If so, please change the category to bug.

The search icon issue that I added above is related but is not about focus states. I did some cursory testing yesterday in HC mode, and everything was looking good. I want to dive deeper into it though.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
StatusFileSize
new ie11-olivero-hc-focus-states-3-31.mp48.86 MB
new ff-olivero-hc-focus-states-3-31.mp47.51 MB
new edigeolivero-hc-focus-states-3-31.mp45.78 MB

This is looking good, except for one exception: The element focus style is not visible in Edge. It has a default focus style in IE and FF, which is not very apparent.

We have an issue to redesign the details at #3194468: Refine designs for Olivero details and fieldsets. I'm adding a note in there that we need to ensure that all focus states are visible across all browsers in HC mode.

Setting to Needs Review. It'd be nice if someone could watch these videos and set it to RTBC (assuming they do not see any issues).

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2021-04-01 at 17.40.33.png179.43 KB

I go through the video reviews posted by @mherchel. The Focus state seems fine to me.
Moving to RTBC.

gauravvvv’s picture

gauravvvv commented
Status: Needs review » Reviewed & tested by the community
alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Reviewed & tested by the community » Postponed

Discussed with @lauriii - we agreed that we should postpone this on #3206290: Olivero: Windows high contrast mode does not show search icon and do a further round of checks before making Olivero stable. Great videos @mherchel - really helpful in reviewing.

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.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Postponed » Active

Since the blocker is committed, moving to active

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
javi-er’s picture

javi-er commented
StatusFileSize
new 3191682-Olivero-IE11-HC.mp411.92 MB

Hi, just took a look to this on IE11 high contrast and found the following issues, I tested it with the output of the style guide module and a menu.
I'm attaching a video for it.

  1. Submenus have a scrollbar.
  2. Messages close button icon is not visible.
  3. Dropdown arrow icon doesn't have enough contrast.
  4. "Powered by Drupal" is not focusable.
  5. There are some "ghost" elements when tabbing, for instance between the search icon and the login link.
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new IE11_-_Win7__before_upgrading_ie___Running_-4.png44.36 KB

Good catches @javi-er.

Opened followup issues:

  1. #3223268: Olivero: IE11 primary menu submenus have horizontal scrollbar when submenu item has focus
  2. #3223270: Olivero: Messages "close" icon not visible in IE11 High Contrast (and maybe others)
  3. #3223271: Olivero: Select dropdown icons need more contrast in Windows High Contrast mode
  4. I am able to get the "Drupal" link within powered by Drupal to focus. See
  5. I ran into some "ghost elements" too. This is some weird IE11 stuff.
mherchel’s picture

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

This still needs accessibility maintainer sign off. Note that this issue is for focus states, and also note that the unrelated issues found in #13 have followups (and many have RTBC patches)

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Went over this with @bnjmnm earlier. He will post videos and close this out.

We found one followup stable-blocking issue: #3227427: Olivero: <summary> focus state is invisible in Windows high contrast

And we found two non-stable-blocking issues:

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Issue tags: -Needs accessibility review

Youtube is taking its time encoding the video of our walkthrough, but on Aug 9, @mherchel took me through many scenarios with many browsers using high-contrast mode. This includes all possible natively focusable elements, natively focusable elements within dialogs, and focusable controls within core widgets such as close icons and tabledrag handles. Overall this is in good shape! The problems we did encounter now have their own issues (as documented in several comments above). These have clear issue summaries and success criteria. I approve of closing this broader issue in favor of the more targeted ones that have been opened. While it's always possible there will be an edge case that was overlooked, the baseline state of high contrast focus visibility is in good shape.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Fixed

Here's the walkthrough confirming that the remaining items have been given their own issues (several of which are already complete!): https://youtu.be/atu024JZwvU

Status: Fixed » Closed (fixed)

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