-
Type:
Bug
-
Status: Closed
-
Resolution: Fixed
-
Affects Version/s: 7.2.X, Master
-
Fix Version/s: 7.2.X, 7.3.10 DXP FP1, 7.3.10.1 DXP SP1, 7.3.6 CE GA7, 7.3.X, 7.4.13 DXP GA1, Master
-
Component/s: Tag Libraries > Liferay Frontend Taglibs
-
Branch Version/s:7.3.x, 7.2.x
-
Backported to Branch:Committed
-
Fix Priority:3
-
Git Pull Request:
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