Auto focus on cancel on confirmation modal #7275
Conversation
roboquat
added
release-note
team: webapp
There was a problem hiding this comment.
@jankeromnes could you take a look at this since you added the project removal action in #6185? Maybe I'm missing something but deleting a workspace works as expecrted. Also, what do you think of this change? 🙂
| @@ -45,7 +45,7 @@ export default function ConfirmationModal(props: { | |||
| } | |||
|
|
|||
| const buttons = [ | |||
| <button className="secondary" onClick={props.onClose}>Cancel</button>, | |||
| <button className="secondary" onClick={props.onClose} autoFocus>Cancel</button>, | |||
There was a problem hiding this comment.
issue: This still removes the project when pressing enter. 🤷
There was a problem hiding this comment.
Resolved with dcf0b6d. See #7275 (comment).
|
/werft run 👍 started the job as gitpod-build-gt-autofocus-on-cancel.1 |
|
@gtsiolis I've added focus inspection to the |
|
Thanks @JanKoehnlein! UX works as expected. ✔️
Yes, we do! Currently only buttons have proper focus states and some elements are missing focus state like the checkboxes, etc Taking a bias-for-action and merging this for now as it looks like a good MVC (minimum viable change) iteration. Looping in @jankeromnes in case there's anything else we could fix around this change in a follow up PR. 🏓 |
|
Ah, we still need a PR approval here. ⏱️ |
|
/approve |
|
/approve no-issue |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: JanKoehnlein Associated issue requirement bypassed by: JanKoehnlein The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
Je vous remercie, @JanKoehnlein! 🏀 |
|
Je t'en pris, @gtsiolis! 🏀 |
roboquat
added
deployed: webapp
Description
This will add auto focus on the Cancel button for the confirmation modal to avoid leading users to accidentally performing destructive actions like removing a project or deleting a workspace.
How to test
Release Notes