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

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

@@ -46,63 +46,64 @@ 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 '../../contexts/menu-ref-context.jsx';
 import {ModalFocusProvider} from '../../contexts/modal-focus-context.jsx';
 
 const ariaMessages = defineMessages({
     menuBar: {
         id: 'gui.aria.menuBar',
         defaultMessage: 'Menu topbar',
-        description: 'ARIA label for the top menu bar'
+        description: 'accessibility label for the top menu bar'
     },
     editor: {
         id: 'gui.aria.editor',
         defaultMessage: 'Editor',
-        description: 'ARIA label for the main editor area'
+        description: 'accessibility label for the main editor area'
     },
     tabList: {
         id: 'gui.aria.tabList',
         defaultMessage: 'Tab list',
-        description: 'ARIA label for the editor tab list'
+        description: 'accessibility label for the editor tab list'
     },
     codePanel: {
         id: 'gui.aria.codePanel',
         defaultMessage: 'Code editor panel',
-        description: 'ARIA label for the code editor panel'
+        description: 'accessibility label for the code editor panel'
     },
     costumesPanel: {
         id: 'gui.aria.costumesPanel',
         defaultMessage: 'Costumes editor panel',
-        description: 'ARIA label for the costumes editor panel'
+        description: 'accessibility label for the costumes editor panel'
     },
     backdropsPanel: {
         id: 'gui.aria.backdropsPanel',
         defaultMessage: 'Backdrops editor panel',
-        description: 'ARIA label for the backdrops editor panel'
+        description: 'accessibility label for the backdrops editor panel'
     },
     soundsPanel: {
         id: 'gui.aria.soundsPanel',
         defaultMessage: 'Sounds editor panel',
-        description: 'ARIA label for the sounds editor panel'
+        description: 'accessibility label for the sounds editor panel'
     },
     backpack: {
         id: 'gui.aria.backpack',
         defaultMessage: 'Backpack',
-        description: 'ARIA label for the backpack'
+        description: 'accessibility label for the backpack'
     },
     stageAndTarget: {
         id: 'gui.aria.stageAndTarget',
         defaultMessage: 'Stage and target',
-        description: 'ARIA label for stage and target area'
+        description: 'accessibility label for stage and target area'
     },
     stage: {
         id: 'gui.aria.stage',
         defaultMessage: 'Stage',
-        description: 'ARIA label for the stage'
+        description: 'accessibility label for the stage'
     },
     targetPane: {
         id: 'gui.aria.targetPane',
         defaultMessage: 'Target pane',
-        description: 'ARIA label for the target pane'
+        description: 'accessibility label for the target pane'
     }
 });
 
