Skip to content

Keep keyboard focus visible and clear of the sticky header - #145

Open
MaggieCabrera wants to merge 1 commit into
trunkfrom
claude/eloquent-darwin-65d0e6
Open

Keep keyboard focus visible and clear of the sticky header#145
MaggieCabrera wants to merge 1 commit into
trunkfrom
claude/eloquent-darwin-65d0e6

Conversation

@MaggieCabrera

@MaggieCabrera MaggieCabrera commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Part of #44. Keyboard focus is now easy to see and stays on screen:

  • Links, menu items and fields get a visible focus ring in every color variation.
  • With Header Sticky, focused elements no longer hide under the header.
  • Nested submenus no longer open off the right edge of the screen.
  • Logged in on small screens, the sticky header no longer leaves a gap above it.

Buttons, the search field and the sticky overlay are covered in #92, #141 and #135.

Screenshots

Before After
Focus ring Before: the focused menu link has the browser's thin orange focus ring After: the focused menu link has a dotted focus ring in the text color
Focus ring, Golden Hour 1c-focus-ring-before-golden-hour After, Golden Hour: a light dotted focus ring on the dark red background
Shift+Tab with Header Sticky Before: with Header Sticky, the focused tag link is hidden under the header After: the focused tag link scrolls into view below the header
Nested submenus 3a-submenus-before After: the nested submenus open to the left and stay on screen
Sticky header, logged in, below 600px Before: logged in on a phone, a strip of content shows above the sticky header After: the sticky header sits at the very top of the screen

Testing Instructions

  1. Tab through any page, also with a dark color variation. Every link, menu item and field shows a dotted ring.
  2. With Header Sticky, scroll down a long post and press Shift+Tab. Focused links stay visible.
  3. Open the last menu item's nested submenus with the keyboard. They stay on screen.
  4. Logged in and below 600px wide, scroll down. The sticky header sits at the top with no gap.

Checked on the front end, in the Site Editor, and in all color variations.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Audit, fix, testing and this description. I reviewed the changes.

🤖 Generated with Claude Code

@MaggieCabrera @claude
Keep keyboard focus visible and clear of the sticky header
faea4e9 
Draw the focus ring in the text color, 2px dotted, so it keeps its
contrast in every color variation instead of following the system
accent color. Buttons keep the focus state theme.json gives them.

Add scroll padding so focused elements don't land under the sticky
header, and let the header stick to the very top below 600px, where
the admin bar scrolls away.

Justify the Default and Sticky header navigation right, so submenus
open toward the page instead of past the right edge.

Part of #44.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions github-actions Bot added [Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet. [Area] Patterns Issues or PRs that touch the theme's block patterns. labels Oct 8, 2026
@MaggieCabrera
MaggieCabrera marked this pull request as ready for review October 8, 2026 16:55
@github-actions

github-actions Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: rvpatel <ravipatel@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

juanfra
juanfra reviewed Oct 13, 2026
View reviewed changes

@juanfra juanfra left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @MaggieCabrera, LGTM! I left one comment regarding the sticky header case.

Comment thread style.css

/* Keep focused elements from scrolling under the sticky header. */
html:has(header.wp-block-template-part > .is-position-sticky) {
scroll-padding-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);

@juanfra juanfra Oct 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume the 6rem is to match the height. That would work if the padding or logo height doesn't change, but it could become an issue if they do. Maybe it's worth documenting?

@rvpatel

rvpatel commented Oct 23, 2026

Copy link
Copy Markdown

Tested on WordPress 7.2-beta1 with this PR on current Ipsum trunk (merges cleanly), single post with the Header Sticky part, Chromium 1200×700, 25 real Tab presses after scrolling down.

  • ✅ 23 of 25 focused elements get the new 2px dotted currentcolor ring and none of them end up under the sticky header.
  • The two exceptions are expected: "Skip to content" (core's skip link, shown above the header) and the "Post Comment" button, which keeps its theme.json ring as the PR intends.

Not tested: the 600px small-screen rule and the admin-bar offset on mobile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@juanfra juanfra juanfra left review comments

Assignees

No one assigned

Labels

[Area] Global Styles Issues or PRs that touch theme.json or the base stylesheet. [Area] Patterns Issues or PRs that touch the theme's block patterns.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@MaggieCabrera @rvpatel @juanfra