Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility: Screen reader not prioritising multi-action button drop down buttons when shown - Serious #7005

Closed
1 task done
adamfsage opened this issue Oct 9, 2024 · 2 comments · Fixed by #7026
Closed
1 task done

Accessibility: Screen reader not prioritising multi-action button drop down buttons when shown - Serious #7005

adamfsage opened this issue Oct 9, 2024 · 2 comments · Fixed by #7026
Labels
Bug On Backlog released Squad Rivia

Comments

@adamfsage
Copy link

Description

When using a screenreader on Mac, after clicking on a multiaction button and moving forward it will go through the rest of the DOM first before reading the drop down buttons

Reproduction

https://carbon.sage.com/?path=/story/multi-action-button--button-types

Steps to reproduce

Start screenreader and open first drop down, then cycle through elements. Should look like this

Screen.Recording.2024-10-09.at.11.10.12.mov

JIRA ticket numbers (Sage only)

SBS-109907

Suggested solution

It looks like using absolute styling on this might be causing ordering issues in the DOM, further more it looks the dropdown options seems to appear in the HTML much further down than the initial button. Making it so that these are together should resolve this

Carbon version

142.13.5

Design tokens version

4.29.0

Relevant browsers

Chrome, Safari

Relevant OSs

MacOS

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.
@adamfsage adamfsage added Bug triage Triage Required labels Oct 9, 2024
@tomdavies73
Copy link
Contributor

FE-6859

@tomdavies73 tomdavies73 added On Backlog Squad Rivia and removed triage Triage Required labels Oct 15, 2024
nuria1110 added a commit that referenced this issue Oct 18, 2024
@nuria1110
fix(multi-action-button, split-button): ensure child button are acces…
d97c823 
…sible

Fixes issue where when clicking on the toggle button to open the menu and then pressing Tab, focus
would move away from the button onto the next focusable element on the page, while maintaining
the menu open. This would also occur when using Control+Option+Space with voiceOver to open the
menu. When the menu is opened using these methods, Tab should now move focus onto first menu child.

fix #7005
nuria1110 added a commit that referenced this issue Oct 21, 2024
@nuria1110
fix(multi-action-button, split-button): ensure child button are acces…
78f5e07 
…sible

Fixes issue where when clicking on the toggle button to open the menu and then pressing Tab, focus
would move away from the button onto the next focusable element on the page, while maintaining
the menu open. This would also occur when using Control+Option+Space with voiceOver to open the
menu. When the menu is opened using these methods, Tab should now move focus onto first menu child.

fix #7005
nuria1110 added a commit that referenced this issue Oct 21, 2024
@nuria1110
fix(multi-action-button, split-button): ensure child button are acces…
9a454fd 
…sible

Fixes issue where when clicking on the toggle button to open the menu and then pressing Tab, focus
would move away from the button onto the next focusable element on the page, while maintaining
the menu open. This would also occur when using Control+Option+Space with voiceOver to open the
menu. When the menu is opened using these methods, Tab should now move focus onto first menu child.

fix #7005
nuria1110 added a commit that referenced this issue Oct 21, 2024
@nuria1110
fix(multi-action-button, split-button): ensure child button are acces…
a3e2302 
…sible

Fixes issue where when clicking on the toggle button to open the menu and then pressing Tab, focus
would move away from the button onto the next focusable element on the page, while maintaining
the menu open. This would also occur when using Control+Option+Space with voiceOver to open the
menu. When the menu is opened using these methods, Tab should now move focus onto first menu child.

fix #7005
@nuria1110 nuria1110 mentioned this issue Oct 24, 2024
Merged
14 tasks
carbonci pushed a commit that referenced this issue Oct 28, 2024
@semantic-release-bot @carbonci
chore(release): 144.2.1
0c36b89 
### [144.2.1](v144.2.0...v144.2.1) (2024-10-28)

### Bug Fixes

* **multi-action-button, split-button:** ensure child button are accessible ([a3e2302](a3e2302)), closes [#7005](#7005)
@carbonci
Copy link
Collaborator

🎉 This issue has been resolved in version 144.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@adamfsage adamfsage mentioned this issue Nov 4, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug On Backlog released Squad Rivia
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(multi-action-button, split-button): ensure child buttons are accessible Sage/carbon
3 participants
@carbonci @tomdavies73 @adamfsage