From 788af2d7b2720868efb15a38fb37cf8201232526 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Thu, 14 Jun 2018 10:31:16 -0400
Subject: [PATCH] PR cleanup
* refactor LanguageSelector to reuse MenuBarMenu
* localize aria-labels on MenuBar
---
.../language-selector/language-selector.css | 18 ----------
.../language-selector/language-selector.jsx | 1 -
src/components/menu-bar/menu-bar.jsx | 34 +++++++++++++++----
src/containers/language-selector.jsx | 33 ++----------------
4 files changed, 29 insertions(+), 57 deletions(-)
diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index dd09a7c7e..d8ae588ae 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -1,23 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
-.group {
- z-index: 50;
- top: $menu-bar-height;
- left: 0;
- position: absolute;
- border: 1px solid $ui-black-transparent;
- border-radius: 0 0 8px 8px;
- background-color: $motion-primary;
- padding: 0;
- margin: 0;
- min-width: 186px;
- max-width: 260px;
- overflow: visible;
- color: $ui-white;
- box-shadow: 0 8px 8px 0 $ui-black-transparent;
-}
-
.language-icon {
height: 1.5rem;
}
@@ -28,7 +11,6 @@
.language-select {
margin: .5rem;
- width: calc(100% - 1rem);
height: 1.85rem;
border: 1px solid $motion-primary;
user-select: none;
diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx
index 07249277f..ad7a9aa90 100644
--- a/src/components/language-selector/language-selector.jsx
+++ b/src/components/language-selector/language-selector.jsx
@@ -22,7 +22,6 @@ class LanguageSelector extends React.Component {
ref={componentRef}
>
<select
- aria-label="language selector"
className={styles.languageSelect}
value={currentLocale}
onChange={onChange}
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index aa718b1b0..e4de61ffd 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import {connect} from 'react-redux';
-import {FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -41,6 +41,19 @@ import scratchLogo from './scratch-logo.svg';
import helpIcon from './icon--help.svg';
+const ariaMessages = defineMessages({
+ language: {
+ id: 'gui.menuBar.LanguageSelector',
+ defaultMessage: 'language selector',
+ description: 'accessibility text for the language selection menu'
+ },
+ howTo: {
+ id: 'gui.menuBar.howToLibrary',
+ defaultMessage: 'How-to Library',
+ description: 'accessibility text for the how-to library button'
+ }
+});
+
const MenuBarItemTooltip = ({
children,
className,
@@ -139,7 +152,10 @@ const MenuBar = props => (
id="menubar-selector"
place="right"
>
- <div className={classNames(styles.languageMenu)}>
+ <div
+ aria-label={props.intl.formatMessage(ariaMessages.language)}
+ className={classNames(styles.languageMenu)}
+ >
<img
className={styles.languageIcon}
src={languageIcon}
@@ -149,10 +165,13 @@ const MenuBar = props => (
src={dropdownCaret}
/>
</div>
- <LanguageSelector
+ <MenuBarMenu
open={props.languageMenuOpen}
onRequestClose={props.onRequestCloseLanguage}
- />
+ >
+ <LanguageSelector />
+ </MenuBarMenu>
+
</MenuBarItemTooltip>
</div>
<div
@@ -350,7 +369,7 @@ const MenuBar = props => (
</div>
<div className={styles.accountInfoWrapper}>
<div
- aria-label="How-to Library"
+ aria-label={props.intl.formatMessage(ariaMessages.howTo)}
className={classNames(styles.menuBarItem, styles.hoverable)}
onClick={props.onOpenTipLibrary}
>
@@ -405,6 +424,7 @@ MenuBar.propTypes = {
editMenuOpen: PropTypes.bool,
enableCommunity: PropTypes.bool,
fileMenuOpen: PropTypes.bool,
+ intl: intlShape,
languageMenuOpen: PropTypes.bool,
onClickEdit: PropTypes.func,
onClickFile: PropTypes.func,
@@ -433,7 +453,7 @@ const mapDispatchToProps = dispatch => ({
onSeeCommunity: () => dispatch(setPlayer(true))
});
-export default connect(
+export default injectIntl(connect(
mapStateToProps,
mapDispatchToProps
-)(MenuBar);
+)(MenuBar));
diff --git a/src/containers/language-selector.jsx b/src/containers/language-selector.jsx
index 1a1d7bf0d..49fb60943 100644
--- a/src/containers/language-selector.jsx
+++ b/src/containers/language-selector.jsx
@@ -11,47 +11,20 @@ class LanguageSelector extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
- 'addListeners',
- 'removeListeners',
- 'handleChange',
- 'handleClick',
- 'ref'
+ 'handleChange'
]);
- if (props.open) this.addListeners();
- }
- componentDidUpdate (prevProps) {
- if (this.props.open && !prevProps.open) this.addListeners();
- if (!this.props.open && prevProps.open) this.removeListeners();
- }
- addListeners () {
- document.addEventListener('mouseup', this.handleClick);
- }
- removeListeners () {
- document.removeEventListener('mouseup', this.handleClick);
}
handleChange (e) {
this.props.onChangeLanguage(e.target.value);
}
- handleClick (e) {
- if (this.props.open && this.selector && !this.selector.contains(e.target)) {
- this.props.onRequestClose();
- }
- }
- ref (c) {
- this.selector = c;
- }
render () {
const {
- open,
onChangeLanguage, // eslint-disable-line no-unused-vars
- onRequestClose, // eslint-disable-line no-unused-vars
children,
...props
} = this.props;
- if (!open) return null;
return (
<LanguageSelectorComponent
- componentRef={this.ref}
onChange={this.handleChange}
{...props}
>
@@ -63,9 +36,7 @@ class LanguageSelector extends React.Component {
LanguageSelector.propTypes = {
children: PropTypes.node,
- onChangeLanguage: PropTypes.func.isRequired,
- onRequestClose: PropTypes.func.isRequired,
- open: PropTypes.bool.isRequired
+ onChangeLanguage: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
--
GitLab