Skip to content

Commit

Permalink
WB-1638.1: Fix clickable behavior on IconButton (#2131)
Browse files Browse the repository at this point in the history
## Summary:

First part in a series of fixes to Popover.

I recently removed `ClickableBehavior` from `IconButton` because some APIs have
improved in the last years making it easier to implement the same behavior
without the need of `ClickableBehavior`.

Turns out that I missed a few things, and this PR fixes them:

- Adds keyboard handlers to `IconButton` so that the click event can be
triggered the same way with `Enter` and `Space` keys. By not doing this, it was causing that the Popover was being immediately re-opened if the user pressed `Enter` on the close button.

- Prevents the button from displaying the pressed state after the user has
pressed the button with a mobile device (sticky active state).

Issue: WB-1638

## Test plan:

### 1. Normalized `Enter` and `Space` behavior:

In desktop, verify that the button can be pressed with `Enter` and `Space` keys
and that in both cases the button triggers the `onClick` callback only on key up.

Verify that a Popover is not immediately re-opened if the user presses `Enter` on the close button.

BEFORE

https://github.com/Khan/wonder-blocks/assets/843075/5585996a-dcab-4c5d-b89f-a7e203ca5df7

AFTER

https://github.com/Khan/wonder-blocks/assets/843075/0e7d165f-954d-4c24-beac-688df11f05d6

### 2. Prevent sticky active state on mobile devices:

In mobile, verify that the button doesn't display the pressed state after the
user has pressed the button.

BEFORE

https://github.com/Khan/wonder-blocks/assets/843075/d381f1a9-3401-4e9e-9070-e7f2c1af1bec

AFTER


https://github.com/Khan/wonder-blocks/assets/843075/ab5e682e-7483-403c-8c74-cacbf490c09f

Author: jandrade

Reviewers: jeresig

Required Reviewers:

Approved By: jeresig

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot

Pull Request URL: #2131
  • Loading branch information
jandrade authored Dec 1, 2023
1 parent d2f6345 commit 9092363
Show file tree
Hide file tree
Showing 6 changed files with 1,068 additions and 1 deletion.
6 changes: 6 additions & 0 deletions .changeset/rich-bottles-hope.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@khanacademy/wonder-blocks-icon-button": patch
---

Fixes keyboard behavior on IconButton:
- Allows triggering onClick when Enter is pressed. - Fixes the active state from not being sticky on mobile devices.
Loading

0 comments on commit 9092363

Please sign in to comment.