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

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+
+export const MenuRefContext = React.createContext(null);
+
+export class MenuRefProvider extends React.Component {
+    constructor (props) {
+        super(props);
+
+        this.state = {
+            refStack: []
+        };
+
+        bindAll(this, [
+            'push',
+            'pop',
+            'cut',
+            'clear',
+            'isTopMenu',
+            'isOpenMenu'
+        ]);
+    }
+
+    push (ref, depth) {
+        if (depth <= this.state.refStack.length) {
+            this.cut(this.state.refStack[depth - 1]);
+        }
+
+        this.setState(prev => ({
+            refStack: [...prev.refStack, ref]
+        }));
+    }
+
+    pop () {
+        this.setState(prev => ({
+            stack: prev.refStack.slice(0, prev.refStack.length - 1)
+        }));
+    }
+
+    cut (ref) {
+        this.setState(prev => {
+            const refs = prev.refStack;
+            const index = refs.indexOf(ref);
+
+            if (index === -1) return {refStack: refs};
+
+            return {
+                refStack: refs.slice(0, index)
+            };
+        });
+    }
+
+    clear () {
+        this.setState({refStack: []});
+    }
+
+    isTopMenu (ref) {
+        const {refStack} = this.state;
+        return refStack.length > 0 && refStack[refStack.length - 1] === ref;
+    }
+
+    isOpenMenu (ref) {
+        return this.state.refStack.includes(ref);
+    }
+
+    render () {
+        const value = {
+            refStack: this.state.refStack,
+            push: this.push,
+            pop: this.pop,
+            cut: this.cut,
+            clear: this.clear,
+            isTopMenu: this.isTopMenu,
+            isOpenMenu: this.isOpenMenu
+        };
+
+        return (
+            <MenuRefContext.Provider value={value}>
+                {this.props.children}
+            </MenuRefContext.Provider>
+        );
+    }
+}
+
+MenuRefProvider.propTypes = {
+    children: PropTypes.node
+};

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

@@ -46,6 +46,7 @@ import DebugModal from '../debug-modal/debug-modal.jsx';
 import {setPlatform} from '../../reducers/platform.js';
 import {setTheme} from '../../reducers/settings.js';
 import {PLATFORM} from '../../lib/platform.js';
+import {MenuRefProvider} from '../context-menu/menu-ref-context.jsx';
 
 // Cache this value to only retrieve it once the first time.
 // Assume that it doesn't change for a session.
@@ -272,47 +273,50 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                {!menuBarHidden && <MenuBar
-                    ariaRole="banner"
-                    ariaLabel="Menu topbar"
-                    accountNavOpen={accountNavOpen}
-                    authorId={authorId}
-                    authorThumbnailUrl={authorThumbnailUrl}
-                    authorUsername={authorUsername}
-                    authorAvatarBadge={authorAvatarBadge}
-                    canChangeLanguage={canChangeLanguage}
-                    canChangeColorMode={canChangeColorMode}
-                    canChangeTheme={canChangeTheme}
-                    canCreateCopy={canCreateCopy}
-                    canCreateNew={canCreateNew}
-                    canEditTitle={canEditTitle}
-                    canManageFiles={canManageFiles}
-                    canRemix={canRemix}
-                    canSave={canSave}
-                    canShare={canShare}
-                    className={styles.menuBarPosition}
-                    enableCommunity={enableCommunity}
-                    hasActiveMembership={hasActiveMembership}
-                    isShared={isShared}
-                    isTotallyNormal={isTotallyNormal}
-                    logo={logo}
-                    renderLogin={renderLogin}
-                    showComingSoon={showComingSoon}
-                    onClickAbout={onClickAbout}
-                    onClickAccountNav={onClickAccountNav}
-                    onClickLogo={onClickLogo}
-                    onCloseAccountNav={onCloseAccountNav}
-                    onLogOut={onLogOut}
-                    onOpenRegistration={onOpenRegistration}
-                    onProjectTelemetryEvent={onProjectTelemetryEvent}
-                    onSeeCommunity={onSeeCommunity}
-                    onShare={onShare}
-                    onStartSelectingFileUpload={onStartSelectingFileUpload}
-                    onToggleLoginOpen={onToggleLoginOpen}
-                    userOwnsProject={userOwnsProject}
-                    username={username}
-                    accountMenuOptions={accountMenuOptions}
-                />}
+                {!menuBarHidden && <MenuRefProvider>
+                    <MenuBar
+                        ariaRole="banner"
+                        ariaLabel="Menu topbar"
+                        accountNavOpen={accountNavOpen}
+                        authorId={authorId}
+                        authorThumbnailUrl={authorThumbnailUrl}
+                        authorUsername={authorUsername}
+                        authorAvatarBadge={authorAvatarBadge}
+                        canChangeLanguage={canChangeLanguage}
+                        canChangeColorMode={canChangeColorMode}
+                        canChangeTheme={canChangeTheme}
+                        canCreateCopy={canCreateCopy}
+                        canCreateNew={canCreateNew}
+                        canEditTitle={canEditTitle}
+                        canManageFiles={canManageFiles}
+                        canRemix={canRemix}
+                        canSave={canSave}
+                        canShare={canShare}
+                        className={styles.menuBarPosition}
+                        enableCommunity={enableCommunity}
+                        hasActiveMembership={hasActiveMembership}
+                        isShared={isShared}
+                        isTotallyNormal={isTotallyNormal}
+                        logo={logo}
+                        renderLogin={renderLogin}
+                        showComingSoon={showComingSoon}
+                        onClickAbout={onClickAbout}
+                        onClickAccountNav={onClickAccountNav}
+                        onClickLogo={onClickLogo}
+                        onCloseAccountNav={onCloseAccountNav}
+                        onLogOut={onLogOut}
+                        onOpenRegistration={onOpenRegistration}
+                        onProjectTelemetryEvent={onProjectTelemetryEvent}
+                        onSeeCommunity={onSeeCommunity}
+                        onShare={onShare}
+                        onStartSelectingFileUpload={onStartSelectingFileUpload}
+                        onToggleLoginOpen={onToggleLoginOpen}
+                        userOwnsProject={userOwnsProject}
+                        username={username}
+                        accountMenuOptions={accountMenuOptions}
+                    />
+                </MenuRefProvider>
+                }
                 <Box className={classNames(boxStyles, styles.flexWrapper)}>
                     <Box
                         role="main"

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

