<li> elements must be contained in a <ul> or <ol>

Element location
.slflnk.expanded.dropdown:nth-child(1)

Element source
<li class="slflnk expanded dropdown">

This patch adds roles to top-level dropdown links and resolves those Axe errors.

Latest patch also adds role=menu to all ULs and role=menuitem to all menu links whether <a href or {{ link }}

CommentFileSizeAuthor
#17 wcag-add-roles-to-all-menu-ul-li-ahref-link-3164631-17.patch26.47 KBgdaw
#9 main-menu-wcag-axe-errors-li-elements-must-be-contained-in-ul-or-ol-3164631-9.patch7.65 KBgdaw
#3 main-menu-wcag-axe-errors-li-elements-must-be-contained-in-ul-or-ol-3164631-3.patch2.53 KBgdaw

Comments

gdaw created an issue. See original summary.

gdaw’s picture

gdaw commented
Issue summary: View changes
gdaw’s picture

gdaw commented
StatusFileSize
new main-menu-wcag-axe-errors-li-elements-must-be-contained-in-ul-or-ol-3164631-3.patch2.53 KB
joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Status: Needs review » Reviewed & tested by the community

Great work! I will add this to our build immediately

gdaw’s picture

gdaw commented

This patch fixes the Axe tool errors but introduces new errors instead. Changing this ticket to Needs Work status.

gdaw’s picture

gdaw commented
Status: Reviewed & tested by the community » Needs work
joseph.olstad’s picture

joseph.olstad
Primary language French
commented

yes I'm also seeing these w3c issues caused by this patch, thanks!
Bad value “none” for attribute “role” on element “li”.

gdaw’s picture

gdaw commented

This is the detail that another WCAG tool generates ... The "none" role is not a valid role for the "li" element with a parent of "ol" or "ul". The valid roles for "li" with a parent of "ol" or "ul" are: "listitem", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "presentation", "radio", "separator", "tab", and "treeitem". Visit https://www.w3.org/TR/html-aria/ for more information.

gdaw’s picture

gdaw commented
StatusFileSize
new main-menu-wcag-axe-errors-li-elements-must-be-contained-in-ul-or-ol-3164631-9.patch7.65 KB
gdaw’s picture

gdaw commented
Issue summary: View changes
joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Status: Needs work » Needs review
gdaw’s picture

gdaw commented
Status: Needs review » Reviewed & tested by the community

We've been using this patch for weeks now, and in combination with some other minor related patches. Together they work well so I will move this one to RTBC status like the rest of them, all lined up for next release.

gdaw’s picture

gdaw commented
Status: Reviewed & tested by the community » Needs work

Actually I would rather fix the single quotes in this patch.

gdaw’s picture

gdaw commented
joseph.olstad’s picture

joseph.olstad
Primary language French
commented

@gdaw, I believe you forgot to upload the new file, make sure to adjust the filename , it will be for comment 16 most likely

gdaw’s picture

gdaw commented
Issue summary: View changes
gdaw’s picture

gdaw commented
Title: Main menu generates WCAG errors in Axe tool - <li> elements must be contained in a <ul> or <ol> » WCAG - Add roles to all menu UL LI and AHREF / LINK
Status: Needs work » Needs review
StatusFileSize
new wcag-add-roles-to-all-menu-ul-li-ahref-link-3164631-17.patch26.47 KB

This patch adds roles to top-level dropdown links and resolves those Axe errors, plus this latest patch also adds role=menu to all ULs and role=menuitem to all menu links whether <a href or {{ link }}

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

Thanks, we're going to put this one through a battery of tests in the comming week.

So far it applies cleanly along with the others for the 8.x-1.25 version of wxt_bootstrap. We upgraded earlier this week so not yet up with the HEAD of dev as I know some new commits have gone in the past few days.

gdaw’s picture

gdaw commented

No issues or errors have been noticed during the past months, as hoped this patch has been harmless ... and the reduced noise from validation tools is very welcome.

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Status: Needs review » Reviewed & tested by the community

been running with this for a while.

sylus’s picture

sylus commented
Status: Reviewed & tested by the community » Fixed

Committed and attributed thanks so much :D

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented

Because of the role="menu" in menu-local-tasks.html.twig, WAVE is giving me errors like this:

Broken ARIA menu

What It Means
An ARIA menu does not contain required menu items.
...

An element with role="menu" does not contain at least one element with role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

I think the solution would be to change menu-local-task.html.twig so that it has role="menuitem" instead of role="presentation".

I created a follow-up: #3588042: Fix or replace role="menu"

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Version: 8.x-3.013 » 6.3.x-dev
Status: Closed (fixed) » Postponed (maintainer needs more info)

@liam morland, thanks for the heads up. Do you have a patch?

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

ok ya, follow up in the #3588042: Fix or replace role="menu" I see your patch

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.