Dropdown Component Audit

[christiemolloy]

An audit of all examples under the Dropdown Component show no bugs in comparison with Core.

However, the component does not currently reflect the interaction of selecting an item from the dropdown list and replacing it with the current selection. This issue should address that.

[LHinson]

feedback from @rhamilto also includes:

Differences I've noticed over "standard" dropdowns:

• No focus indicator for the toggle button so there is no way for keyboard navigation users to know the item has focus
• The first menu item in the dropdown is selected on opening the dropdown, so instead of a second enter press closing the dropdown, it selects the selected menu item
• The only way to close the dropdown is using the Esc key, which is problematic for mobile (i.e., there is no way to close the dropdown)
• Cannot tab out of the dropdown menu to the next keyboard focusable item

[jgiardino]

Thanks for flagging these issues, @rhamilto!

No focus indicator for the toggle button so there is no way for keyboard navigation users to know the item has focus

This is now captured in patternfly/patternfly#1023. I'm assuming you were using Firefox, which is where I saw the issue with focus indication for all buttons. Please let me know if this issue doesn't capture the issue you saw.

The first menu item in the dropdown is selected on opening the dropdown, so instead of a second enter press closing the dropdown, it selects the selected menu item

Please see explanation on dropdown behavior below...

The only way to close the dropdown is using the Esc key, which is problematic for mobile (i.e., there is no way to close the dropdown)

I updated #984 to capture this

Cannot tab out of the dropdown menu to the next keyboard focusable item

Please see explanation on dropdown behavior below...

With one of our key initiatives for PF4 being accessibility, our goal is to provide a control that complies with WCAG and also follows examples provided by the WAI-ARIA authoring practices guide, when the examples are well supported with current technologies (some of their examples use aria attributes that aren’t well supported yet).

Ultimately, we would like to follow the example provided for the menu button in the ARIA APG site. We currently have an issue open for implementing the arrow key interaction that they have documented (#1002). This means that the first menu item would still receive focus when the menu is toggled open. However this would address the issue with being able to tab away from the menu without first hitting Esc.

In addition to this pattern, we also want to provide a custom option similar to the Bootstrap model, where they allow any contents to display in the panel that pops up. We have some issues open currently to refine that example as well (patternfly/patternfly#1049, #1000, #839).

[tlabaj]

Closed by #1014