[UEPR-445] Ensure topbar is navigable via tab navigation #403

kbangelov · 2025-12-19T14:15:32Z

Should Resolve UEPR-445 Soon, NOT TO BE MERGED YET

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

Proposed Changes

Added tabIndex=0 to the elements in nav bar so they can be focused with tab
Started (haven't finished) working on submenu/dropdown accessibility and navigation with arrow keys and more. (The entire intention of this PR is to discuss the current logic in settings -> language/theme, the rest is not implemented yet) Reviewing should start from menu-path-context.jsx

Achieved that by passing down props such as ref (currently titled focusedRef and other related props in a lot of places which might be a horrible name, will change it to something like selfRef) and keeping an active chain of references to the html items in an array in the Menu Context, so they can be focused with .current.focus(). The way I aim to resolve this is by storing the basic props and functions of each menu in that context such as ref, onOpen, onClose, submenuOptions, depth of menu, etc., so that we won't be needing all that passing down of props.
About the things that still don't function properly, I am most likely aware so I mostly ask to discuss the idea from above. I will make sure to review the code myself when I have completed the refactoring and all of the necessary functionalities have been tested successfully (including with a Screen Reader).

To be discussed additionally

Where should the context file be stored? Can't seem to find the right directory or any other similar contexts in code.
Where should my Context wrap an element? Whole page?
Is the syntax used in my context consistent with the project?
Are the rest of the buttons that are currently disabled (Share, See Project Page and the 2 in top right) part of another repo, assuming that they are not part of the current task?
focusedRef logic will probably end up being removed (as a prop at least), still I imagine that I should make a custom PropType containing {current} instead of the forbidden PropTypes.object I am using if it wasn't getting removed?
I have also replaced isOpenMenu logic with custom such from the Context. Should I end up removing that entirely from code?

I will leave some comments asking more or less the same things and more.

Intended future changes

Bring out some of that logic that is obviously repeated multiple times in code, mainly the
handleKeyPress, handleKeyPressOpenMenu, handleMove, handleOnOpen, handleOnClose, setFocusedRef methods and whatever else turns out to be needed repeatedly in such menus.
Make it fully work as intended.

Copilot

Pull request overview

This PR implements keyboard navigation and accessibility improvements for the top navigation bar, enabling users to navigate menu items using Tab and arrow keys. The changes introduce a new context-based system for tracking open menus and managing focus states across nested menu hierarchies.

Key Changes:

Added tabIndex attributes and ARIA properties to make menu bar elements keyboard-navigable
Implemented arrow key navigation within dropdown menus (Settings, Language, Theme)
Created MenuRefContext to manage the state of open menus and focus tracking across the menu hierarchy

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/scratch-gui/src/components/context-menu/menu-path-context.jsx	New context provider for tracking open menu references and navigation state
packages/scratch-gui/src/components/menu-bar/settings-menu.jsx	Converted to class component with keyboard navigation handlers
packages/scratch-gui/src/components/menu-bar/language-menu.jsx	Added keyboard navigation with arrow keys and Enter/Escape handlers
packages/scratch-gui/src/components/menu-bar/theme-menu.jsx	Added keyboard navigation similar to language menu
packages/scratch-gui/src/components/menu/menu.jsx	Added accessibility props (focusedRef, aria attributes, keyboard handlers)
packages/scratch-gui/src/components/menu-bar/menu-bar.jsx	Added tabIndex and ARIA attributes to menu bar items for keyboard access
packages/scratch-gui/src/components/gui/gui.jsx	Wrapped MenuBar with MenuRefProvider context
packages/scratch-gui/src/containers/gui.jsx	Contains commented test code

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-19T14:28:25Z

packages/scratch-gui/src/containers/gui.jsx

 };

 GUI.defaultProps = {
+    // isTotallyNormal: true, - for testing only


Remove commented-out test code before merging. This appears to be temporary debugging code that should not be committed.

Suggested change

// isTotallyNormal: true, - for testing only

// Set to true only in specific testing scenarios.

Copilot · 2025-12-19T14:28:25Z

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

    expanded: PropTypes.bool,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    focusedRef: PropTypes.object,


Using PropTypes.object is discouraged. Consider using PropTypes.shape({ current: PropTypes.instanceOf(Element) }) for ref objects, or create a custom PropType validator if this will remain in the code.

Suggested change

focusedRef: PropTypes.object,

focusedRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),

Copilot · 2025-12-19T14:28:25Z

packages/scratch-gui/src/components/menu-bar/theme-menu.jsx

    onClick: PropTypes.func,
