WCAG Accessibility issue on the <@liferay_ui["quick-access"]> taglib

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.2.X, Master
• Fix Version/s: 7.2.X, 7.3.X, Master
• Component/s: Tag Libraries > Liferay Frontend Taglibs
• Labels:
  • ee-ts
  • liferay-fixpack-dxp-9-7210
• Branch Version/s:
  7.3.x, 7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-frontend/liferay-portal/pull/446

Reproduction steps:

1) Start the master bundle, login as Admin on Chrome
2) Create a new dummy theme with Theme Generator and deploy it
3) Download the Axe extension for Chrome https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
4) Create a new page and add set the dummy theme to it: this has <@liferay_ui["quick-access"] contentId="#main-content" /> in its portal_normal.ftl
5) Press F12 and go to the very right side on tab "axe"
6) On the bottom-left frame, click on the "Analyze" button
7) Among the results, you'll get one: "Ensures landmarks are unique (1)". Click on it

Result:

Issue description

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

More info
Element location

#jhfi_quickAccessNav

Element source

<nav class="quick-access-nav" id="jhfi_quickAccessNav"> <h1 class="hide-accessible">Navigation</h1> <ul> <li><a href="#main-content">Skip to Content</a></li> </ul> </nav>

To solve this violation, you need to...
Fix the following:

The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Related node:

#ouom_quickAccessNav

More info: https://dequeuniversity.com/rules/axe/4.0/landmark-unique?application=AxeChrome

 7.2.x @ 7b2e91cee470f7c81f374fbd8c915df6a7ed65da1f68c80648e5dc916e18a2c4
 master @ a2bf200ae15786e54e0f156b869507afb210479903b75c2be90108dc3484d140: reproduced