Multi Action Button can't close with Esc key #4522
Comments
|
@tempertemper would you mind having a look at this please? If you tab onto the multi-action-button it will open, but there's no way to close it with the keyboard, other than tabbing away from it. Should we be able to press escape (or something else) to close the dropdown? Thanks |
|
esc should close the pop up and return focus to the trigger. Problem is, focusing the trigger automatically shows the dropdown menu… I'm not sure what the right direction to take to fix this is, but I'm pretty sure it's design-led, and probably linked to the hover/focus triggering the dropdown menu, rather than behaving like a default button, which would take focus and provide a hover affordance, but would require a click/tap/enter/space to show the drop down. Maybe @harpalsingh can advise on the best course of action here; maybe a multi-action button task force. Note for the 'task force': focus is returned to the parent button when tab is pressed on a sub-menu item. This should probably take the user to the next control on the interface, in order to satisfy 2.4.3 Focus Order. |
nicktitchmarsh
added
Design System Review Required
|
Please can Design System team review Martin's comments here and advise on the behaviour for Multi Action Buttons |
|
@clairedenning @harpalsingh do either of you know what we should do with this? |
|
I think @andy varley would be the best person to answer this. Can't tag him here, I'll message him. |
|
I'm catching up with him on Friday morning so I'd be happy to fill him in 👍 |
|
Tagging @v99rly |
|
Hi @tempertemper - did Andy and yourself get anywhere with this? |
|
Thanks for the nudge, @samtjo. I caught up with him, but there's a good chunk of work in re-speccing the component, and I think the DS team have been struggling to prioritise non-brand-related work recently. I'll catch up with him on it when he returns from his holiday next week 👍 |
|
FE-5188 |
|
We have recently added work so the menu closes after an action has been used (Enter key), we could add the Esc key functionality as well. |
nicktitchmarsh
added
On Backlog
and removed
triage
|
Might be worth coming back to the Esc key functionality, since there could be the question of re-opening the menu, which would mean tabbing off then back onto the multi-action button. I'll address this with @v99rly again when I catch up with him on Friday. |
|
Had a chat with @tempertemper and checked what should be the correct behaviour. Will look into the with the design system team week commencing the 6th June. |
|
Please see ticket FE-5188 for further information |
Updates the keyboard navigation behaviour for `MultiActionButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `SplitButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `MultiActionButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `SplitButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `MultiActionButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `SplitButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `MultiActionButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Updates the keyboard navigation behaviour for `SplitButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Implements `useMenuKeyboardNavigation` to Update the keyboard navigation behaviour for `MultiActionButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
Implements `useMenuKeyboardNavigation` to update the keyboard navigation behaviour for `SplitButton`. Up and down arrow keys can still be used for navigating children buttons but there is no longer any looping back around. When the children container is open tabbing can now be used to navigate the children buttons, the tab key takes you down the list and back tab goes up. When the last child button is focused and tab is pressed it will close the container and move focus to the next focusable element on the page. When the shift and tab keys are pressed and the first child button is focused it will close the container and return focus back to the main button control. Pressing the escape key when the children container is open will now close the list and return focus back to the main button control. All other keyboard functionality remains the same fix #4522
|
🎉 This issue has been resolved in version 109.3.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Current behaviour
The
MultiActionButtoncannot close when the Esc key is used.Expected behaviour
The
MultiActionButtonshould be able to close when the Esc key is used.CodeSandbox or Storybook URL
https://codesandbox.io/s/autumn-wave-wg9gc?file=/src/index.js
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
95.1.0
What browsers are you seeing the problem on?
Chrome, Firefox, Edge, Safari
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
The text was updated successfully, but these errors were encountered: