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.

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

Return focus on the button which opened Confirm modal #6870

Closed
1 task done
foxyd-sage opened this issue Jul 31, 2024 · 4 comments · Fixed by #6986
Closed
1 task done

Return focus on the button which opened Confirm modal #6870

foxyd-sage opened this issue Jul 31, 2024 · 4 comments · Fixed by #6986

Comments

@foxyd-sage
Copy link

foxyd-sage commented Jul 31, 2024

Description

I using this Confirm modal component https://carbon.sage.com/?path=/docs/confirm--docs.
When I open the modal and clicked the cancel or confirm buttons returns focus to the document body, not on the button which opening this modal.
So, when I closing the Confirm modal, I expecting that focus will be on the button which openning this modal.
This contradicts the guidelines recommended for Modals

Reproduction

https://stackblitz.com/edit/confirm-focus-on-close?file=src%2FApp.tsx

Steps to reproduce

Better to use Tab and Space for reproducing.

  1. Click to "Open Confirm" button.
  2. In the Confirm modal click Cancel button.
  3. Use Tab on the keyboard to focus on the "Open Confirm" button.

JIRA ticket numbers (Sage only)

SBS-103263

Suggested solution

No response

Carbon version

138.1.0

Design tokens version

4.34.0

Relevant browsers

Chrome

Relevant OSs

Windows

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.
@foxyd-sage foxyd-sage added Bug triage Triage Required labels Jul 31, 2024
@Parsium
Copy link
Contributor

Parsium commented Jul 31, 2024

It appears there is a consistency issue with refocusing the opening button upon closing the modal. While consumers can programmatically set focus when the Escape key is pressed, clicking the cancel or confirm buttons returns focus to the document body rather than the opening button. We should introduce a fix for this behaviour ourselves or provide a mechanism for consumers to do so, for all the modal-based components in Carbon.

@Parsium
Copy link
Contributor

Parsium commented Jul 31, 2024

FE-6728

@Parsium Parsium added On Backlog Squad Nebula and removed triage Triage Required labels Jul 31, 2024
@DipperTheDan
Copy link
Contributor

If anyone requires the video demonstration that was attached to this issue, please drop me a message and I can share it with you.

tomdavies73 added a commit that referenced this issue Oct 16, 2024
…cused on close

Ensures the element which opens `Modal` or a fullscreen `Menu` is focused when the
respective component closes.

fix #6870
carbonci pushed a commit that referenced this issue Oct 24, 2024
### [144.1.1](v144.1.0...v144.1.1) (2024-10-24)

### Bug Fixes

* **menu-full-screen, modal:** ensure the call to action element is focused on close ([0ca3949](0ca3949)), closes [#6870](#6870)
@carbonci
Copy link
Collaborator

🎉 This issue has been resolved in version 144.1.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

4 participants