Skip to content

Fix: keep preview frame content out of the tab order - #34

Merged
SandObserver merged 2 commits into
mainfrom
fix/frame-focusable-content
Sep 6, 2026
Merged

SandObserver merged 2 commits into
mainfrom
fix/frame-focusable-content

Conversation

@SandObserver

@SandObserver SandObserver commented Sep 6, 2026

Copy link
Copy Markdown
Owner

Summary

  • Remove href from the w-nowplaying and cc-np-a/b/c preview configs so the Now Playing widget no longer sets role="link" and tabindex="0" on its root inside a tabindex="-1" iframe.
  • Remove href from the np-plex, np-jellyfin and np-emby preview configs so the widget-page previews are no longer keyboard tab stops that open a placeholder domain.
  • Set the Starlight logo alt to an empty string; replacesTitle already renders a visually hidden site title.

Testing
All green: npm run build and npm run check pass. Re-ran axe-core (wcag2a/aa, wcag21a/aa, wcag22aa, best-practice) against the production build on the landing page, /docs/is-stackyard-for-you/, /docs/widgets/, /docs/widgets/now-playing/, /docs/widgets/clock/, /docs/widgets/weather/ and /docs/installation/docker/, and inspected each iframe document directly: no focusable nodes remain in any preview frame, and no violations reported.

Checklist

  • npm run build and npm run check both pass.
  • Product UI is shown by running or capturing it, never recreated in CSS.
  • Any new preview or screenshot carries no private hostnames or real data.
  • Visual changes verified in both colour schemes and both docs themes.
  • Links to the app repo still resolve.

https://claude.ai/code/session_011JKjAEDFmY6gSqC4td9twQ

The Now Playing previews received an href in their static config, so the
widget promoted its root to role="link" with tabindex="0". That content sat
inside an iframe carrying tabindex="-1" and was unreachable by keyboard,
failing WCAG 2.1.1.

Drop href from the four preview configs used in tabindex="-1" frames, and
clear the wordmark alt text that duplicated the visually hidden site title.
@SandObserver SandObserver added the accessibility Barrier affecting people with disabilities label Sep 6, 2026
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 6, 2026

Copy link
Copy Markdown

Deploying stackyard-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: 23b15bc
Status: ✅  Deploy successful!
Preview URL: https://bb44a2d8.stackyard-docs.pages.dev
Branch Preview URL: https://fix-frame-focusable-content.stackyard-docs.pages.dev

View logs

Drop href from the np-plex, np-jellyfin and np-emby preview configs. Each
preview was a keyboard tab stop whose only action opened a placeholder domain.
@SandObserver
SandObserver merged commit 542efd8 into main Sep 6, 2026
2 checks passed
@SandObserver
SandObserver deleted the fix/frame-focusable-content branch September 6, 2026 02:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Barrier affecting people with disabilities

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant