Make Seven theme's link + button focus styles more robust for keyboard accessibility

Created on 27 May 2016, about 9 years ago
Updated 8 June 2025, about 2 months ago

Problem/Motivation

The CKEditor toolbar configuration UI (seen at e.g. admin/config/content/formats/manage/full_html is very hard for sighted keyboard-only users to use. The available buttons CAN currently be moved in and out of the active toolbar, but keyboard focus is not indicated to the user, which makes it practicallly impossible to know which button you are dealing with.

This issue is part of our goal of meeting WCAG 2.0 level AA, specifically Success Criterion 2.4.7. Focus Visible.

This is a follow-up to #1872206: Improve CKEditor toolbar configuration accessibility . Accessibility of toolbar configuration for screen reader users was previously addressed there.

Before:

After (Well BarisW's first stab):

Proposed resolution

Add some Clear keyboard focus styles to the CKEditor toolbar configuration UI.

The scope of this issue is specifically about the experience of sighted keyboard users. It does not propose to change the screen reader experience.

Remaining tasks

  • Decide how to style the keyboard focus. Should not use colour alone.
  • Write CSS. Ensure it works in Seven theme (and Bartik?)

User interface changes

Adds keyboard focus styles for the CKEditor "Toolbar Configuration". Exact styles not yet decided. The design impact aims to be minimal, by only providing a focus style specific to the CKEditor admin UI.

API changes

None.

Data model changes

None.

📌 Task
Status

Needs work

Version

2.0

Component

Code

Created by

🇬🇧United Kingdom andrewmacpherson

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

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

  • Needs reroll

    The patch will have to be re-rolled with new suggestions/changes described in the comments in the issue.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

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

Production build 0.71.5 2024