[Feat]: custom content as a submenu is not keyboard accessible

[gojohnnygo]

Code of conduct

• [x] I agree to follow this project's code of conduct.

Impacted component(s)

sp-menu, sp-menu-item

Description of the requested feature

When a div is in a submenu slot, it is not accessible via keyboard. Only a sp-menu with slot="submenu" is keyboard accessible.

For example, in the menu below, a user will be able keyboard navigate to Sizes > Small / Medium / Large. However a user could not keyboard navigate to Size > Custom > Input bc the input is custom content.

<sp-menu>
    <sp-menu-item>
    Sizes
    <sp-menu role="submenu">
        <sp-menu-item>Small</sp-menu-item>
        <sp-menu-item>Medium</sp-menu-item>
        <sp-menu-item>Large</sp-menu-item>
        <sp-menu-item>
            Custom
            <div role="submenu">
                <input />
            </div>    
        </sp-menu-item>
    </sp-menu role="submenu"> 
    </sp-menu-item>
</sp-menu>

Mockups or screenshots

No response

Implementation notes or ideas

Users should also be able to tab through all focusable elements inside a submenu's custom content (e.g. height and width inputs) and tab back to the menu for seamless accessibility.

Would you like to track this issue in Jira?

• [x] Yes, please tell me the ticket number!

[najikahalsema]

SWC-1332