[a11y] Boot navigation: listitem elements are not contained by a list role, failing aria-required-parent #78803

Activity

1. hi0001234d

   added

   [Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

   on May 29, 2026
2. t-hamano

   added

   [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).

   [Package] Boot/packages/boot/packages/boot

   on May 29, 2026
3. github-actions

   assigned

   hi0001234d

   on May 30, 2026
4. github-actions

   added

   [Status] In ProgressTracking issues with work in progressTracking issues with work in progress

   on May 30, 2026
5. t-hamano

   closed this as completedin #78829on Jun 2, 2026
6. t-hamano commented on Jun 2, 2026

   

   t-hamano

   on Jun 2, 2026

   Contributor

   More actions

   I would like to reopen this issue as #78829 did not completely fix it. See #78829 (review)

   Also, note that DropdownItem is not a list item. This means that if parent_type is dropdown, the tree will look like this:

   <div role="list">
     <div class="boot-dropdown-item">
       <div role="listitem">
         <button class="boot-navigation-item"></button>
       </div>
     </div>
   </div>

   This is a bit tricky to fix, so we can ignore this issue for this PR.
7. t-hamano

   reopened this on Jun 2, 2026
8. hi0001234d commented on Jun 23, 2026

   

   hi0001234d

   on Jun 23, 2026

   ContributorAuthor

   More actions

   Picking this up. Confirmed the current structure in trunk:

   <div role="list">
     <div class="boot-dropdown-item">              <!-- no role -->
       <div role="listitem">…toggle button…</div>
       <div class="boot-dropdown-item__children">  <!-- no role -->
         <div role="listitem">…nav item…</div>
       </div>
     </div>
   </div>

   The boot-dropdown-item and children wrappers sit between role="list" and the listitems, so the toggle and child items are orphaned from their list parent.

   Proposed fix make the dropdown a single listitem with a nested list for its children:

   <div role="list">
     <div class="boot-dropdown-item" role="listitem">
       <button>…toggle…</button>
       <div class="boot-dropdown-item__children" role="list">
         <div role="listitem">…nav item…</div>
       </div>
     </div>
   </div>

   Concretely, in dropdown-item/index.tsx:

   1. Add role="listitem" to the boot-dropdown-item wrapper.
   2. Pass role="presentation" to the toggle Item so its default listitem wrapper doesn't create a nested listitem (the button stays the interactive toggle).
   3. Add role="list" to the children motion wrapper so the child NavigationItems are owned correctly.

   Does the above approach look right?

   (One note on testing: since no menu item in default Gutenberg registers with parent_type: 'dropdown', this path doesn't render in the default editor, so I can't visually or axe-verify it the change would be code-level for correctness.)
9. Mustafabharmal commented on Oct 6, 2026

   

   Mustafabharmal

   on Oct 6, 2026

   Contributor

   More actions

   Since #82509, Item only applies role="listitem" inside an ItemGroup, so on current trunk the boot navigation items render with no role at all, and the role="list" added in #78829 owns no list items. That also means the role="presentation" workaround for the dropdown toggle isn't needed anymore.

   My proposed fix is to set role="listitem" explicitly on NavigationItem and DrilldownItem, and to make DropdownItem's wrapper a listitem with its children container as a nested role="list". @hi0001234d, I saw you picked this up. Happy to leave it to you, or to open a PR if you're no longer working on it. Let me know!