Multi Action Button - Accessibility(Speech Recognition) reinforcement request

[JinCoreana]

Desired behaviour

For the users who are not able to click using a mouse or a keyboard, Multi Action Button should show hidden buttons with onClick event not only with onMouseLeave or Tab key event.

Current behaviour

Multi Action Button currently shows hidden buttons only with mouseover or keyboard events. The users with hand disability should go through one more step, saying 'press enter key' and this is not intuitive. (Video attached)

https://user-images.githubusercontent.com/90848080/202129174-6bbe9a42-494e-4d17-9896-b347c8f82a4a.mov

Suggested Solution

Controlling the state of the hidden buttons under Multi Action Button with onClick event along with the current mouseover and keyboard will reinforce the accessibility.

CodeSandbox or Storybook URL

https://codesandbox.io/s/speech-recognition-issue-8g7v3z?file=/src/index.js

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

@tempertemper, it would seem to me the solution here is to have the menu automatically open on focus of the main button? Or is there some other recommendation you can make here?

[tempertemper]

We're looking to move away from hover-to-trigger-things behaviour, instead using explicit presses.

@v99rly are you able to comment on the timeline for this change being added to the Design System?

@nicktitchmarsh For now, as an interim fix, opening on focus is probably the best solution (if a wee bit obnoxious, as it covers UI the user might want to read).

[v99rly]

@tempertemper @nicktitchmarsh Martin is right, we are working on a moving away from hover-to-trigger-things. Its not eh accessibility roadmap for FYQ3 so will be starting work on it around March/April.

[mkrds]

FE-5569

[Parsium]

@tempertemper @v99rly @nicktitchmarsh

Hi everyone 👋🏼

We have taken a brief look at this and it seems this problem is more to do with responding to an onclick event, as @JinCoreana suggested, rather than the dropdown options being shown when the parent button is focused, as we intentionally removed the ability to do the latter in FE-5188, as Design System labelled this as incorrect behaviour.

This is because a user using voice control would just click on the parent button (triggering onclick), rather than hovering over it and then clicking with a physical mouse (onmouseenter followed by onclick).

We have updated the ticket to show this.

[carbonci]

:tada: This issue has been resolved in version 115.0.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: