diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css index df53ddbd85ad367b1aab53afff4a1491d0a304ad..219896103d642f9e21abc43105ef3d0f203428cf 100644 --- a/src/components/language-selector/language-selector.css +++ b/src/components/language-selector/language-selector.css @@ -7,7 +7,7 @@ /* Position the language select over the language icon, and make it transparent */ .language-select { - position: relative; + position: absolute; width: 3rem; height: 3rem; opacity: 0; @@ -17,11 +17,15 @@ } [dir="ltr"] .language-select { - right: 40px; + right: 0; } [dir="rtl"] .language-select { - left: 40px; + left: 0; +} + +.language-select option { + opacity: 1; } .language-select:focus { diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 46e63cc5305295b62cf1ae7a2c6755af3eda0ce2..74cbd5f22a718608457f42264802d3511c475990 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -49,7 +49,7 @@ } .language-caret { - vertical-align: text-top; + margin-bottom: .625rem; } .language-menu { diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 1d28ad6ac5c8793751a8bb12e2997ccee41bcb00..98bf19bc5b1835dba6a88c357bc6cd706b080ac7 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -167,9 +167,7 @@ class MenuBar extends React.Component { <div className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)} > - <div - aria-label={this.props.intl.formatMessage(ariaMessages.language)} - > + <div> <img className={styles.languageIcon} src={languageIcon} @@ -179,7 +177,7 @@ class MenuBar extends React.Component { src={dropdownCaret} /> </div> - <LanguageSelector /> + <LanguageSelector aria-label={this.props.intl.formatMessage(ariaMessages.language)} /> </div> <div className={classNames(styles.menuBarItem, styles.hoverable, {