Error in validating <li> in wrapped <ul>

[ronaldtveen]

We're currently in development of a websites that is under NDA so I cannot link to that page, removed the URL from the screenshots because of that reason.
It is a WordPress website with the The7 theme, which we use on many websites so I will link to a couple of those. They all have the same accessibility error which is not correct. They however are not optimised as much as the screenshots I will attach at the bottom of the website that we want/need to get to 100% accessibility score (government website that has accessibility demands).

Provide the steps to reproduce

We get an incorrect error when we scan for: Categories: Accessibility for Device: Desktop in Lighthouse.

• https://mijncoronaplan.nl
• https://hypotheekontbijt.nl
• https://netlpro.nl

What is the current behavior?

We're getting the following accessibility error:

List items (<li>) are not contained within <ul> or <ol> parent elements.
Screen readers require list items (<li>) to be contained within a parent <ul> or <ol> to be announced properly. Learn more.

What is the expected behavior?

This is incorrect because when we click on the failing elements we see the <li> wrapped in a <ul> element. We see this both in the DOM (DevTools) as well as in the original generated HTML from the server (View » Developer » View Source)

Environment Information

• Affected Channels: DevTools, Axe
• Lighthouse version: 5.7.1
• Chrome version: 83.0.4103.106 (Official Build) (64-bit)
• Node.js version: ---
• Operating System: macOS Version 10.15.5 (Build 19F96)

Related

1. Lighthouse screenshot
   This shows the single error; Hovering the second <li> element in Lighthouse which highlights the element in the main navigation in the header.

2. Axe screenshot
   Shows the same error. Note that the #primary-menu ID is a <ul> element...

3. DOM screenshot
   Shows the <li>'s being wrapped in the <ul id="primary-menu"> in the DOM

4. Source screenshot
   Shows the <li>'s being wrapped in the <ul id="primary-menu"> in the HTML source

[patrickhulce]

Thanks for filing @neejoh! The problem is your role=navigation on the ul which, from an a11y perspective makes it no longer a list container.

See #9643 for more discussion on this issue.

If you have any further comments on this issue, feel free to take it up in axe-core.