Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions