a11y: skip link + main landmark id (#6)

[KhyFee]

Summary

Accessibility baseline partial for #6:

• Skip-to-content link in parts/header.html
• id="main-content" + focus target on template main landmarks
• Focus styles for the skip link in style.css

Nav block already renders a landmark; full named aria-label can follow if you want it forced for every wp:navigation placement.

Test plan

• Keyboard Tab shows Skip to content first
• Activating jumps to main content region

Summary by CodeRabbit

• Accessibility Improvements
  • Added a skip-to-content link for faster keyboard navigation.
  • Styled the link to appear prominently when focused.
  • Enabled the main content area to receive programmatic focus for improved assistive-technology navigation.

[coderabbitai]

Important

Review available on request

• 🔍 Trigger review

Reviews should be triggered manually for repositories with fewer than 10 stars. Select Trigger review above or comment @coderabbitai review to review the latest changes. For a full review, comment @coderabbitai full review.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4dc9313c-a7e2-46f0-a741-2c1ffe483bf1

Note

.coderabbit.yml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key: "version"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

📝 Walkthrough

Walkthrough

The theme adds a skip-to-content link before the header, styles it when focused, and gives the main content region a matching ID and programmatic focus support.

Changes

Skip-to-content accessibility

Layer / File(s)	Summary
Implement skip-to-content navigation parts/header.html, templates/index.html, style.css	The header adds a link to #main-content. The main element receives the matching ID and tabindex="-1". Focused skip links become visible with prominent styling.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Sequence Diagram(s)

sequenceDiagram
  participant KeyboardUser
  participant Browser
  participant Header
  participant MainContent
  KeyboardUser->>Browser: Tab to skip link
  Browser->>Header: Render link targeting `#main-content`
  KeyboardUser->>Browser: Activate skip link
  Browser->>MainContent: Focus main element

Loading

Suggested reviewers: ashleyshaw

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main accessibility changes: adding a skip link and a main landmark ID.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@style.css`:
- Line 19: Update the shared .screen-reader-text rule to preserve the legacy
clip declaration for WordPress 6.4–6.7 while satisfying Stylelint: either
replace it with the appropriate clip-path handling only if compatibility is
retained, or add a narrowly scoped Stylelint exception documenting the
compatibility reason. Do not remove clip alone, since clip-path: none does not
reset the separate legacy clip value.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 375ead0b-4059-49a8-9112-154fb05e74a5

📥 Commits

Reviewing files that changed from the base of the PR and between 5d2b76f and 632f86a.

📒 Files selected for processing (3)

• parts/header.html
• style.css
• templates/index.html

[KhyFee]

Thanks for the CodeRabbit note on clip vs clip-path.

Left the legacy clip: auto !important in place for WordPress 6.4–6.7 focus reveal compatibility, and documented why in style.css. Happy to revisit once the theme’s minimum bumps to 6.8+.