Multiaction buttons
These can be used in areas where there are a lot of options for a user to choose from but they are all variations of the same task. For example a download button where the dropdown gives options to download as a pdf, as an excel doc etc.
From a usability point of view, this type of button should only be used in conjunction with other buttons. Placing it near other actions will make it clearer what it is for. Also be careful not to hide really important functionality inside the dropdown.
Keyboard control
Expected behaviour taken from https://www.w3.org/WAI/tutorials/menus/application-menus/
Key | Action |
---|---|
tab ⇥ | Select the next focusable element outside of the menu. |
shift ⇧ + tab ⇥ | Select the previous focusable element outside of the menu. |
return/enter ↵ | Open the submenu, select first submenu item. |
space | Open the submenu, select first submenu item. |
down ↓ | Open the submenu, select first submenu item. |
up ↑ | Open the submenu, select last submenu item. |
Key | Action |
---|---|
tab ⇥ | Close the submenu, select the next focusable element outside of the menu. |
shift ⇧ + tab ⇥ | Close the submenu, select the previous focusable element outside of the menu. |
return/enter ↵ | Carry out function of this item. |
space | Carry out function of this item. |
down ↓ | Select next submenu item. |
up ↑ | Select previous submenu item. |
esc | Close the submenu, select the current top-level menu item. |
How they work
The markup is quite straight-forward: the buttons you want to show in the popup should be enclosed in an appropriate element that has the data-multiaction-button
attribute and an id, as shown in the examples.
UCASDesignFramework.multiactionButtons.init()
will run on load, if the page is rendered on the server. On a client-rendered page, you will need to run this after adding the elements to the DOM.
The init()
will add a trigger button.
When clicked, show()
will temporarily move the buttons to #multiactionButtonContainer
, which is located just before the closing