[UEPR-483] "Choose a Sprite" and "Choose a Backdrop" keyboard accessibility by kbangelov · Pull Request #433 · scratchfoundation/scratch-editor

kbangelov · 2026-02-03T14:18:52Z

Resolves

https://scratchfoundation.atlassian.net/browse/UEPR-483

Proposed Changes

Adds keyboard navigation logic.
UI bug: tooltips don't refresh in case of first open or shift+tab-ing back to the menu.

Reason for Changes

Part of accessibility initiative for Scratch.

…e on hover

packages/scratch-gui/src/hooks/use-action-menu-navigation.js

packages/scratch-gui/test/integration/sounds.test.js

packages/scratch-gui/src/components/action-menu/action-menu.jsx

… automatically

packages/scratch-gui/src/components/action-menu/action-menu.jsx

packages/scratch-gui/test/integration/sounds.test.js

packages/scratch-gui/src/components/action-menu/action-menu.jsx

kbangelov · 2026-02-26T08:42:14Z

The latest commit fixes the following 3 bugs that existed:

Escape used to not show the tooltip for the core element
if we selected a sprite from inside the menu, it showed a double tooltip on the way back
clicking escape on the tooltip selector library used to also close the action menu on the way back

What I did was remove onBlur logic and replace it in the following way - onBlur unites a few of the following cases:

clicking somewhere else (mousedown works now, unlike touchstart)
we were also already handling tab
the one blur motion we don't handle because we don't want to is after clicking on a menu option that takes us to library or file upload, where we now don't close the menu, which avoids most (hopefully all) bugs.

KManolov3

Left a few minor comments, but otherwise the behavior looks very smooth to me now! 🙌
There's a lot of logic "under the hood" which may end up being finicky, but hopefully this doesn't end up getting changed very often.

KManolov3 · 2026-02-26T11:17:50Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

+        } else if (e.key === KEY.TAB) {
+            setIsExpanded(false);
+            focusItem(buttonRef.current);
+        } else if (e.key === KEY.ESCAPE) {


I see some possibly unintended behavior when clicking ESCAPE, after which attempting to TAB- I need to TAB twice for something to happen. It's more of a corner case, but might be worth fixing if it isn't too hard. Otherwise I am fine with leaving as is for now.

Hmm, it seems to be another issue that appears on firefox but not chrome. Upon reconsideration, I am not sure if Escape behavior is something we want at all here. I mean there are other intuitive ways to focus away as a keyboard or mouse user, such as tab or clicking outside of the menu. What do you think?

There is the "we want to be able to focus the core option" argument but the bottom one already duplicates that behavior on every use of action menu.

A compromise would be "focus on the main button on escape but keep the menu open, since we can still enter it with arrows". Collapsing seems a little unnatural to me now.

packages/scratch-gui/src/components/action-menu/action-menu.jsx

KManolov3 · 2026-02-26T11:31:45Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

+        }), []
+    );
+
+    const handleItemMouseEnter = useCallback(index => () => {


Can you leave a comment why this is needed?

packages/scratch-gui/src/components/action-menu/action-menu.jsx

KManolov3 · 2026-03-05T11:53:04Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

@@ -222,12 +196,10 @@ const ActionMenu = ({

                            const handleClick = useCallback(e => {


Having a useCallback inside of a map is an antipattern - https://react.dev/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level. We should be able to extract this on top level.

adzhindzhi

Looks good to me! 🙌

adzhindzhi · 2026-03-10T15:26:59Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

+            setTimeout(() => {
+                const focusedElement = document.activeElement;
+                focusedElement.blur();
+                focusItem(focusedElement);
+            }, CLOSE_DELAY * 1.5);


nitpick: We could probably extract this into a function, since we use the same logic twice?

KManolov3 · 2026-03-11T09:20:39Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

+            const focusedElement = document.activeElement;
+            focusedElement.blur();
+            focusItem(focusedElement);
+        }, CLOSE_DELAY * 1.5);


1.5 is a magic constant. Why 1.5 exactly - can we add a comment?

packages/scratch-gui/src/components/action-menu/action-menu.jsx

KManolov3 · 2026-03-11T09:32:32Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

+        }, CLOSE_DELAY * 1.5);
+    }, []);
+
+    useEffect(() => {


Can we add comments in what usecases the different useEffects will be relevant

…uepr-483-choose-a-sprite-and-backdrop-accessibility

KManolov3 · 2026-03-12T13:54:35Z

packages/scratch-gui/src/components/action-menu/action-menu.jsx

            focusItem(focusedElement);
-        }, CLOSE_DELAY * 1.5);
-    }, []);
+        }, 500);


500 is also a magic constant 😅 I think it was a bit better when it was connected with the CLOSE_DELAY. But we can update this later.

kbangelov added 3 commits February 2, 2026 15:22

chore: rewrote action menu and added hook to handle navigation

cacb33e

chore: completed refocus on subelement logic and focus background lik…

4791d3b

…e on hover

chore: jsdoc and refactoring

fb66c83

kbangelov requested a review from a team as a code owner February 3, 2026 14:18

