diff --git a/packages/scratch-gui/src/components/context-menu/menu-path-context.jsx b/packages/scratch-gui/src/components/context-menu/menu-path-context.jsx
new file mode 100644
index 0000000000..7c562428c7
--- /dev/null
+++ b/packages/scratch-gui/src/components/context-menu/menu-path-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
+};
diff --git a/packages/scratch-gui/src/components/gui/gui.jsx b/packages/scratch-gui/src/components/gui/gui.jsx
index 1fa06119e2..2f81df9eed 100644
--- a/packages/scratch-gui/src/components/gui/gui.jsx
+++ b/packages/scratch-gui/src/components/gui/gui.jsx
@@ -44,6 +44,7 @@ import soundsIcon from './icon--sounds.svg';
 import DebugModal from '../debug-modal/debug-modal.jsx';
 import {setPlatform} from '../../reducers/platform.js';
 import {PLATFORM} from '../../lib/platform.js';
+import {MenuRefProvider} from '../context-menu/menu-path-context.jsx';
 
 // Cache this value to only retrieve it once the first time.
 // Assume that it doesn't change for a session.
@@ -252,42 +253,46 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                {!menuBarHidden && <MenuBar
-                    accountNavOpen={accountNavOpen}
-                    authorId={authorId}
-                    authorThumbnailUrl={authorThumbnailUrl}
-                    authorUsername={authorUsername}
-                    canChangeLanguage={canChangeLanguage}
-                    canChangeTheme={canChangeTheme}
-                    canCreateCopy={canCreateCopy}
-                    canCreateNew={canCreateNew}
-                    canEditTitle={canEditTitle}
-                    canManageFiles={canManageFiles}
-                    canRemix={canRemix}
-                    canSave={canSave}
-                    canShare={canShare}
-                    className={styles.menuBarPosition}
-                    enableCommunity={enableCommunity}
-                    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
+                        accountNavOpen={accountNavOpen}
+                        authorId={authorId}
+                        authorThumbnailUrl={authorThumbnailUrl}
+                        authorUsername={authorUsername}
+                        canChangeLanguage={canChangeLanguage}
+                        canChangeTheme={canChangeTheme}
+                        canCreateCopy={canCreateCopy}
+                        canCreateNew={canCreateNew}
+                        canEditTitle={canEditTitle}
+                        canManageFiles={canManageFiles}
+                        canRemix={canRemix}
+                        canSave={canSave}
+                        canShare={canShare}
+                        className={styles.menuBarPosition}
+                        enableCommunity={enableCommunity}
+                        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={boxStyles}>
                     <Box className={styles.flexWrapper}>
                         <Box className={styles.editorWrapper}>
diff --git a/packages/scratch-gui/src/components/menu-bar/base-menu.jsx b/packages/scratch-gui/src/components/menu-bar/base-menu.jsx
new file mode 100644
index 0000000000..d28458dc81
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/base-menu.jsx
@@ -0,0 +1,121 @@
+import {MenuRefContext} from '../context-menu/menu-path-context';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+
+/* Subclasses must implement (some optionally):
+_______________________________________________
+render
+onSelectItem
+define this.itemRefs
+add onKeyDown={this.handleKeyPress}
+and onParentKeyPress={this.handleKeyPress} for MenuItem elements
+
+They should also receive:
+______________________
+onOpen,
+onClose,
+focusedRef,
+depth
+*/
+export class BaseMenu extends React.PureComponent {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'onSelectItem',
+            'handleKeyPress',
+            'handleKeyPressOpenMenu',
+            'handleMove',
+            'handleOnOpen',
+            'handleOnClose',
+            'setFocusedRef'
+        ]);
+        
+        this.state = {focusedIndex: -1, depth: -1};
+        this.focusedRef = props.focusedRef || React.createRef();
+    }
+
+    static contextType = MenuRefContext;
+
+    setFocusedRef (ref) {
+        this.focusedRef = ref;
+        if (ref && ref.current) ref.current.focus();
+    }
+
+    handleKeyPress (e) {
+        if (this.props.depth === 1) {
+            if (e.key === 'Tab') {
+                this.handleOnClose();
+            }
+        }
+
+        if (this.context.isTopMenu(this.props.focusedRef)) {
+            this.handleKeyPressOpenMenu(e);
+        } else if (!this.context.isOpenMenu(this.props.focusedRef) && (e.key === ' ' || e.key === 'ArrowRight')) {
+            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') {
+            e.preventDefault();
+            this.onSelectItem();
+        }
+        if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            e.preventDefault();
+            this.handleOnClose();
+        }
+    }
+
+    handleOnOpen () {
+        if (this.context.isOpenMenu(this.props.focusedRef)) return;
+
+        this.props.onOpen();
+        this.setState({focusedIndex: 0}, () => {
+            if (this.itemRefs[0] && this.itemRefs[0].current) this.itemRefs[0].current.focus();
+        });
+
+        this.context.push(this.props.focusedRef, this.props.depth);
+    }
+
+    handleMove (direction) {
+        const newIndex = (this.state.focusedIndex + direction + this.itemRefs.length) % this.itemRefs.length;
+        this.setState({focusedIndex: newIndex}, () => {
+            this.setFocusedRef(this.itemRefs[newIndex]);
+        });
+    }
+
+    onSelectItem () {
+        // do nothing by default, change for items that don't expand
+    }
+
+    handleOnClose () {
+        this.context.cut(this.props.focusedRef);
+        this.setState({focusedIndex: -1}, () => {
+            this.setFocusedRef(this.props.focusedRef);
+        });
+
+        this.props.onClose();
+    }
+
+}
+
+BaseMenu.propTypes = {
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    depth: PropTypes.number,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func
+};
+
+BaseMenu.defaultProps = {
+    onClose: () => {}
+};
diff --git a/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx b/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx
new file mode 100644
index 0000000000..de47471b83
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/edit-menu.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import styles from './menu-bar.css';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+
+import editIcon from './icon--edit.svg';
+import {FormattedMessage} from 'react-intl';
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+import {BaseMenu} from './base-menu';
+import dropdownCaret from './dropdown-caret.svg';
+import DeletionRestorer from '../../containers/deletion-restorer.jsx';
+import TurboMode from '../../containers/turbo-mode.jsx';
+
+export class EditMenu extends BaseMenu {
+    constructor (props) {
+        super(props);
+
+        bindAll(this, ['handleOnClose', 'handleKeyPress', 'handleOnOpen']);
+        
+        this.state = {focusedIndex: -1};
+
+        this.restoreRef = React.createRef();
+        this.turboRef = React.createRef();
+        
+        this.itemRefs = [
+            this.restoreRef,
+            this.turboRef
+        ];
+    }
+
+    render () {
+        return (
+            <div
+                className={classNames(styles.menuBarItem, styles.hoverable, {
+                    [styles.active]: this.context.isOpenMenu(this.props.focusedRef)
+                })}
+                onClick={this.handleOnOpen}
+                role="button"
+                aria-label="Edit Menu"
+                tabIndex={0}
+                onKeyDown={this.handleKeyPress}
+            >
+                <img src={editIcon} />
+                <span className={styles.collapsibleLabel}>
+                    <FormattedMessage
+                        defaultMessage="Edit"
+                        description="Text for edit dropdown menu"
+                        id="gui.menuBar.edit"
+                    />
+                </span>
+                <img src={dropdownCaret} />
+                <MenuBarMenu
+                    className={classNames(styles.menuBarMenu)}
+                    open={this.context.isOpenMenu(this.props.focusedRef)}
+                    place={this.props.isRtl ? 'left' : 'right'}
+                    onRequestClose={this.handleOnClose}
+                >
+                    <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
+                        <MenuItem
+                            className={classNames({[styles.disabled]: !restorable})}
+                            onClick={this.props.onRestoreOption(handleRestore)}
+                            focusedRef={this.restoreRef}
+                            onParentKeyPress={this.handleKeyPress}
+                        >
+                            {this.props.restoreOptionMessage(deletedItem)}
+                        </MenuItem>
+                    )}</DeletionRestorer>
+                    <MenuSection>
+                        <TurboMode>{(toggleTurboMode, {turboMode}) => (
+                            <MenuItem
+                                onClick={toggleTurboMode}
+                                focusedRef={this.turboRef}
+                                onParentKeyPress={this.handleKeyPress}
+                            >
+                                {turboMode ? (
+                                    <FormattedMessage
+                                        defaultMessage="Turn off Turbo Mode"
+                                        description="Menu bar item for turning off turbo mode"
+                                        id="gui.menuBar.turboModeOff"
+                                    />
+                                ) : (
+                                    <FormattedMessage
+                                        defaultMessage="Turn on Turbo Mode"
+                                        description="Menu bar item for turning on turbo mode"
+                                        id="gui.menuBar.turboModeOn"
+                                    />
+                                )}
+                            </MenuItem>
+                        )}</TurboMode>
+                    </MenuSection>
+                </MenuBarMenu>
+            </div>
+        );
+    }
+}
+
+EditMenu.propTypes = {
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    isRtl: PropTypes.bool,
+    restoreOptionMessage: PropTypes.func,
+    onRestoreOption: PropTypes.func
+};
diff --git a/packages/scratch-gui/src/components/menu-bar/file-menu.jsx b/packages/scratch-gui/src/components/menu-bar/file-menu.jsx
new file mode 100644
index 0000000000..195c56d845
--- /dev/null
+++ b/packages/scratch-gui/src/components/menu-bar/file-menu.jsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import styles from './menu-bar.css';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+
+import fileIcon from './icon--file.svg';
+import {FormattedMessage} from 'react-intl';
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+import {BaseMenu} from './base-menu';
+import SB3Downloader from '../../containers/sb3-downloader.jsx';
+import dropdownCaret from './dropdown-caret.svg';
+
+import sharedMessages from '../../lib/shared-messages';
+import intlShape from '../../lib/intlShape.js';
+
+export class FileMenu extends BaseMenu {
+    constructor (props) {
+        super(props);
+
+        bindAll(this, ['handleOnClose', 'handleKeyPress', 'handleOnOpen']);
+        
+        this.state = {focusedIndex: -1};
+
+        this.newProjectRef = React.createRef();
+        this.saveRef = React.createRef();
+        this.createRef = React.createRef();
+        this.remixRef = React.createRef();
+        this.loadFromComputerRef = React.createRef();
+        this.saveToComputerRef = React.createRef();
+        
+        this.itemRefs = [
+            this.newProjectRef,
+            ...(this.props.canSave ? [this.saveRef] : []),
+            ...(this.props.canCreateCopy ? [this.createRef] : []),
+            ...(this.props.canRemix ? [this.remixRef] : []),
+            this.loadFromComputerRef,
+            this.saveToComputerRef
+        ];
+    }
+
+    render () {
+        const saveNowMessage = (
+            <FormattedMessage
+                defaultMessage="Save now"
+                description="Menu bar item for saving now"
+                id="gui.menuBar.saveNow"
+            />
+        );
+        const createCopyMessage = (
+            <FormattedMessage
+                defaultMessage="Save as a copy"
+                description="Menu bar item for saving as a copy"
+                id="gui.menuBar.saveAsCopy"
+            />
+        );
+        const remixMessage = (
+            <FormattedMessage
+                defaultMessage="Remix"
+                description="Menu bar item for remixing"
+                id="gui.menuBar.remix"
+            />
+        );
+        const newProjectMessage = (
+            <FormattedMessage
+                defaultMessage="New"
+                description="Menu bar item for creating a new project"
+                id="gui.menuBar.new"
+            />
+        );
+        return (
+            <div
+                className={classNames(styles.menuBarItem, styles.hoverable, {
+                    [styles.active]: this.context.isTopMenu(this.props.focusedRef)
+                })}
+                onClick={this.handleOnOpen}
+                aria-label="File Menu"
+                role="button"
+                tabIndex={0}
+                ref={this.props.focusedRef}
+                onKeyDown={this.handleKeyPress}
+            >
+                <img src={fileIcon} />
+                <span className={styles.collapsibleLabel}>
+                    <FormattedMessage
+                        defaultMessage="File"
+                        description="Text for file dropdown menu"
+                        id="gui.menuBar.file"
+                    />
+                </span>
+                <img src={dropdownCaret} />
+                <MenuBarMenu
+                    className={classNames(styles.menuBarMenu)}
+                    open={this.context.isTopMenu(this.props.focusedRef)}
+                    place={this.props.isRtl ? 'left' : 'right'}
+                    onRequestClose={this.handleOnClose}
+                >
+                    <MenuSection>
+                        <MenuItem
+                            isRtl={this.props.isRtl}
+                            onClick={this.props.onClickNew}
+                            focusedRef={this.newProjectRef}
+                            onParentKeyPress={this.handleKeyPress}
+                        >
+                            {newProjectMessage}
+                        </MenuItem>
+                    </MenuSection>
+                    {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
+                        <MenuSection>
+                            {this.props.canSave && (
+                                <MenuItem
+                                    onClick={this.props.onClickSave}
+                                    focusedRef={this.saveRef}
+                                    onParentKeyPress={this.handleKeyPress}
+                                >
+                                    {saveNowMessage}
+                                </MenuItem>
+                            )}
+                            {this.props.canCreateCopy && (
+                                <MenuItem
+                                    onClick={this.props.onClickSaveAsCopy}
+                                    focusedRef={this.createRef}
+                                    onParentKeyPress={this.handleKeyPress}
+                                >
+                                    {createCopyMessage}
+                                </MenuItem>
+                            )}
+                            {this.props.canRemix && (
+                                <MenuItem
+                                    onClick={this.props.onClickRemix}
+                                    focusedRef={this.remixRef}
+                                    onParentKeyPress={this.handleKeyPress}
+                                >
+                                    {remixMessage}
+                                </MenuItem>
+                            )}
+                        </MenuSection>
+                    )}
+                    <MenuSection>
+                        <MenuItem
+                            onClick={this.props.onStartSelectingFileUpload}
+                            focusedRef={this.loadFromComputerRef}
+                            onParentKeyPress={this.handleKeyPress}
+                        >
+                            {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
+                        </MenuItem>
+                        <SB3Downloader>{(className, downloadProjectCallback) => (
+                            <MenuItem
+                                className={className}
+                                onClick={this.props.getSaveToComputerHandler(downloadProjectCallback)}
+                                focusedRef={this.saveToComputerRef}
+                                onParentKeyPress={this.handleKeyPress}
+                            >
+                                <FormattedMessage
+                                    defaultMessage="Save to your computer"
+                                    description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
+                                    id="gui.menuBar.downloadToComputer"
+                                />
+                            </MenuItem>
+                        )}</SB3Downloader>
+                    </MenuSection>
+                </MenuBarMenu>
+            </div>
+        );
+    }
+}
+
+FileMenu.propTypes = {
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    intl: intlShape,
+    isRtl: PropTypes.bool,
+    canSave: PropTypes.bool,
+    canCreateCopy: PropTypes.bool,
+    canRemix: PropTypes.bool,
+    onStartSelectingFileUpload: PropTypes.func,
+    onClickSave: PropTypes.func,
+    onClickSaveAsCopy: PropTypes.func,
+    onClickRemix: PropTypes.func,
+    onClickNew: PropTypes.func
+};
diff --git a/packages/scratch-gui/src/components/menu-bar/language-menu.jsx b/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
index 81402c317a..927fec2ea7 100644
--- a/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/language-menu.jsx
@@ -9,20 +9,25 @@ import locales from 'scratch-l10n';
 import check from './check.svg';
 import {MenuItem, Submenu} from '../menu/menu.jsx';
 import languageIcon from '../language-selector/language-icon.svg';