-    theme: PropTypes.string
+    theme: PropTypes.string,
+    focusedRef: PropTypes.object,


Using PropTypes.object is discouraged. Consider using PropTypes.shape({ current: PropTypes.instanceOf(Element) }) for ref objects, or create a custom PropType validator.

Copilot · 2025-12-19T14:28:26Z

packages/scratch-gui/src/components/menu-bar/theme-menu.jsx

+        this.setState({focusedIndex: -1}, () => {
+            this.setFocusedRef(this.props.focusedRef);
+        });
+        closeThemeMenu();


This appears to call closeThemeMenu() directly instead of dispatching it. Based on the import, this should be this.props.onRequestClose() or the function should be dispatched. The current implementation will not update the Redux state correctly.

Suggested change

closeThemeMenu();

this.props.onRequestClose();

Copilot · 2025-12-19T14:28:26Z

packages/scratch-gui/src/components/menu-bar/language-menu.jsx

+        this.setState({focusedIndex: -1}, () => {
+            this.setFocusedRef(this.props.focusedRef);
+        });
+        closeLanguageMenu();


This appears to call closeLanguageMenu() directly instead of dispatching it. This should likely use the Redux dispatch mechanism or call an appropriate prop function to properly update state.

Suggested change

closeLanguageMenu();

this.props.dispatch(closeLanguageMenu());

Copilot · 2025-12-19T14:28:26Z

packages/scratch-gui/src/components/menu-bar/language-menu.jsx


 LanguageMenu.propTypes = {
    currentLocale: PropTypes.string,
+    focusedRef: PropTypes.object,


Using PropTypes.object is discouraged. Consider using PropTypes.shape({ current: PropTypes.instanceOf(Element) }) for ref objects, or create a custom PropType validator.

Suggested change

focusedRef: PropTypes.object,

focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),

Copilot · 2025-12-19T14:28:26Z

packages/scratch-gui/src/components/menu-bar/settings-menu.jsx

+        this.state = {focusedIndex: -1};
+        this.languageRef = React.createRef();
+        this.themeRef = React.createRef();
+        // harcoded logic because of only two options


Corrected spelling of 'harcoded' to 'hardcoded'.

Suggested change

// harcoded logic because of only two options

// hardcoded logic because of only two options

Copilot · 2025-12-19T14:28:27Z

packages/scratch-gui/src/components/context-menu/menu-path-context.jsx

+    // printChain () {
+    //     console.log(this.state.openRefs);
+    // }


Remove commented-out debugging code. The printChain method and its reference in the context value should be deleted before merging.

Copilot · 2025-12-19T14:28:27Z

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

                            <img
+                                role="button"
+                                aria-label="Go Home"
+                                tabIndex="0"


Use numeric value instead of string for tabIndex. Change tabIndex=\"0\" to tabIndex={0} for consistency with React conventions.

Suggested change

tabIndex="0"

tabIndex={0}

kbangelov added 2 commits December 15, 2025 11:46

chore: initial commit - making elements focusable and react to enter

a2f0390

feat: added some accessability with arrow logic

06d2d62

kbangelov requested a review from a team as a code owner December 19, 2025 14:15

kbangelov requested review from KManolov3 and adzhindzhi December 19, 2025 14:23

KManolov3 requested a review from cwillisf December 19, 2025 14:26

KManolov3 marked this pull request as draft December 19, 2025 14:26

KManolov3 requested a review from Copilot December 19, 2025 14:27

Copilot AI reviewed Dec 19, 2025

View reviewed changes

chore: addressed copilot stuff

34b18df

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[UEPR-445] Ensure topbar is navigable via tab navigation #403

[UEPR-445] Ensure topbar is navigable via tab navigation #403

Uh oh!

kbangelov commented Dec 19, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	// isTotallyNormal: true, - for testing only
	// Set to true only in specific testing scenarios.

	focusedRef: PropTypes.object,
	focusedRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),

	closeLanguageMenu();
	this.props.dispatch(closeLanguageMenu());

	focusedRef: PropTypes.object,
	focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),

	// harcoded logic because of only two options
	// hardcoded logic because of only two options

[UEPR-445] Ensure topbar is navigable via tab navigation #403

Are you sure you want to change the base?

[UEPR-445] Ensure topbar is navigable via tab navigation #403

Uh oh!

Conversation

kbangelov commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Should Resolve UEPR-445 Soon, NOT TO BE MERGED YET

Proposed Changes

To be discussed additionally

Intended future changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kbangelov commented Dec 19, 2025 •

edited

Loading