Merge pull request #765 from opentripplanner/a11y-layout-adjustments-lang

App Menu Selected Language a11y

Author: miles-grant-ibigroup

Diff for: __tests__/util/i18n.js

@@ -0,0 +1,62 @@
+/* globals describe, expect, it */
+
+import { getLanguageOptions } from '../../lib/util/i18n'
+
+describe('util > i18n', () => {
+  describe('getLanguageOptions', () => {
+    const testCases = [
+      {
+        expected: {
+          'en-US': {
+            name: 'English (US)'
+          },
+          fr: {
+            name: 'French'
+          }
+        },
+        input: {
+          allLanguages: {
+            name: 'All Languages'
+          },
+          'en-US': {
+            name: 'English (US)'
+          },
+          fr: {
+            name: 'French'
+          }
+        }
+      },
+      {
+        expected: null,
+        input: {
+          allLanguages: {
+            name: 'All Languages'
+          },
+          'en-US': {
+            name: 'English (US)'
+          },
+          fr: {
+            label: 'French'
+          }
+        }
+      },
+      {
+        expected: null,
+        input: {
+          allLanguages: {
+            name: 'All Languages'
+          },
+          'en-US': {
+            name: 'English (US)'
+          }
+        }
+      }
+    ]
+
+    testCases.forEach((testCase) => {
+      it('should show at least two language options or null', () => {
+        expect(getLanguageOptions(testCase.input)).toEqual(testCase.expected)
+      })
+    })
+  })
+})

Diff for: index.css

@@ -121,6 +121,11 @@ input[type="text"]::-ms-clear {
   outline-offset: -2px;
 }
 
