Description
The mobile navigation menu contains invalid nesting that violates HTML5 specifications. An unordered list (<ul>) can only contain <li>, <script>, or <template> elements as direct children.
There are multiple <a> tags placed as direct children of the <ul> tags rather than being wrapped inside an <li>.
Location: Found in the dropdown menus (https://github.com/layer5io/layer5/blob/master/src/sections/General/Navigation/index.js#L344-L345). For example:
<ul>
<li class="mobile-nav-subitem">...</li>
<a class="mobile-sub-action-item" href="/pricing"><span class="readmore-btn">Pricing...</span></a>
</ul>Expected Behavior
Avoid negatively impacting accessibility (screen readers will struggle to count list items) and can cause cross-browser layout inconsistencies.
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
The mobile navigation menu contains invalid nesting that violates HTML5 specifications. An unordered list (
<ul>) can only contain<li>,<script>, or<template>elements as direct children.There are multiple
<a>tags placed as direct children of the<ul>tags rather than being wrapped inside an<li>.Location: Found in the dropdown menus (https://github.com/layer5io/layer5/blob/master/src/sections/General/Navigation/index.js#L344-L345). For example:
Expected Behavior
Avoid negatively impacting accessibility (screen readers will struggle to count list items) and can cause cross-browser layout inconsistencies.
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.