Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MaggieCabrera wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Keep keyboard focus visible and clear of the sticky header 
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>
  • Loading branch information
@MaggieCabrera @claude
MaggieCabrera and claude committed Oct 8, 2026
commit faea4e92985b9895af7e20418bcbe89defa80366
2 changes: 1 addition & 1 deletion patterns/header-default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
<!-- wp:site-tagline {"style":{"layout":{"selfStretch":"fill","flexSize":null}}} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"overlay":"navigation-overlay","icon":"menu","fontSize":"small","ariaLabel":"<?php esc_attr_e( 'Primary', 'ipsum' ); ?>"} /--></div>
<!-- wp:navigation {"overlay":"navigation-overlay","icon":"menu","fontSize":"small","ariaLabel":"<?php esc_attr_e( 'Primary', 'ipsum' ); ?>","layout":{"type":"flex","justifyContent":"right"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
2 changes: 1 addition & 1 deletion patterns/header-sticky.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<!-- wp:site-title {"level":0,"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|theme-2"},"typography":{"textDecoration":"none"},":hover":{"color":{"text":"var:preset|color|theme-6"}}}}}} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"overlay":"navigation-overlay","icon":"menu","fontSize":"small","ariaLabel":"<?php esc_attr_e( 'Primary', 'ipsum' ); ?>"} /--></div>
<!-- wp:navigation {"overlay":"navigation-overlay","icon":"menu","fontSize":"small","ariaLabel":"<?php esc_attr_e( 'Primary', 'ipsum' ); ?>","layout":{"type":"flex","justifyContent":"right"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
18 changes: 18 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@ span[style*="text-decoration"] {
text-underline-offset: 0.1em
}

/* Focus ring in the text color, so it keeps contrast in every color variation. Buttons keep theme.json's. */
:where(.wp-site-blocks *:focus-visible:not(.wp-element-button, .wp-block-button__link)) {
outline: 2px dotted currentcolor;
outline-offset: 2px;
}

/*
* Breathing room when jumping to in-page anchors (e.g. the comments CTA
* landing on #comments or #respond), so targets don't sit flush with the
Expand Down Expand Up @@ -173,6 +179,18 @@ header.wp-block-template-part:has(> .is-position-sticky) {
inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/* Below 600px the admin bar scrolls away (core's breakpoint), so stick to the very top. */
@media (max-width: 600px) {
.admin-bar header.wp-block-template-part:has(> .is-position-sticky) {
inset-block-start: 0;
}
}

/* 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?

}

/*
* Short pages: a sticky bottom bar can only pin within the page's own height,
* so the site wrapper must reach at least the viewport; main grows to push
Expand Down
Loading