RH Theme: Menu toggle (PF) Form select (RHDS)

[andrew-ronaldson]

[markcaron]

@andrew-ronaldson sorry to drop all these comments in! 😅 I'm just going through this awesome roadmap and looking at our challenge ahead in aligning some of these elements. Hope you don't mind!

The "what is a dropdown" question, here, is a very worthwhile discussion, and one we had very recently as well as a couple years ago as we were assessing our approach to <rh-navigation-primary>.

We've taken the view that there mainly 3 different "dropdowns" on the web:

1. Menu dropdowns
2. HTML Select elements
3. Navigation "flyouts" and megamenu "dropdowns"

Menu dropdowns

We are currently working on <rh-menu-dropdown> which would moreorless be the 1:1 component with PatternFly's dropdown, at least to the extent of it grouping a menu (i.e, the panel that opens) with a toggle button.

These are consistent with WAI's menu pattern.

HTML Select elements

We haven't tackled this element in RHDS yet, but we would likely follow PatternFly's select "menu" and WAI's Listbox pattern (which I believe PF uses under-the-hood).

Select/Listboxes are semantically and functionally different (including featuresets) from WAI menus, even though they look almost the same (if not the same).

Navigation "flyouts" and megamenu "dropdowns"

This is a whole other debate, even within the web community. Some prefer the WAI Menubar pattern, which totally makes sense within an application—since the Menubar mimics the exact same functionality as an application menu bar. Others, like me, feel this unnecessarily complicates a very basic feature/function of the web: to be able to navigate from page to page with hyperlinks. Menubars also unnecessarily complicate the screen reader experience. So, we've taken a simpler route in RHDS by making our Navigation element, just a navigation element with disclosures (<details>) opening/closing their "dropdowns".

This might warrant further discussion between any menubar patterns in PatternFly and how to differentiate them from basic web navigation elements/components.

CC: @zeroedin @hellogreg @adamjohnson

[andrew-ronaldson]

For the Navigations flyouts and dropdowns I think I'll link your comment to the primary nav issue that Corey and I have. We can look for a time to chat more about that with Steven and Michael if that works for you @markcaron