Mobile navigation menu contains invalid nesting

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.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.