+.app-menu button[aria-selected="true"],
+#locale-selector li[aria-selected="true"] {
+  font-weight: bold;
+}
+
 .skip-nav-button {
   color: initial;
   position: fixed;

Diff for: lib/components/app/app-menu-item.tsx

@@ -6,9 +6,8 @@ import React, { Component, HTMLAttributes, KeyboardEvent } from 'react'
 interface Props extends HTMLAttributes<HTMLElement> {
   href?: string
   icon?: JSX.Element
-  isDropdown?: boolean
   onClick?: () => void
-  subItems?: unknown[]
+  subItems?: JSX.Element[]
   text: JSX.Element | string
 }
 
@@ -81,7 +80,7 @@ export default class AppMenuItem extends Component<Props, State> {
           onKeyDown={this._handleKeyDown}
           {...otherProps}
         >
-          <span>{icon}</span>
+          <span aria-hidden>{icon}</span>
           <span>{text}</span>
           {subItems && (
             <span className="expand-menu-chevron">
@@ -91,7 +90,7 @@ export default class AppMenuItem extends Component<Props, State> {
         </Element>
         {subItems && (
           <AnimateHeight duration={500} height={isExpanded ? 'auto' : 0}>
-            <div className="sub-menu-container" id={containerId}>
+            <div className="sub-menu-container" id={containerId} role="group">
               {subItems}
             </div>
           </AnimateHeight>

Diff for: lib/components/app/app-menu.tsx

@@ -17,6 +17,7 @@ import * as callTakerActions from '../../actions/call-taker'
 import * as fieldTripActions from '../../actions/field-trip'
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
+import { getLanguageOptions } from '../../util/i18n'
 import { isModuleEnabled, Modules } from '../../util/config'
 import { MainPanelContent, setMainPanelContent } from '../../actions/ui'
 import startOver from '../util/start-over'
@@ -50,7 +51,9 @@ type menuItem = {
   iconType: string | JSX.Element
   iconUrl?: string
   id: string
+  isSelected?: boolean
   label: string | JSX.Element
+  lang?: string
   onClick?: () => void
   subMenuDivider: boolean
 }
@@ -99,7 +102,7 @@ class AppMenu extends Component<
     document.querySelector('main')?.focus()
   }
 
-  _addExtraMenuItems = (menuItems?: menuItem[]) => {
+  _addExtraMenuItems = (menuItems?: menuItem[] | null) => {
     return (
       menuItems &&
       menuItems.map((menuItem) => {
@@ -109,7 +112,9 @@ class AppMenu extends Component<
           iconType,
           iconUrl,
           id,
+          isSelected,
           label: configLabel,
+          lang,
           onClick,
           subMenuDivider
         } = menuItem
@@ -122,6 +127,7 @@ class AppMenu extends Component<
 
         return (
           <AppMenuItem
+            aria-selected={isSelected || undefined}
             className={subMenuDivider ? 'app-menu-divider' : undefined}
             href={href}
             icon={
@@ -133,8 +139,10 @@ class AppMenu extends Component<
             }
             id={id}
             key={id}
+            lang={lang}
             onClick={onClick}
-            subItems={this._addExtraMenuItems(children)}
+            role={isSelected !== undefined ? 'option' : undefined}
+            subItems={this._addExtraMenuItems(children) || undefined}
             text={label}
           />
         )
@@ -158,22 +166,19 @@ class AppMenu extends Component<
       toggleMailables
     } = this.props
 
-    const languageMenuItems: menuItem[] | undefined = configLanguages && [
+    const languageOptions: Record<string, any> | null =
+      getLanguageOptions(configLanguages)
+    const languageMenuItems: menuItem[] | null = languageOptions && [
       {
-        children: Object.keys(configLanguages)
-          .filter((locale) => locale !== 'allLanguages')
-          .map((locale) => ({
-            iconType: <svg />,
-            id: configLanguages[locale].name,
-            label:
-              activeLocale === locale ? (
-                <strong>{configLanguages[locale].name}</strong>
-              ) : (
-                configLanguages[locale].name
-              ),
-            onClick: () => setLocale(locale),
-            subMenuDivider: false
-          })),
+        children: Object.keys(languageOptions).map((locale: string) => ({
+          iconType: <svg />,
+          id: locale,
+          isSelected: activeLocale === locale,
+          label: languageOptions[locale].name,
+          lang: locale,
+          onClick: () => setLocale(locale),
+          subMenuDivider: false
+        })),
         iconType: <GlobeAmericas />,
         id: 'app-menu-locale-selector',
         label: <FormattedMessage id="components.SubNav.languageSelector" />,

Diff for: lib/components/app/desktop-nav.tsx

@@ -72,13 +72,7 @@ const DesktopNav = ({ otpConfig, popupTarget, setPopupContent }: Props) => {
                 <FormattedMessage id={`config.popups.${popupTarget}`} />
               </NavItemOnLargeScreens>
             )}
-            {configLanguages &&
-              // Ensure that > 1 valid language is defined
-              Object.keys(configLanguages).filter(
-                (key) => key !== 'allLanguages' && configLanguages[key].name
-              ).length > 1 && (
-                <LocaleSelector configLanguages={configLanguages} />
-              )}
+            <LocaleSelector configLanguages={configLanguages} />
             {showLogin && (
               <NavLoginButtonAuth0
                 id="login-control"

Diff for: lib/components/app/locale-selector.tsx

@@ -1,27 +1,28 @@
-import { connect, ConnectedProps } from 'react-redux'
+import { connect } from 'react-redux'
 import { GlobeAmericas } from '@styled-icons/fa-solid/GlobeAmericas'
 import { useIntl } from 'react-intl'
-import React, { MouseEvent } from 'react'
+import React from 'react'
 
 import * as uiActions from '../../actions/ui'
-import * as userActions from '../../actions/user'
-import { StyledIconWrapper } from '../util/styledIcon'
+import { getLanguageOptions } from '../../util/i18n'
 import { UnstyledButton } from '../util/unstyled-button'
 import Dropdown from '../util/dropdown'
 
-type PropsFromRedux = ConnectedProps<typeof connector>
-
-interface LocaleSelectorProps extends PropsFromRedux {
+interface LocaleSelectorProps {
   // Typescript TODO configLanguageType
   configLanguages: Record<string, any>
+  locale: string
+  setLocale: (locale: string) => void
 }
 
-const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
+const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
   const { configLanguages, locale: currentLocale, setLocale } = props
-
+  const languageOptions: Record<string, any> | null =
+    getLanguageOptions(configLanguages)
   const intl = useIntl()
 
-  return (
+  // Only render if two or more languages are configured.
+  return languageOptions ? (
     <Dropdown
       id="locale-selector"
       label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
@@ -38,30 +39,25 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
       style={{ display: 'block ruby' }}
       // TODO: How to make this work without block ruby?
     >
-      {Object.keys(configLanguages)
-        .filter((locale) => locale !== 'allLanguages')
-        .map((locale) => (
-          <li
-            aria-selected={locale === currentLocale}
-            key={locale}
-            lang={locale}
-            onClick={() => setLocale(locale)}
-            onKeyPress={() => setLocale(locale)}
-            // We are correct, not eslint: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-            role="option"
-            tabIndex={0}
-          >
-            <UnstyledButton
-              style={locale === currentLocale ? { fontWeight: 'bold' } : {}}
-              tabIndex={-1}
-            >
-              {configLanguages[locale].name}
-            </UnstyledButton>
-          </li>
-        ))}
+      {Object.keys(languageOptions).map((locale: string) => (
+        <li
+          aria-selected={locale === currentLocale || undefined}
+          key={locale}
+          lang={locale}
+          onClick={() => setLocale(locale)}
+          onKeyPress={() => setLocale(locale)}
+          // We are correct, not eslint: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+          role="option"
+          tabIndex={0}
+        >
+          <UnstyledButton tabIndex={-1}>
+            {languageOptions[locale].name}
+          </UnstyledButton>
+        </li>
+      ))}
     </Dropdown>
-  )
+  ) : null
 }
 
 // Typescript TODO: type state properly
@@ -75,5 +71,4 @@ const mapDispatchToProps = {
   setLocale: uiActions.setLocale
 }
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
-export default connector(LocaleSelector)
+export default connect(mapStateToProps, mapDispatchToProps)(LocaleSelector)

Diff for: lib/components/mobile/navigation-bar.js

@@ -74,16 +74,7 @@ class MobileNavigationBar extends Component {
         )}
 
         <div className="locale-selector-and-login">
-          {configLanguages &&
-            // Ensure that > 1 valid language is defined
-            Object.keys(configLanguages).filter(
-              (key) => key !== 'allLanguages' && configLanguages[key].name
-            ).length > 1 && (
-              <LocaleSelector
-                className="locale-selector"
-                configLanguages={configLanguages}
-              />
-            )}
+          <LocaleSelector configLanguages={configLanguages} />
           {/**
            * HACK: Normally, NavLoginButtonAuth0 should be inside a <Nav> element,
            * however, in mobile mode, react-bootstrap's <Nav> causes the

Diff for: lib/util/i18n.js

@@ -49,6 +49,28 @@ export function getConfigLocales(configLanguages) {
   return locales
 }
 
+/**
+ * Gets entries to display in language selectors, ensuring that at least one language is shown.
+ * This excludes the generic 'allLanguages' section in the config.
+ * @param {*} configLanguages The configured languages.
+ * @returns An array of the supported locale ids if 2 or more are configured, null otherwise.
+ */
+export function getLanguageOptions(configLanguages) {
+  const filteredKeys =
+    (configLanguages &&
+      Object.keys(configLanguages).filter(
+        (key) => key !== 'allLanguages' && configLanguages[key].name
+      )) ||
+    []
+  if (filteredKeys.length < 2) return null
+
+  const filteredLanguages = {}
+  filteredKeys.forEach((key) => {
+    filteredLanguages[key] = configLanguages[key]
+  })
+  return filteredLanguages
+}
+
 /**
  * Loads in all localized strings from @opentripplanner packages.
  * Package list is loaded from the package.json and each yml file then imported.