Mobile navigation menu contains invalid nesting

[leecalcote]

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.

[AbhiSahane0]

Hi @leecalcote, I would to work on this bug.

Thanks

[megha1807]

Hi @leecalcote ! I’d like to work on this issue. Could you please assign it to me?

[saurabhraghuvanshii]

@megha1807, you already have a couple of issues assigned. Please complete those before taking new ones.

[saurabhraghuvanshii]

Thanks @AbhiSahane0