-import {languageMenuOpen, openLanguageMenu} from '../../reducers/menus.js';
+import {closeLanguageMenu, languageMenuOpen, openLanguageMenu} from '../../reducers/menus.js';
 import {selectLocale} from '../../reducers/locales.js';
+import {MenuRefContext} from '../context-menu/menu-path-context.jsx';
 
 import styles from './settings-menu.css';
 
 import dropdownCaret from './dropdown-caret.svg';
+import {BaseMenu} from './base-menu';
 
-class LanguageMenu extends React.PureComponent {
+class LanguageMenu extends BaseMenu {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'onSelectItem',
             'setRef',
             'handleMouseOver'
         ]);
+
+        this.itemRefs = Object.keys(locales).map(() => React.createRef());
     }
 
     componentDidUpdate (prevProps) {
@@ -32,26 +37,44 @@ class LanguageMenu extends React.PureComponent {
         }
     }
 
+    static contextType = MenuRefContext;
+
     setRef (component) {
         this.selectedRef = component;
     }
 
+    onSelectItem () {
+        this.props.onChangeLanguage(Object.keys(locales)[this.state.focusedIndex]);
+        this.context.clear();
+    }
+
     handleMouseOver () {
         // If we are using hover rather than clicks for submenus, scroll the selected option into view
         if (!this.props.menuOpen && this.selectedRef) {
             this.selectedRef.scrollIntoView({block: 'center'});
+            this.setFocusedRef(this.selectedRef);
         }
     }
 
     render () {
+        const {
+            currentLocale,
+            focusedRef,
+            isRtl,
+            onChangeLanguage
+        } = this.props;
+
         return (
-            <MenuItem
-                expanded={this.props.menuOpen}
-            >
+            <MenuItem expanded={this.context.isOpenMenu(focusedRef)}>
                 <div
                     className={styles.option}
-                    onClick={this.props.onRequestOpen}
+                    onClick={this.handleOnOpen}
                     onMouseOver={this.handleMouseOver}
+                    ref={focusedRef}
+                    aria-label="Language Menu"
+                    role="button"
+                    tabIndex={-1}
+                    onKeyDown={this.handleKeyPress}
                 >
                     <img
                         className={styles.icon}
@@ -71,27 +94,31 @@ class LanguageMenu extends React.PureComponent {
                 </div>
                 <Submenu
                     className={styles.languageSubmenu}
-                    place={this.props.isRtl ? 'left' : 'right'}
+                    place={isRtl ? 'left' : 'right'}
                 >
                     {
                         Object.keys(locales)
-                            .map(locale => (
-                                <MenuItem
+                            .map((locale, index) => {
+                                const isSelected = currentLocale === locale;
+
+                                return (<MenuItem
                                     key={locale}
                                     className={styles.languageMenuItem}
                                     // eslint-disable-next-line react/jsx-no-bind
-                                    onClick={() => this.props.onChangeLanguage(locale)}
+                                    onClick={() => onChangeLanguage(locale)}
+                                    focusedRef={this.itemRefs[index]}
+                                    onParentKeyPress={this.handleKeyPress}
                                 >
                                     <img
                                         className={classNames(styles.check, {
-                                            [styles.selected]: this.props.currentLocale === locale
+                                            [styles.selected]: isSelected
                                         })}
                                         src={check}
-                                        {...(this.props.currentLocale === locale && {ref: this.setRef})}
+                                        {...(isSelected && {ref: this.setRef})}
                                     />
                                     {locales[locale].name}
-                                </MenuItem>
-                            ))
+                                </MenuItem>);
+                            })
                     }
                 </Submenu>
             </MenuItem>
@@ -101,12 +128,12 @@ class LanguageMenu extends React.PureComponent {
 
 LanguageMenu.propTypes = {
     currentLocale: PropTypes.string,
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
     isRtl: PropTypes.bool,
-    label: PropTypes.string,
     menuOpen: PropTypes.bool,
     onChangeLanguage: PropTypes.func,
-    onRequestCloseSettings: PropTypes.func,
-    onRequestOpen: PropTypes.func
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func
 };
 
 const mapStateToProps = state => ({
@@ -116,12 +143,12 @@ const mapStateToProps = state => ({
     messagesByLocale: state.locales.messagesByLocale
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
+const mapDispatchToProps = dispatch => ({
     onChangeLanguage: locale => {
         dispatch(selectLocale(locale));
-        ownProps.onRequestCloseSettings();
     },
-    onRequestOpen: () => dispatch(openLanguageMenu())
+    onOpen: () => dispatch(openLanguageMenu()),
+    onClose: () => dispatch(closeLanguageMenu())
 });
 
 export default connect(
diff --git a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
index 58f955a1bb..5c95483f5d 100644
--- a/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
@@ -24,11 +24,10 @@ import ProjectTitleInput from './project-title-input.jsx';
 import AuthorInfo from './author-info.jsx';
 import AccountNav from '../../components/menu-bar/account-nav.jsx';
 import LoginDropdown from './login-dropdown.jsx';
-import SB3Downloader from '../../containers/sb3-downloader.jsx';
-import DeletionRestorer from '../../containers/deletion-restorer.jsx';
-import TurboMode from '../../containers/turbo-mode.jsx';
 import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';
 import SettingsMenu from './settings-menu.jsx';
+import {FileMenu} from './file-menu.jsx';
+import {EditMenu} from './edit-menu.jsx';
 
 import {openTipsLibrary, openDebugModal} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
@@ -84,8 +83,6 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import aboutIcon from './icon--about.svg';
-import fileIcon from './icon--file.svg';
-import editIcon from './icon--edit.svg';
 import debugIcon from '../debug-modal/icons/icon--debug.svg';
 
 import scratchLogo from './scratch-logo.svg';
@@ -197,6 +194,10 @@ class MenuBar extends React.Component {
             'getSaveToComputerHandler',
             'restoreOptionMessage'
         ]);
+
+        this.settingsRef = React.createRef();
+        this.fileRef = React.createRef();
+        this.editRef = React.createRef();
     }
     componentDidMount () {
         document.addEventListener('keydown', this.handleKeyPress);
@@ -289,6 +290,11 @@ class MenuBar extends React.Component {
         };
     }
     handleKeyPress (event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.target.click();
+        }
+
         const modifier = bowser.mac ? event.metaKey : event.ctrlKey;
         if (modifier && event.key === 's') {
             this.props.onClickSave();
@@ -385,20 +391,6 @@ class MenuBar extends React.Component {
         };
     }
     render () {
-        const saveNowMessage = (
-            <FormattedMessage
-                defaultMessage="Save now"
-                description="Menu bar item for saving now"
-                id="gui.menuBar.saveNow"
-            />
-        );
-        const createCopyMessage = (
-            <FormattedMessage
-                defaultMessage="Save as a copy"
-                description="Menu bar item for saving as a copy"
-                id="gui.menuBar.saveAsCopy"
-            />
-        );
         const remixMessage = (
             <FormattedMessage
                 defaultMessage="Remix"
@@ -406,13 +398,6 @@ class MenuBar extends React.Component {
                 id="gui.menuBar.remix"
             />
         );
-        const newProjectMessage = (
-            <FormattedMessage
-                defaultMessage="New"
-                description="Menu bar item for creating a new project"
-                id="gui.menuBar.new"
-            />
-        );
         const remixButton = (
             <Button
                 className={classNames(
@@ -442,6 +427,9 @@ class MenuBar extends React.Component {
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
                             <img
+                                role="button"
+                                aria-label="Go Home"
+                                tabIndex={0}
                                 id="logo_img"
                                 alt="Scratch"
                                 className={classNames(styles.scratchLogo, {
@@ -453,141 +441,50 @@ class MenuBar extends React.Component {
                             />
                         </div>
                         {(this.props.canChangeTheme || this.props.canChangeLanguage) && (<SettingsMenu
+                            focusedRef={this.settingsRef}
+                            depth={1}
                             canChangeLanguage={this.props.canChangeLanguage}
                             canChangeTheme={this.props.canChangeTheme}
                             isRtl={this.props.isRtl}
-                            onRequestClose={this.props.onRequestCloseSettings}
-                            onRequestOpen={this.props.onClickSettings}
+                            onClose={this.props.onRequestCloseSettings}
+                            onOpen={this.props.onClickSettings}
                             settingsMenuOpen={this.props.settingsMenuOpen}
                         />)}
-                        {(this.props.canManageFiles) && (
-                            <div
-                                className={classNames(styles.menuBarItem, styles.hoverable, {
-                                    [styles.active]: this.props.fileMenuOpen
-                                })}
-                                onClick={this.props.onClickFile}
-                            >
-                                <img src={fileIcon} />
-                                <span className={styles.collapsibleLabel}>
-                                    <FormattedMessage
-                                        defaultMessage="File"
-                                        description="Text for file dropdown menu"
-                                        id="gui.menuBar.file"
-                                    />
-                                </span>
-                                <img src={dropdownCaret} />
-                                <MenuBarMenu
-                                    className={classNames(styles.menuBarMenu)}
-                                    open={this.props.fileMenuOpen}
-                                    place={this.props.isRtl ? 'left' : 'right'}
-                                    onRequestClose={this.props.onRequestCloseFile}
-                                >
-                                    <MenuSection>
-                                        <MenuItem
-                                            isRtl={this.props.isRtl}
-                                            onClick={this.handleClickNew}
-                                        >
-                                            {newProjectMessage}
-                                        </MenuItem>
-                                    </MenuSection>
-                                    {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
-                                        <MenuSection>
-                                            {this.props.canSave && (
-                                                <MenuItem onClick={this.handleClickSave}>
-                                                    {saveNowMessage}
-                                                </MenuItem>
-                                            )}
-                                            {this.props.canCreateCopy && (
-                                                <MenuItem onClick={this.handleClickSaveAsCopy}>
-                                                    {createCopyMessage}
-                                                </MenuItem>
-                                            )}
-                                            {this.props.canRemix && (
-                                                <MenuItem onClick={this.handleClickRemix}>
-                                                    {remixMessage}
-                                                </MenuItem>
-                                            )}
-                                        </MenuSection>
-                                    )}
-                                    <MenuSection>
-                                        <MenuItem
-                                            onClick={this.props.onStartSelectingFileUpload}
-                                        >
-                                            {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
-                                        </MenuItem>
-                                        <SB3Downloader>{(className, downloadProjectCallback) => (
-                                            <MenuItem
-                                                className={className}
-                                                onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
-                                            >
-                                                <FormattedMessage
-                                                    defaultMessage="Save to your computer"
-                                                    description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
-                                                    id="gui.menuBar.downloadToComputer"
-                                                />
-                                            </MenuItem>
-                                        )}</SB3Downloader>
-                                    </MenuSection>
-                                </MenuBarMenu>
-                            </div>
-                        )}
-                        <div
-                            className={classNames(styles.menuBarItem, styles.hoverable, {
-                                [styles.active]: this.props.editMenuOpen
-                            })}
-                            onClick={this.props.onClickEdit}
-                        >
-                            <img src={editIcon} />
-                            <span className={styles.collapsibleLabel}>
-                                <FormattedMessage
-                                    defaultMessage="Edit"
-                                    description="Text for edit dropdown menu"
-                                    id="gui.menuBar.edit"
-                                />
-                            </span>
-                            <img src={dropdownCaret} />
-                            <MenuBarMenu
-                                className={classNames(styles.menuBarMenu)}
-                                open={this.props.editMenuOpen}
-                                place={this.props.isRtl ? 'left' : 'right'}
-                                onRequestClose={this.props.onRequestCloseEdit}
-                            >
-                                <DeletionRestorer>{(handleRestore, {restorable, deletedItem}) => (
-                                    <MenuItem
-                                        className={classNames({[styles.disabled]: !restorable})}
-                                        onClick={this.handleRestoreOption(handleRestore)}
-                                    >
-                                        {this.restoreOptionMessage(deletedItem)}
-                                    </MenuItem>
-                                )}</DeletionRestorer>
-                                <MenuSection>
-                                    <TurboMode>{(toggleTurboMode, {turboMode}) => (
-                                        <MenuItem onClick={toggleTurboMode}>
-                                            {turboMode ? (
-                                                <FormattedMessage
-                                                    defaultMessage="Turn off Turbo Mode"
-                                                    description="Menu bar item for turning off turbo mode"
-                                                    id="gui.menuBar.turboModeOff"
-                                                />
-                                            ) : (
-                                                <FormattedMessage
-                                                    defaultMessage="Turn on Turbo Mode"
-                                                    description="Menu bar item for turning on turbo mode"
-                                                    id="gui.menuBar.turboModeOn"
-                                                />
-                                            )}
-                                        </MenuItem>
-                                    )}</TurboMode>
-                                </MenuSection>
-                            </MenuBarMenu>
-
-                        </div>
+                        {(this.props.canManageFiles) && (<FileMenu
+                            focusedRef={this.fileRef}
+                            depth={1}
+                            onOpen={this.props.onClickFile}
+                            onClose={this.props.onRequestCloseFile}
+                            onStartSelectingFileUpload={this.props.onStartSelectingFileUpload}
+                            onClickSave={this.handleClickSave}
+                            onClickSaveAsCopy={this.handleClickSaveAsCopy}
+                            onClickRemix={this.handleClickRemix}
+                            onClickNew={this.handleClickNew}
+                            getSaveToComputerHandler={this.getSaveToComputerHandler}
+                            canSave={this.props.canSave}
+                            canCreateCopy={this.props.canCreateCopy}
+                            canRemix={this.props.canRemix}
+                            intl={this.props.intl}
+                            isRtl={this.props.isRtl}
+                        />)}
+                        <EditMenu
+                            focusedRef={this.editRef}
+                            depth={1}
+                            onOpen={this.props.onClickEdit}
+                            onClose={this.props.onRequestCloseEdit}
+                            isRtl={this.props.isRtl}
+                            onRestoreOption={this.handleRestoreOption}
+                            restoreOptionMessage={this.restoreOptionMessage}
+                        />
                         {this.props.isTotallyNormal && (
                             <div
                                 className={classNames(styles.menuBarItem, styles.hoverable, {
                                     [styles.active]: this.props.modeMenuOpen
                                 })}
                                 onClick={this.props.onClickMode}
+                                role="button"
+                                aria-label="Mode"
+                                tabIndex={0}
                             >
                                 <div className={classNames(styles.editMenu)}>
                                     <FormattedMessage
@@ -705,6 +602,8 @@ class MenuBar extends React.Component {
                     <Divider className={classNames(styles.divider)} />
                     <div className={styles.fileGroup}>
                         <div
+                            tabIndex={0}
+                            role="button"
                             aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
                             className={
                                 classNames(styles.menuBarItem, styles.noOffset, styles.hoverable, 'tutorials-button')
@@ -720,6 +619,8 @@ class MenuBar extends React.Component {
                             </span>
                         </div>
                         <div
+                            tabIndex={0}
+                            role="button"
                             aria-label={this.props.intl.formatMessage(ariaMessages.debug)}
                             className={classNames(styles.menuBarItem, styles.noOffset, styles.hoverable)}
                             onClick={this.props.onOpenDebugModal}
diff --git a/packages/scratch-gui/src/components/menu-bar/mode-menu.jsx b/packages/scratch-gui/src/components/menu-bar/mode-menu.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx b/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
index 683f08a926..ebb8d26c30 100644
--- a/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -7,58 +8,84 @@ import LanguageMenu from './language-menu.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
 import ThemeMenu from './theme-menu.jsx';
 import {MenuSection} from '../menu/menu.jsx';
+import {MenuRefContext} from '../context-menu/menu-path-context.jsx';
 
 import menuBarStyles from './menu-bar.css';
 import styles from './settings-menu.css';
 
 import dropdownCaret from './dropdown-caret.svg';
 import settingsIcon from './icon--settings.svg';
+import {BaseMenu} from './base-menu.jsx';
 
-const SettingsMenu = ({
-    canChangeLanguage,
-    canChangeTheme,
-    isRtl,
-    onRequestClose,
-    onRequestOpen,
-    settingsMenuOpen
-}) => (
-    <div
-        className={classNames(menuBarStyles.menuBarItem, menuBarStyles.hoverable, menuBarStyles.themeMenu, {
-            [menuBarStyles.active]: settingsMenuOpen
-        })}
-        onClick={onRequestOpen}
-    >
-        <img
-            src={settingsIcon}
-        />
-        <span className={styles.dropdownLabel}>
-            <FormattedMessage
-                defaultMessage="Settings"
-                description="Settings menu"
-                id="gui.menuBar.settings"
-            />
-        </span>
-        <img src={dropdownCaret} />
-        <MenuBarMenu
-            className={menuBarStyles.menuBarMenu}
-            open={settingsMenuOpen}
-            place={isRtl ? 'left' : 'right'}
-            onRequestClose={onRequestClose}
+class SettingsMenu extends BaseMenu {
+    constructor (props) {
+        super(props);
+
+        bindAll(this, []);
+        
+        this.state = {focusedIndex: -1};
+
+        this.languageRef = React.createRef();
+        this.themeRef = React.createRef();
+        // hardcoded logic because of only two options
+        this.itemRefs = [this.languageRef, this.themeRef];
+    }
+
+    static contextType = MenuRefContext;
+    render () {
+        const {
+            canChangeLanguage,
+            canChangeTheme,
+            isRtl,
+            settingsMenuOpen
+        } = this.props;
+
+        return (<div
+            className={classNames(menuBarStyles.menuBarItem, menuBarStyles.hoverable, menuBarStyles.themeMenu, {
+                [menuBarStyles.active]: settingsMenuOpen
+            })}
+            role="button"
+            aria-expanded={this.context.isTopMenu(this.props.focusedRef)}
+            tabIndex={0}
+            aria-label="Settings"
+            onClick={this.handleOnOpen}
+            onKeyDown={this.handleKeyPress}
+            ref={this.focusedRef}
         >
-            <MenuSection>
-                {canChangeLanguage && <LanguageMenu onRequestCloseSettings={onRequestClose} />}
-                {canChangeTheme && <ThemeMenu onRequestCloseSettings={onRequestClose} />}
-            </MenuSection>
-        </MenuBarMenu>
-    </div>
-);
+            <img src={settingsIcon} />
+            <span className={styles.dropdownLabel}>
+                <FormattedMessage
+                    defaultMessage="Settings"
+                    description="Settings menu"
+                    id="gui.menuBar.settings"
+                />
+            </span>
+            <img src={dropdownCaret} />
+            <MenuBarMenu
+                className={menuBarStyles.menuBarMenu}
+                open={this.context.isOpenMenu(this.props.focusedRef)}
+                place={isRtl ? 'left' : 'right'}
+                onClose={this.handleOnClose}
+            >
+                <MenuSection>
+                    {canChangeLanguage && <LanguageMenu
+                        focusedRef={this.languageRef}
+                        depth={2}
+                    />}
+                    {canChangeTheme && <ThemeMenu
+                        focusedRef={this.themeRef}
+                        depth={2}
+                    />}
+                </MenuSection>
+            </MenuBarMenu>
+        </div>);
+    }
+};
 
 SettingsMenu.propTypes = {
     canChangeLanguage: PropTypes.bool,
     canChangeTheme: PropTypes.bool,
     isRtl: PropTypes.bool,
-    onRequestClose: PropTypes.func,
-    onRequestOpen: PropTypes.func,
     settingsMenuOpen: PropTypes.bool
 };
 
diff --git a/packages/scratch-gui/src/components/menu-bar/theme-menu.jsx b/packages/scratch-gui/src/components/menu-bar/theme-menu.jsx
index e9ce24f1de..0291b6a030 100644
--- a/packages/scratch-gui/src/components/menu-bar/theme-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/theme-menu.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {connect} from 'react-redux';
@@ -8,18 +9,24 @@ import check from './check.svg';
 import {MenuItem, Submenu} from '../menu/menu.jsx';
 import {DEFAULT_THEME, HIGH_CONTRAST_THEME, themeMap} from '../../lib/themes';
 import {persistTheme} from '../../lib/themes/themePersistance';
-import {openThemeMenu, themeMenuOpen} from '../../reducers/menus.js';
+import {openThemeMenu, closeThemeMenu} from '../../reducers/menus.js';
 import {setTheme} from '../../reducers/theme.js';
+import {MenuRefContext} from '../context-menu/menu-path-context.jsx';
 
 import styles from './settings-menu.css';
 
 import dropdownCaret from './dropdown-caret.svg';
+import {BaseMenu} from './base-menu';
 
 const ThemeMenuItem = props => {
     const themeInfo = themeMap[props.theme];
 
     return (
-        <MenuItem onClick={props.onClick}>
+        <MenuItem
+            onClick={props.onClick}
+            focusedRef={props.focusedRef}
+            onParentKeyPress={props.onParentKeyPress}
+        >
             <div className={styles.option}>
                 <img
                     className={classNames(styles.check, {[styles.selected]: props.isSelected})}
@@ -37,79 +44,112 @@ const ThemeMenuItem = props => {
 ThemeMenuItem.propTypes = {
     isSelected: PropTypes.bool,
     onClick: PropTypes.func,
-    theme: PropTypes.string
+    theme: PropTypes.string,
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    onParentKeyPress: PropTypes.func
 };
 
-const ThemeMenu = ({
-    isRtl,
-    menuOpen,
-    onChangeTheme,
-    onRequestOpen,
-    theme
-}) => {
-    const enabledThemes = [DEFAULT_THEME, HIGH_CONTRAST_THEME];
-    const themeInfo = themeMap[theme];
+class ThemeMenu extends BaseMenu {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'setRef',
+            'onSelectItem'
+        ]);
 
-    return (
-        <MenuItem expanded={menuOpen}>
-            <div
-                className={styles.option}
-                onClick={onRequestOpen}
+        this.enabledThemes = [DEFAULT_THEME, HIGH_CONTRAST_THEME];
+        this.itemRefs = this.enabledThemes.map(() => React.createRef());
+    }
+
+    static contextType = MenuRefContext;
+    
+    setRef (component) {
+        this.selectedRef = component;
+    }
+
+    onSelectItem () {
+        this.props.onChangeTheme(this.enabledThemes[this.state.focusedIndex]);
+        this.context.clear();
+    }
+
+    render () {
+        const {
+            focusedRef,
+            isRtl,
+            onChangeTheme,
+            theme
+        } = this.props;
+        
+        const themeInfo = themeMap[theme];
+
+        return (
+            <MenuItem
+                expanded={this.context.isOpenMenu(focusedRef)}
             >
-                <img
-                    src={themeInfo.icon}
-                    style={{width: 24}}
-                />
-                <span className={styles.submenuLabel}>
-                    <FormattedMessage
-                        defaultMessage="Color Mode"
-                        description="Color mode sub-menu"
-                        id="gui.menuBar.colorMode"
+                <div
+                    className={styles.option}
+                    onClick={this.handleOnOpen}
+                    ref={focusedRef}
+                    role="button"
+                    aria-label="Theme Menu"
+                    tabIndex={-1}
+                    onKeyDown={this.handleKeyPress}
+                >
+                    <img
+                        src={themeInfo.icon}
+                        style={{width: 24}}
                     />
-                </span>
-                <img
-                    className={styles.expandCaret}
-                    src={dropdownCaret}
-                />
-            </div>
-            <Submenu place={isRtl ? 'left' : 'right'}>
-                {enabledThemes.map(enabledTheme => (
-                    <ThemeMenuItem
-                        key={enabledTheme}
-                        isSelected={theme === enabledTheme}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onClick={() => onChangeTheme(enabledTheme)}
-                        theme={enabledTheme}
-                    />)
-                )}
-            </Submenu>
-        </MenuItem>
-    );
-};
+                    <span className={styles.submenuLabel}>
+                        <FormattedMessage
+                            defaultMessage="Color Mode"
+                            description="Color mode sub-menu"
+                            id="gui.menuBar.colorMode"
+                        />
+                    </span>
+                    <img
+                        className={styles.expandCaret}
+                        src={dropdownCaret}
+                    />
+                </div>
+                <Submenu place={isRtl ? 'left' : 'right'}>
+                    {this.enabledThemes.map((enabledTheme, index) => (
+                        <ThemeMenuItem
+                            key={enabledTheme}
+                            isSelected={theme === enabledTheme}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onClick={() => onChangeTheme(enabledTheme)}
+                            theme={enabledTheme}
+                            focusedRef={this.itemRefs[index]}
+                            onParentKeyPress={this.handleKeyPress}
+                        />)
+                    )}
+                </Submenu>
+            </MenuItem>
+        );
+    }
+}
 
 ThemeMenu.propTypes = {
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
     isRtl: PropTypes.bool,
-    menuOpen: PropTypes.bool,
     onChangeTheme: PropTypes.func,
-    // eslint-disable-next-line react/no-unused-prop-types
-    onRequestCloseSettings: PropTypes.func,
-    onRequestOpen: PropTypes.func,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func,
     theme: PropTypes.string
 };
 
 const mapStateToProps = state => ({
     isRtl: state.locales.isRtl,
-    menuOpen: themeMenuOpen(state),
     theme: state.scratchGui.theme.theme
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
+const mapDispatchToProps = dispatch => ({
     onChangeTheme: theme => {
         dispatch(setTheme(theme));
-        ownProps.onRequestCloseSettings();
         persistTheme(theme);
     },
-    onRequestOpen: () => dispatch(openThemeMenu())
+    onOpen: () => dispatch(openThemeMenu()),
+    onClose: () => dispatch(closeThemeMenu())
 });
 
 export default connect(
diff --git a/packages/scratch-gui/src/components/menu/menu.jsx b/packages/scratch-gui/src/components/menu/menu.jsx
index 5be46a32e3..972edd3510 100644
--- a/packages/scratch-gui/src/components/menu/menu.jsx
+++ b/packages/scratch-gui/src/components/menu/menu.jsx
@@ -32,7 +32,6 @@ MenuComponent.propTypes = {
     place: PropTypes.oneOf(['left', 'right'])
 };
 
-
 const Submenu = ({children, className, place, ...props}) => (
     <div
         className={classNames(
@@ -63,7 +62,11 @@ const MenuItem = ({
     children,
     className,
     expanded = false,
-    onClick
+    onClick,
+    focusedRef,
+    ariaLabel,
+    ariaRole,
+    onParentKeyPress
 }) => (
     <li
         className={classNames(
@@ -73,16 +76,25 @@ const MenuItem = ({
             {[styles.expanded]: expanded}
         )}
         onClick={onClick}
+        tabIndex={-1}
+        ref={focusedRef}
+        aria-label={ariaLabel}
+        role={ariaRole}
+        onKeyDown={onParentKeyPress}
     >
         {children}
     </li>
 );
 
 MenuItem.propTypes = {
+    focusedRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    ariaLabel: PropTypes.string,
+    ariaRole: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     expanded: PropTypes.bool,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    onParentKeyPress: PropTypes.func
 };
 
 
diff --git a/packages/scratch-gui/src/containers/gui.jsx b/packages/scratch-gui/src/containers/gui.jsx
index d84fab6f7f..1890a6c6f1 100644
--- a/packages/scratch-gui/src/containers/gui.jsx
+++ b/packages/scratch-gui/src/containers/gui.jsx
@@ -148,7 +148,7 @@ GUI.propTypes = {
 };
 
 GUI.defaultProps = {
-    isTotallyNormal: false,
+    isTotallyNormal: true,
     onStorageInit: () => {},
     onProjectLoaded: () => {},
     onUpdateProjectId: () => {},