Bug - Nav: flyout isn't accessible

[thatblindgeye]

Describe the problem
Followup to #7772

Currently the Nav flyout example shows a nav item that both is a link and contains a flyout menu. Due to how some assistive tech navigates pages, the only way to open the flyout menu may be to press Enter or Space on the nav item. The PR linked above would add that functionality in, but because links can be activated via mouse click or pressing Enter, and because VoiceOver's VO modifier + Space keyboard shortcut acts as a click event, the only way for users to open the flyout menu with VO is to press only Space (though that isn't exactly clear depending on the browser and may not be flawless).

As noted in the linked PR, two possible solutions include:

• We recommend that flyouts not be put on nav items that are also links that can be clicked, and update the flyout example accordingly. This would cause the flyout to behave more similarly to the drilldown example.
• We update the icon indicating there is a flyout menu to make it an interactive button, similar to the W3C flyout button as toggle example.

Additionally, the difference in how to navigate the first level nav items (can only use Tab to navigate between them) and the flyout menus (can only use arrow keys) may not be immediately apparent to users navigating via only keyboard.

How do you reproduce the problem?
Go to either the example link above or into the preview build nav flyout from the linked PR, and try to navigate and operate the flyout nav example with VO.

Expected behavior
Nav flyouts can be clearly perceived and operated by assistive tech

Is this issue blocking you?
N/A

Screenshots
N/A

What is your environment?
N/A

What is your product and what release date are you targeting?
N/A

Any other information?
N/A

[mcarrano]

I don't know that there was ever a requirement that menu items that trigger a flyout menu also need to contain navigation links. I would opt that this functionality be removed in favor of making this work like the drilldown examples. I'm a little concerned that making this change might break someone, but to my knowledge Satellite is the only project using flyouts right now. I checked and they don't need this capability.

@nicolethoen @tlabaj how do you feel about removing the ability for a parent node to be both for opening a flyout and for navigation? Do you remember if there was a specific reason we implemented it that way or who did the implementation? It is still marked as beta.

[mcarrano]

@kmcfaul I believe you did the current flyout nav implementation. Can you take a look at this? Any reason we can't remove this capability and have the flyout work like a drilldown menu?

[mcarrano]

Response from @kmcfaul

I think there shouldn't be too much trouble to implement either suggestion on the react side. The first suggestion would be more of a design decision as the recommendation for how a flyout menu is laid out changes slightly (that flyout items shouldn't be links but a descriptor to what the flyout contains). The second suggestion also seems feasible dividing the link from the toggle element and updating where the flyout logic is placed (on the toggle opposed to the whole nav item). It may result in some shuffling of where css/aria props get placed but I'm not positive if that would be required.

Let's just go ahead with the suggestion to update the flyout to work more like a drill-down menu, then.