CentreForDigitalHumanities / CentreForDigitalHumanities/Textcavator
Different kinds of dropdowns
- Dominant language
- Python
- Stars
- 12
- Forks
- 3
- Avg merge
- 3d 3m
- Merged PRs (30d)
- 9
Description
https://github.com/UUDigitalHumanitieslab/I-analyzer/pull/1465 improves the versatility and accessibility of the dropdown component; this issue describes some things I did not get to in that update.
Semantically, there are a few different kinds of dropdown menus:
- Action menus that offer a range of _actions_. These have no "selected value"; each item is mapped to an action - either through a javascript callback or through navigation.
- Radio menus that allow the user to select one option from a list.
- Multiselect menus - similar to radio menus, but you can select any number of options.
- Dialogue popups that don't (just) offer a list of options. These can include any UI elements and may just use the "dropdown" effect to hide some content until the user interacts with it.
These have different interactions, ARIA roles, etc. For instance, dialogue menus don't need to allow users to scroll through options with the arrow keys; action menus don't show "active" states for items; in multiselect menus, the active option can be "deselected" by clicking it but in a radio menu, it can't be; etc.
As it is, the dropdown component is designed to work for the first two options, but trying to make these work in one system results in some slight accessibility issues. (Specifically, in the second case, items should have `menuitemradio` roles and set an `aria-selected` attribute. Right now, the "active" state of items is shown visually but not accessible to screen readers.)
(We also have multiselect menus in our application, but those are based a primeNG component. Potentially, our own dropdown could be extended to support those too, but it's not a priority.)
Anyway, these different semantics should be distinguished in the dropdown component. This can be done by setting the mode through the input, or by creating different "flavours" of (related) dropdown classes - whichever results in cleaner code.
Another issue is that the dropdown component is designed to work as a [bulma dropdown](https://bulma.io/documentation/components/dropdown/) so it sets appropriate CSS classes. But [bulma navbar dropdowns](https://bulma.io/documentation/components/navbar/) use completely different CSS classes, though the interactions are basically the same. It would be nice if this dropdown could be based on the same components/directives.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.