Skip to Main Content - Focus Visible

[dhweddington]

@lgeggleston

Issue reported by University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.

Describe the bug

Button and focus are not visible for skip to main content button.

Page

General Alerts and Sitewide Issues

WCAG Guideline

WCAG 2.4.7

To Reproduce

Relevant code

\<button \_ngcontent-dspace-angular-c3074528159="" id="skip-to-main-content" class="sr-only ng-tns-c3074528159-0"\> Skip to main content\</button\>

Expected behavior

Change button to <a href> to avoid conflict with angular reformatting and messing up the focus.

Suggested fix / example code

\<a href="#main-content" class="visually-hidden focusable skip-link"\>Skip to main content\</a\>

[guillermo-escire]

Hi @lgeggleston, could you please assign me this issue to work on?

[alexandrevryghem]

@dhweddington This is already being worked on in #5610, but the suggested fix and the description of this issue doesn't match. The description says that the link should be visible and the suggested fix adds a class visually-hidden, does this mean you want to keep it hidden?

(In the past that button used to be visible for all the users when it was being focused, but this was changed on purpose in one of the accessibility PRs)

[dhweddington]

@alexandrevryghem Here's the explanation from our accessibility audit lead: "[There's a mismatch] because I copied the skip to main content link from the UVA library home page. A lot of remediation code was pulled/modified from the UVA existing pages to try to make things easier for our developers. My recommendation is to treat the remediation action description as the source of truth and treat the remediation code as more of an example aid."

[lgeggleston]

Hi @alexandrevryghem, thanks for pointing out the existing ticket for this, I missed it!
@dhweddington Since this is indeed already accounted for (following the expected behavior described here it sounds like, if disregarding the example code), closing this out as a duplicate. If your team has any suggested changes to the solution however, feel free to comment on the open PR. Otherwise, that fix may hopefully be merged soon as it has been approved. Thank you!