@@ -114,7 +115,6 @@ const GUIComponent = props => {
     const intl = useIntl();
     const {
         accountMenuOptions,
-        accountNavOpen,
         activeTabIndex,
         alertsVisible,
         authorId,
@@ -162,8 +162,6 @@ const GUIComponent = props => {
         menuBarHidden,
         renderLogin,
         onClickAbout,
-        onClickAccountNav,
-        onCloseAccountNav,
         onLogOut,
         onOpenRegistration,
         onToggleLoginOpen,
@@ -332,47 +330,49 @@ const GUIComponent = props => {
                             onRequestClose={onRequestCloseBackdropLibrary}
                         />
                     ) : null}
-                    {!menuBarHidden && <MenuBar
-                        ariaRole="banner"
-                        ariaLabel={intl.formatMessage(ariaMessages.menuBar)}
-                        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}
-                    />}
+                    {/* TODO - in case of moving MenuRefProvider which seems likely,
+                    make sure to move it from tests as well */}
+                    {!menuBarHidden && <MenuRefProvider>
+                        <MenuBar
+                            ariaRole="banner"
+                            ariaLabel={intl.formatMessage(ariaMessages.menuBar)}
+                            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}
+                            onClickLogo={onClickLogo}
+                            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"
@@ -573,7 +573,6 @@ const GUIComponent = props => {
 };
 
 GUIComponent.propTypes = {
-    accountNavOpen: PropTypes.bool,
     accountMenuOptions: AccountMenuOptionsPropTypes,
     activeTabIndex: PropTypes.number,
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
@@ -620,9 +619,7 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
-    onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
-    onCloseAccountNav: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onLogOut: PropTypes.func,
     onNewSpriteClick: PropTypes.func,

packages/scratch-gui/src/components/menu-bar/about-menu.css

@@ -0,0 +1,5 @@
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}

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

@@ -0,0 +1,134 @@
+import React, {useCallback} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {useIntl, defineMessage} from 'react-intl';
+import {connect} from 'react-redux';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+import Button from '../button/button.jsx';
+import {MenuItem} from '../menu/menu.jsx';
+import useMenuNavigation from '../../hooks/use-menu-navigation.jsx';
+
+import stylesMenuBar from './menu-bar.css';
+import stylesAboutMenu from './about-menu.css';
+import aboutIcon from './icon--about.svg';
+
+const aboutMenuMessage = defineMessage({
+    id: 'gui.aria.aboutMenu',
+    defaultMessage: 'About menu',
+    description: 'accessibility label for About menu'
+});
+
+const AboutButton = props => {
+    const intl = useIntl();
+
+    return (<Button
+        className={classNames(stylesMenuBar.menuBarItem, stylesMenuBar.hoverable)}
+        iconClassName={stylesAboutMenu.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+        aria-label={intl.formatMessage(aboutMenuMessage)}
+    />);
+};
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
+const AboutMenu = ({
+    onClick,
+    isRtl,
+    depth
+}) => {
+    if (!onClick) {
+        // hide the button
+        return null;
+    }
+    if (typeof onClick === 'function') {
+        // make a button which calls a function
+        return <AboutButton onClick={onClick} />;
+    }
+
+    // assume it's an array of objects
+    // each item must have a 'title' FormattedMessage and a 'handleClick' function
+    // generate a menu with items for each object in the array
+
+    const intl = useIntl();
+
+    const {
+        menuRef,
+        isExpanded,
+        handleOnOpen,
+        handleOnClose,
+        handleKeyDown,
+        handleKeyDownOpenMenu
+    } = useMenuNavigation({
+        depth,
+        isRtl
+    });
+
+    const wrapAboutMenuCallback = useCallback(
+        callback => () => {
+            callback();
+            handleOnClose();
+        },
+        [handleOnClose]
+    );
+
+    return (
+        <button
+            className={classNames(stylesMenuBar.menuBarItem, stylesMenuBar.hoverable, {
+                [stylesMenuBar.active]: isExpanded()
+            })}
+            onClick={handleOnOpen}
+            onKeyDown={handleKeyDown}
+            aria-label={intl.formatMessage(aboutMenuMessage)}
+            aria-expanded={isExpanded()}
+            ref={menuRef}
+        >
+            <img
+                className={stylesAboutMenu.aboutIcon}
+                src={aboutIcon}
+            />
+            <MenuBarMenu
+                className={classNames(stylesMenuBar.menuBarMenu)}
+                open={isExpanded()}
+                place={isRtl ? 'right' : 'left'}
+                onRequestClose={handleOnClose}
+            >
+                {
+                    onClick.map(itemProps => (
+                        <MenuItem
+                            key={itemProps.title}
+                            onClick={wrapAboutMenuCallback(itemProps.onClick)}
+                            onParentKeyDown={handleKeyDownOpenMenu}
+                            isDataMenuItem
+                        >
+                            {itemProps.title}
+                        </MenuItem>
+                    ))
+                }
+            </MenuBarMenu>
+        </button>
+    );
+};
+
+AboutMenu.propTypes = {
+    isRtl: PropTypes.bool,
+    onClick: PropTypes.oneOfType([
+        PropTypes.func, // button mode: call this callback when the About button is clicked
+        PropTypes.arrayOf( // menu mode: list of items in the About menu
+            PropTypes.shape({
+                title: PropTypes.string, // text for the menu item
+                onClick: PropTypes.func // call this callback when the menu item is clicked
+            })
+        )
+    ]),
+    depth: PropTypes.number
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(mapStateToProps)(AboutMenu);

packages/scratch-gui/src/components/menu-bar/account-nav.css → packages/scratch-gui/src/components/menu-bar/account-menu.css

@@ -1,6 +1,18 @@
 @import "../../css/colors.css";
 @import "../../css/units.css";
 
+.account-menu {
+    /* to keep styling as it was with React.Fragment instead of button, which alters the following: */
+    background: none;
+    border: none;
+
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+
+    padding: 0;
+}
+
 .user-info {
     display: inline-flex;
     flex-wrap: nowrap;