kbangelov requested review from KManolov3 and adzhindzhi February 3, 2026 14:24

kbangelov added 5 commits February 5, 2026 18:06

chore: fixed focus + hover bug and updated integration test

0c94fba

chore: brought back old test

f25eb2b

chore: test fix

e80ff2f

chore: fix the test by selecting editor

489159e

chore: made sound test work again

a8c4cad

adzhindzhi changed the base branch from develop to release/accessibility-improvements February 6, 2026 09:27

chore: fixed shift + tag bug artificially

bf0c57f

kbangelov force-pushed the release/accessibility-improvements branch 2 times, most recently from e37597f to f2902ce Compare February 13, 2026 09:00

kbangelov changed the base branch from release/accessibility-improvements to release/UEPR-297-accessibility-improvements February 13, 2026 10:10

adzhindzhi reviewed Feb 13, 2026

View reviewed changes

packages/scratch-gui/src/hooks/use-action-menu-navigation.js Outdated Show resolved Hide resolved

kbangelov added 2 commits February 16, 2026 12:58

chore: refactoring logic back inside action menu

71d9e63

chore: removed problem-causing onBlur

a495352

kbangelov requested a review from adzhindzhi February 16, 2026 11:20

chore: remove unnecessary code

8078f05

adzhindzhi reviewed Feb 16, 2026

View reviewed changes

kbangelov added 2 commits February 16, 2026 18:43

chore: addressed comments

d21a2bb

chore: switched up the UX for the menu - doesn't focus on inside item…

cd20b7d

… automatically

kbangelov requested a review from adzhindzhi February 17, 2026 11:00

adzhindzhi reviewed Feb 17, 2026

View reviewed changes

kbangelov added 2 commits February 18, 2026 12:32

chore: brought back old test

99efc85

chore: addressed comments

aeb9212

kbangelov requested a review from adzhindzhi February 18, 2026 10:55

adzhindzhi reviewed Feb 18, 2026

View reviewed changes

packages/scratch-gui/src/components/action-menu/action-menu.jsx Show resolved Hide resolved

kbangelov added 2 commits February 24, 2026 16:26

chore: removed console log

7d0fe37

chore: fix bugs related to tooltips and menu opening

8005b85

kbangelov requested a review from adzhindzhi February 26, 2026 08:42

chore: fix linter and add comment

8ba9189

KManolov3 approved these changes Feb 26, 2026

View reviewed changes

chore: refactored keyboard logic to focus core item

5ed2d84

kbangelov requested a review from KManolov3 February 27, 2026 09:00

kbangelov added 2 commits February 27, 2026 12:56

chore: refactored logic to remain in menu after click

da81941

chore: delete console.log

2061f17

KManolov3 reviewed Feb 27, 2026

View reviewed changes

packages/scratch-gui/src/components/action-menu/action-menu.jsx Outdated Show resolved Hide resolved

packages/scratch-gui/src/components/action-menu/action-menu.jsx Outdated Show resolved Hide resolved

chore: collapse menu on click

fad4c36

KManolov3 reviewed Mar 5, 2026

View reviewed changes

kbangelov added 6 commits March 9, 2026 09:08

chore: extracted hook to top level

84a8868

chore: fixed enter on root button

d362a1c

chore: made click refocus on core button

8b3beb7

chore: remove console log

58e2e71

chore: add comment to clarify need for timeout

949863a

chore: refocus on chosen element upon click/enter

a574ba7

kbangelov requested a review from KManolov3 March 10, 2026 11:46

adzhindzhi approved these changes Mar 10, 2026

View reviewed changes

chore: extracted function for refocusing active element

f300150

KManolov3 approved these changes Mar 11, 2026

View reviewed changes

chore: clarified code

98187e2

kbangelov requested a review from KManolov3 March 12, 2026 10:38

kbangelov added 2 commits March 12, 2026 13:25

chore: webpack-cli install

3f2aa59

Merge branch 'release/UEPR-297-accessibility-improvements' into task/…

ec1e274

…uepr-483-choose-a-sprite-and-backdrop-accessibility

KManolov3 reviewed Mar 12, 2026

View reviewed changes

KManolov3 merged commit 92fedf5 into scratchfoundation:release/UEPR-297-accessibility-improvements Mar 12, 2026
6 checks passed

github-actions bot locked and limited conversation to collaborators Mar 12, 2026

		@@ -222,12 +196,10 @@ const ActionMenu = ({

		const handleClick = useCallback(e => {

Conversation

kbangelov commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolves

Proposed Changes

Reason for Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kbangelov commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KManolov3 left a comment

Choose a reason for hiding this comment

Uh oh!

KManolov3 Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

kbangelov Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KManolov3 Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KManolov3 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

adzhindzhi left a comment

Choose a reason for hiding this comment

Uh oh!

adzhindzhi Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

KManolov3 Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KManolov3 Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

KManolov3 Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kbangelov commented Feb 3, 2026 •

edited

Loading

kbangelov commented Feb 26, 2026 •

edited

Loading

kbangelov Feb 27, 2026 •

edited

Loading