Skip to content

[6.x] Fix nested <li> in the CP nav - #15402

Merged
jasonvarga merged 1 commit into
statamic:6.xfrom
bpmore:fix/nav-nested-li
Sep 7, 2026
Merged

jasonvarga merged 1 commit into
statamic:6.xfrom
bpmore:fix/nav-nested-li

Conversation

@bpmore

@bpmore bpmore commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Fixes #15395.

Nav.vue already wraps every nav item in an <li>:

https://github.com/statamic/cms/blob/v6.31.0/resources/js/components/nav/Nav.vue#L206-L208

The updates and duplicates nav views each opened with their own <li> as well, so the rendered sidebar contained <li><li>…</li></li> on every authenticated Control Panel page:

main#main > nav.nav-main > div > ul > li > li

An <li> whose parent is an <li> is not part of any list, so the item falls out of the list structure and screen readers announce the wrong item count for the navigation. WCAG 2.1 SC 1.3.1 (Level A).

This PR removes the redundant wrapper from both views. Nav.vue:208 is the only consumer of $item->view(), so nothing else was relying on those views bringing their own <li>.

Verification

Applied to a vanilla 6.31.0 install and re-checked three CP pages with axe-core:

Page nested <li> before after listitem / list violations after
/cp/dashboard 1 0 none
/cp/collections 1 0 none
/cp/utilities 1 0 none

The Updates nav link still renders and still links to /cp/updater in each case.

Notes

  • No behaviour or styling change. The link markup and classes are untouched; only the wrapper element is removed.
  • No test added: this is Blade output with no existing view-level test to extend. Happy to add one if you'd like it, and happy to take a different approach if you'd rather keep the <li> in the views and drop it from Nav.vue instead.
  • Found during a WCAG 2.1 AA audit of the CP. AI tools were used to draft this; the change and the verification above were reviewed by hand.

Nav.vue already wraps each nav item in an <li>, so the updates and
duplicates nav views were producing <li><li>...</li></li> on every
authenticated Control Panel page.

Fixes statamic#15395

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013YZV7JD2cyMHSeSu2fUXCK
@jasonvarga
jasonvarga merged commit e8fe941 into statamic:6.x Sep 7, 2026
62 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[6.x] Sidebar nav renders an <li> inside an <li> on every Control Panel page

2 participants