Add current language to language selection label (#774)

See commit message.
elan-ev · May 12, 2023 · 539f9fa · 539f9fa
2 parents 2162d11 + 89a5bad
commit 539f9fa
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
@@ -1,5 +1,6 @@
 language-name: Deutsch
 language: Sprache
+language-selection: Sprachauswahl, Deutsch ausgewählt
 loading: Lade...
 close: Schließen
 cancel: Abbrechen

diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
@@ -1,5 +1,6 @@
 language-name: English
 language: Language
+language-selection: Language selection, English selected
 loading: Loading...
 close: Close
 cancel: Cancel

diff --git a/frontend/src/layout/header/UserBox.tsx b/frontend/src/layout/header/UserBox.tsx
@@ -179,7 +179,13 @@ const WithFloatingMenu: React.FC<WithFloatingMenuProps> = ({ children, type }) =
  distance={5}
  >
  <FloatingTrigger>{children}</FloatingTrigger>
- <FloatingMenu close={() => ref.current?.close()} type={type} />
+ <FloatingMenu
+ close={() => {
+ ref.current?.close();
+ // TODO : `if (type === "language")` set focus on trigger,
+ // so the newly selected language gets announced
+ }}
+ type={type} />
  </FloatingContainer>
  );
 };
@@ -315,7 +321,7 @@ export const LanguageSettings: React.FC = () => {
  const { t } = useTranslation();
 
  return <WithFloatingMenu type="language">
- <ActionIcon title={t("language")}>
+ <ActionIcon title={t("language-selection")}>
  <HiOutlineTranslate />
  </ActionIcon>
  </WithFloatingMenu>;
@@ -381,6 +387,8 @@ const LanguageMenu: React.FC<{ close: () => void }> = ({ close }) => {
  return <>
  {Object.keys(languages).map(lng => (
  <MenuItem
+ isLanguageItem
+ selected={isCurrentLanguage(lng)}
  key={lng}
  icon={isCurrentLanguage(lng) ? <FiCheck /> : undefined}
  onClick={() => {
@@ -438,6 +446,8 @@ type MenuItemProps = {
  indent?: boolean;
  externalLinkProps?: ExternalLinkProps;
  children: ReactNode;
+ isLanguageItem?: boolean;
+ selected?: boolean;
 };
 
 /** A single item in the user menu. */
@@ -452,6 +462,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
  borderTop = false,
  indent = false,
  externalLinkProps,
+ isLanguageItem = false,
+ selected = false,
 }) => {
  const inner = <>
  {icon ?? <svg />}
@@ -491,13 +503,18 @@ const MenuItem: React.FC<MenuItemProps> = ({
  }
  };
 
+ const additionalProps = !isLanguageItem ? { role: "menuitem" } : {
+ role: "checkbox",
+ "aria-checked": selected,
+ };
+
  let menuItem;
  if (linkTo) {
- menuItem = <li role="menuitem" {... { className }}>
+ menuItem = <li {...additionalProps} {... { className }}>
  <Link to={linkTo} css={css} {...{ htmlLink, onClick, className }}>{inner}</Link>
  </li>;
  } else if (externalLinkProps) {
- menuItem = <li role="menuitem">
+ menuItem = <li {...additionalProps}>
  <ExternalLink
  {...externalLinkProps}
  css={{
@@ -511,7 +528,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
  } else {
  menuItem = (
  <li
- role="menuitem"
+ {...additionalProps}
  tabIndex={0}
  css={css}
  {...{ onClick, className, onKeyDown }}