Contrib.social

Links with role="button" should not have outline: none on focus

Open on Drupal.org →
Created on 9 April 2021, over 3 years ago
Updated 10 February 2023, almost 2 years ago

Problem/Motivation

In elements.css, all links are styled to have no outline on focus. However, there are places where links used as buttons, and those should not have their focus outline overridden. They function as buttons and are not appearing within other text, so they should meet Focus Visible criteria.

Steps to reproduce

Go to admin/config/content/formats/manage/basic_html with CKEditor set as the text editor.
In "Toolbar configuration", the buttons do not get an outline when focused.

Proposed resolution

add a :not([role="button"]) to the selectors of the style removing outlines from focused links.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Closed: outdated

Version

10.1 ✨

Component
Claro  →

Last updated 2 days ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
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 almost 2 years ago →
    🇳🇿New Zealand quietone

    Seven is no longer in core. I asked in #bugsmash where this issue should move to. Lendude responded saying that the same code is in Claro. Therefore I am moving this to Claro and adding lendude to the triage meta, 📌 [Meta] Seven issue triage Fixed

  • Status changed to Closed: outdated almost 2 years ago
  • Comment almost 2 years ago →
    🇺🇸United States bnjmnm Ann Arbor, MI

    While it's true that the code I mentioned was a problem is still in Claro, that same CSS file (in Claro) includes focus styling of equal-to-greater specificity that appears after the outline-removing styles, so the focus ring shows up for all links (and pretty much anything receiving focus).

    .page-wrapper *:focus, .ui-dialog *:focus {
    outline: var(--focus-outline);
    box-shadow: var(--focus-box-shadow);
}

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024