Contrib.social

Restore two-colour focus indicator

Open on Drupal.org →
Created on 20 September 2020, almost 5 years ago
Updated 15 December 2023, over 1 year ago

Problem/Motivation

Follow-up to correct a problem introduced in #3023311-68: Modal dialog style update → .

From comment #68 in the earlier issue, discussing the focus style for the close-dialog button:

According to the designs, the while border shouldn't be visible on the focus effect of the close button.

This was a wrong turn. The two-colour focus indicator IS intended. See comment #22 by @modulist in #3028099-22: Element focus: accessibility review → .

It was discussed in an earlier issue about focus styles. The idea is that the focus indicator would have a green line with sufficient contrast against an adjacent white line, so that no matter what the background colour, the two colours of the focus indicator would at least have a reliable contrast against each other. The benefits are:

  1. It's easier than having to come up with a single focus colour which works against every background colour variant in Claro, or having to manage different shades of green for each background colour.
  2. It's more robust against background colour scenarios that we can't know in advance, such as:
    • Controls positioned over an unpredictable background; notably images in media library, CKEditor, or layout builder with block content previews turned on.
    • Contrib modules which provide a background colour for a new render element in their own UI.
    • Users who employ background colour adjustments (and/or transparent overlays) as reading aids via browser add-ons, or other assistive technology (software, or even plastic monitor overlays).

We're not alone in using this method. Since implementing the two-colour focus style in Claro, the Chrome browser also introduced a two-colour focus outline by default. But Claro got there first :-)

Steps to reproduce

  • Install Standard profile, then enable Claro as the admin theme.
  • Open a dialog (e.g. media library)
  • Press tab until the close-dialog "X" button has focus. The focus indicator is a single-colour green circular outline. This is a mistake.
  • Tab until the a blue button in the dialog footer has focus. This shows the focus style which was originally intended. The focus outline has two colours (green and white) against the pale-grey footer background. The difference between the grey background and the white part of the focus ring is slight, so you may need a screen magnifier tool to see it. (You can also see it more clearly by by changing the footer background using browser dev tools.)

Proposed resolution

Restore the two-colour focus outline, to make it consistent with other

Remaining tasks

Important question: have we remove the two-colour outline style anywhere else?

  • Controls positioned over image thumbnails in media library. DONE, these are GOOD.
  • Other places...?

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
Claro  →

Last updated 6 minutes ago

Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Regression

    It restores functionality that was present in earlier versions.

  • 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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇨🇭Switzerland saschaeggi Zurich

    @andrewmacpherson is this something we still need to have a look at or could this be closed?

  • Status changed to Closed: outdated about 1 month ago
  • Comment about 1 month ago →
    🇺🇸United States smustgrave

    Since there hasn't been a follow up going to close out, if still a bug in D11 please reopen,

    Thanks all!

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

    Looking at this now, I think that what we're talking about is:

    .icon-link:focus {
    box-shadow: 0 0 0 1.5px var(--color-white),0 0 0 3.5px var(--color-focus);
}

    Which you can see in places like where @andrewmacpherson described.

    I think it is part of Edge/Chrome as described here (in the 'A More Visible Focus Ring' section):
    https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

    I don't know where we are overriding the Chrome/Edge defaults though.

    Plus, now we have to think about how this applies to Gin.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024