Navigation Menu WCAG Level A Issue (Hidden element has focusable content)

[AlejandroPerezMartin]

Bug report

Current Behavior

The Navigation Menu component renders an empty span that's focusable when any of the menu items is expanded/open:

This causes an accessibility issue (WCAG A):

Expected behavior

Reproducible example

CodeSandbox Example

Click on 'Overview' in the example above

Suggested solution

Remove span or make it non-focusable. Not really sure why this span is needed.

Additional context

n/a

Your environment

n/a

Prod

Software	Name(s)	Version
Radix Package(s)	react-navigation-menu	^1.1.1
React		^18.2.0
Browser	Chrome	128.0.6613.85
Assistive tech	n/a
Node	n/a
npm/yarn	npm	10.2.3
Operating System	macOS	14.6.1 (Sonoma)

[MrRehberg]

Seeing this when running my Accessibility certification scripts and it is causing certification failures. Please address as soon as possible. Additional context from the failures:

{
     id: 'aria-hidden-focus',
     impact: 'serious',
     tags: [
       'cat.name-role-value',
       'wcag2a',
       'wcag412',
       'TTv5',
       'TT6.a',
       'EN-301-549',
       'EN-9.4.1.2'
     ],
     description: 'Ensure aria-hidden elements are not focusable nor contain focusable elements',
     help: 'ARIA hidden element must not be focusable or contain focusable elements',
id: 'focusable-not-tabbable',
             data: null,
             relatedNodes: [
               {
                 html: '<span aria-hidden="true" tabindex="0" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>',
                 target: [ 'span[aria-hidden="true"]' ]
               }
             ],
             impact: 'serious',
             message: 'Focusable content should have tabindex="-1" or be removed from the DOM'
           }
         ],
         none: [],
         impact: 'serious',
         html: '<span aria-hidden="true" tabindex="0" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>',
        target: [ 'span[aria-hidden="true"]' ],
         failureSummary: 'Fix all of the following:\n' +
           '  Focusable content should have tabindex="-1" or be removed from the DOM'

Screenshots of the generated empty span: