Sage / carbon

Carbon by Sage | ReactJS UI Component Library
https://carbon.sage.com
Apache License 2.0
278 stars 86 forks source link

Return focus on the button which opened Confirm modal #6870

Closed foxyd-sage closed 6 days ago

foxyd-sage commented 3 months ago

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

Parsium commented 3 months ago

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 commented 3 months ago

FE-6728

DipperTheDan commented 3 months ago

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

carbonci commented 6 days ago

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

The release is available on:

Your semantic-release bot :package::rocket: