Problem/Motivation

I had opened that issue already over in the Gin queue as part of https://git.drupalcode.org/project/gin/-/work_items/3506305

Problem is that the Skip to main content skip link is not minding nor using the set focus color in light or dark mode. that way keyboard users have to reorient after their eyes got primed on blue in light mode and green in dark mode on the first link no matter which focus color is set.

the appearance settings page for default admin in light mode with orange chosen as focus color and the skip to main content link in the upper left corner of the screen shown
the appearance settings page for default admin in light mode with greenchosen as focus color and the skip to main content link in the upper left corner of the screen shown
the appearance settings page for default admin in dark mode with orange chosen as focus color and the skip to main content link in the upper left corner of the screen shown

Steps to reproduce

Go to admin/appearance/settings/default_admin and simply switch between light and dark mode setting different focus colors. After making your choice and save press the tab bar once so the Skip to main content link shows up in the upper left corner of the screen.

Proposed resolution

Use the selected focus color on the Skip to main content in light and dark mode.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
light_orange.jpg65.71 KBrkoller
light_green.jpg65.53 KBrkoller
dark_orange.jpg72.8 KBrkoller

Issue fork drupal-3637339

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rkoller created an issue. See original summary.

shank115 made their first commit to this issue’s fork.

shank115 opened merge request !17818

shank115’s picture

shank115 commented
Status: Active » Needs review

The default focus outline is scoped to .page-wrapper *:focus and .ui-dialog *:focus, but the skip link is rendered in html.html.twig before .page-wrapper, so it falls back to the browser's default focus ring. The MR adds the theme focus outline to the skip link's focus state, so it follows the selected focus color in light and dark mode, including custom and high contrast.

Gin's !581 addresses the same thing with a box-shadow ring using --gin-color-focus. Here I used var(--focus-outline) instead, so the skip link matches the focus style used everywhere else in Default Admin and keeps its existing box-shadow.

smustgrave’s picture

smustgrave commented

@shank115 your comment is kind reading like it was AI generated please refer to https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquett...

shank115’s picture

shank115 commented

Thanks @smustgrave, and sorry for not mentioning it earlier. I used AI to help draft the comment in #4.