@@ -0,0 +1,129 @@
+import {MenuRefContext} from '../context-menu/menu-ref-context';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+
+/* Subclasses must implement (some optionally):
+_______________________________________________
+render
+define this.itemRefs
+add onKeyDown={this.handleKeyPress}
+and onParentKeyPress={this.handleKeyPressOpenMenu} for MenuItem elements
+
+and replace isOpenMenu-like props with this.isExpanded() checks
+
+They should also receive:
+______________________
+onOpen,
+onClose,
+menuRef,
+depth
+*/
+export class BaseMenu extends React.PureComponent {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleKeyPress',
+            'handleKeyPressOpenMenu',
+            'handleMove',
+            'handleOnOpen',
+            'handleOnClose',
+            'refocusRef',
+            'refocusItemByIndex',
+            'isExpanded'
+        ]);
+
+        this.state = {focusedIndex: -1};
+        this.menuRef = props.menuRef;
+    }
+
+    static contextType = MenuRefContext;
+
+    refocusRef (ref) {
+        if (ref && ref.current) {
+            ref.current.focus();
+        }
+    }
+
+    refocusItemByIndex (index) {
+        this.setState({focusedIndex: index}, () => {
+            this.refocusRef(this.itemRefs[index]);
+        });
+    }
+
+    handleKeyPress (e) {
+        if (this.props.depth === 1) {
+            if (e.key === 'Tab') {
+                this.handleOnClose();
+                this.context.clear();
+            }
+        }
+
+        if (this.context.isTopMenu(this.menuRef)) {
+            this.handleKeyPressOpenMenu(e);
+        } else if (!this.isExpanded() && (e.key === ' ' || (e.key === 'ArrowRight' && this.props.depth !== 1))) {
+            e.preventDefault();
+            this.handleOnOpen();
+        }
+    }
+
+    handleKeyPressOpenMenu (e) {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.handleMove(1);
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.handleMove(-1);
+        }
+        if (e.key === 'Enter' && this.props.clearOnItemSelect) {
+            this.context.clear();
+        }
+        if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            e.preventDefault();
+            this.handleOnClose();
+        }
+    }
+
+    handleOnOpen () {
+        if (this.context.isOpenMenu(this.menuRef)) return;
+
+        this.props.onOpen();
+        this.refocusItemByIndex(0);
+
+        this.context.push(this.menuRef, this.props.depth);
+    }
+
+    handleMove (direction) {
+        const newIndex = (this.state.focusedIndex + direction + this.itemRefs.length) % this.itemRefs.length;
+        this.setState({focusedIndex: newIndex}, () => {
+            this.refocusRef(this.itemRefs[newIndex]);
+        });
+    }
+
+    handleOnClose () {
+        this.context.cut(this.menuRef);
+        this.setState({focusedIndex: -1}, () => {
+            this.refocusRef(this.menuRef);
+        });
+
+        this.props.onClose();
+    }
+
+    isExpanded () {
+        return this.context.isOpenMenu(this.menuRef);
+    }
+}
+
+BaseMenu.propTypes = {
+    menuRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    depth: PropTypes.number,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func,
+    clearOnItemSelect: PropTypes.bool
+};
+
+BaseMenu.defaultProps = {
+    onClose: () => {},
+    clearOnItemSelect: false
+};