SIGN IN SIGN UP
ColorlibHQ / AdminLTE UNCLAIMED

AdminLTE - Free admin dashboard template based on Bootstrap 5

0 0 73 CSS

fix(a11y): stop assigning role=navigation to <ul>/<ol> elements (#6038)

Assigning role="navigation" to a list element overrides its implicit
list role, which strips the list semantics — screen readers stop
announcing it as a list and its <li> children are reported as orphaned.
Lighthouse flags this as "List items (<li>) are not contained within
<ul>, <ol> or <menu> parent elements" and the accessibility score
drops from 100 to 97.

Two sources of the bad role:

1. accessibility.ts `addLandmarks()` blindly set role="navigation" on
   every `.navbar-nav` / `.nav`, which are Bootstrap classes that live
   on <ul> elements. Now skips <ul>/<ol> entirely — a list that should
   be a navigation landmark belongs inside a <nav>, which already
   provides the landmark and accessible name.

2. The sidebar templates (_sidenav-demo.astro, _sidenav-docs.astro)
   hardcoded role="navigation" + aria-label on the `<ul class="nav
   sidebar-menu">`. Moved the aria-label up to the wrapping
   `<nav class="mt-2">` element (the correct landmark host) and dropped
   the role/aria-label from the <ul>.

Thanks to @lfiorini for the detailed report with root-cause analysis,
ARIA spec references, and a proposed fix, and to @meesudzu for PR #6039
which used the same approach.

Bumps the adminlte.min.js bundlewatch budget 5.2 -> 5.5 kB to cover the
few bytes the tagName guard adds.
A
Aigars Silkalns committed
92ec9a5635a3eaf01b1b20683b4eea20559fb68d
Parent: 7917b42