Skip to content

Conversation

@MatteoGabriele
Copy link
Contributor

Add tabindex="-1" to the #main-content container so it can receive focus when using the skip-link feature.

Before tabbing and clicking the skip link, it would simply scroll to the main content, but tabbing would still start from the first element on the page (the logo).

Screen.Recording.2026-02-11.at.16.20.22.mov

After adding tabindex="-1", clicking the skip link focuses on the main, and the next tab goes to the first element of the main content.

Screen.Recording.2026-02-11.at.16.17.58.mov

Add tabindex="-1" to the #main-content container so it can receive focus when using the skip-link feature.
@vercel
Copy link

vercel bot commented Feb 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 11, 2026 3:25pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 11, 2026 3:25pm
npmx-lunaria Ignored Ignored Feb 11, 2026 3:25pm

Request Review

@codecov
Copy link

codecov bot commented Feb 11, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 11, 2026

📝 Walkthrough

Walkthrough

The change modifies the main content wrapper div in app/app.vue by adding the tabindex="-1" attribute to the element with id="main-content". This attribute makes the element focusable via programmatic means whilst excluding it from the normal tab order. The modification consists of one line addition and one line removal, with no changes to the component's exported or public declarations or underlying logic.

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description clearly relates to the changeset, explaining the accessibility improvement by adding tabindex="-1" to enable focus on the main content container via skip-link functionality.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


Comment @coderabbitai help to get the list of available commands and usage tips.

@danielroe danielroe added this pull request to the merge queue Feb 11, 2026
@whitep4nth3r
Copy link
Contributor

whitep4nth3r commented Feb 11, 2026

When the settings are open and I tab to the skip to main content button, pressing enter focusses the full settings dialog yet I would expect it to go straight to the theme picker. It just felt a bit wrong. it's better than before so gg!

@whitep4nth3r whitep4nth3r removed this pull request from the merge queue due to a manual request Feb 11, 2026
@whitep4nth3r whitep4nth3r added this pull request to the merge queue Feb 11, 2026
@MatteoGabriele
Copy link
Contributor Author

GG

Merged via the queue into npmx-dev:main with commit eac8537 Feb 11, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants