Skip to content

Cleanup: use <a href="#main-content"> for the skip link to align with the canonical pattern #5605

@bram-atmire

Description

@bram-atmire

Describe the cleanup

src/app/root/root.component.html:1 implements the skip link as a button:

<button (click)="skipToMainContent()" class="sr-only" id="skip-to-main-content">
  {{ 'root.skip-to-content' | translate }}
</button>

The button is functional in the running SPA, because Angular wires it to a click handler that focuses #main-content (root.component.ts:137). DSpace Angular requires JavaScript to render at all, so users who reach the running app always have the JS handler available - this is not a current WCAG failure.

That said, the canonical and most widely-tested skip-link pattern is a plain anchor (<a class="sr-only" href="#main-content">…</a>). Anchors are the form every WAI-ARIA Authoring Practices example, every accessibility tutorial, and every assistive-tech regression test uses. The anchor pattern works without JavaScript, survives hydration glitches, and does not require a custom (click) focus handler. Migrating is hygiene rather than fixing a defect.

Confirmed in main at commit 9b025a61e.

To Reproduce

Inspect any DSpace 9 or 10 page (for example https://sandbox.dspace.org/). On the very first Tab from a fresh page load, focus reaches the "Skip to main content" control. The control is a <button>.

Expected behavior

Skip-to-main-content is an <a> element with href="#main-content". Pressing Enter activates native browser fragment-navigation and focuses #main-content. The custom skipToMainContent() handler can be removed.

Related work

Metadata

Metadata

Assignees

Projects

Status

🏗 In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions