Merge pull request #534 from HSLdevcom/AB#562

Ab#562 Accessibility improvements

Author: sharhio

src/App.scss

@@ -51,3 +51,12 @@ li {
   white-space: nowrap;
   width: 1px;
 }
+
+:focus-visible {
+  outline: 3px solid var(--primary-color, #005fcc);
+  outline-offset: 2px;
+}
+
+input[type='checkbox']:focus-visible {
+  outline: none;
+}

src/App.tsx

@@ -216,9 +216,9 @@ const App: FC<IConfigurationProps> = props => {
                   <>
                     <SkipToMainContent />
                     <BannerContainer />
-                    <section role="main" id="mainContent">
+                    <main id="mainContent">
                       <CreateViewPage />
-                    </section>
+                    </main>
                   </>
                 )}
               />
@@ -234,9 +234,9 @@ const App: FC<IConfigurationProps> = props => {
                   <>
                     <SkipToMainContent />
                     <BannerContainer />
-                    <section role="main" id="mainContent">
+                    <main id="mainContent">
                       <CreateViewPage />
-                    </section>
+                    </main>
                   </>
                 )}
               />
@@ -246,9 +246,9 @@ const App: FC<IConfigurationProps> = props => {
                   <>
                     <SkipToMainContent />
                     <BannerContainer />
-                    <section role="main" id="mainContent">
+                    <main id="mainContent">
                       <UserMonitors />
-                    </section>
+                    </main>
                   </>
                 )}
               />

src/LandingPage.tsx

@@ -36,19 +36,17 @@ const LandingPage = () => {
         <Link
           to={'/createview'}
           id="create-new-link"
-          aria-label={t('quickDisplayCreate')}
+          className="monitor-button blue"
         >
-          <button className="monitor-button blue">
-            {t('quickDisplayCreate')}
-          </button>
+          {t('quickDisplayCreate')}
         </Link>
       )}
     </>
   );
   return (
     <>
       <BannerContainer />
-      <section role="main" id="mainContent">
+      <main id="mainContent">
         {logIn ? (
           <Redirect
             to={{
@@ -58,7 +56,7 @@ const LandingPage = () => {
         ) : (
           <IndexPage buttons={buttons} renderLogInMessage />
         )}
-      </section>
+      </main>
     </>
   );
 };

src/i18n.ts

@@ -15,6 +15,7 @@ export const resources = {
       breadCrumbsModify: 'Edit the stop display',
       breadCrumbsOwnMonitors: 'My stop displays',
       breadCrumbsSite: 'Journey Planner',
+      breadcrumbsNav: 'Breadcrumb',
       cancel: 'Cancel',
       cancelled: 'Cancelled',
       changeLanguage: 'Change language to {{language}}',
@@ -41,6 +42,8 @@ export const resources = {
       displayLanguages: 'Languages',
       displayMap: 'Map view',
       duration: 'Duration / language',
+      'duration-disabled':
+        'Duration / language – not applicable for a single view with one language',
       'edit-display': 'Edit display',
       'edit-map': 'Adjust the crop >',
       'front-page-no-sign-in-button': 'Continue without logging in',
@@ -66,6 +69,7 @@ export const resources = {
       'import-instructions':
         'Give the URL address of an existing stop display to add it to your displays.',
       'import-monitor': 'Import display',
+      'import-url-label': 'URL address',
       'info-display-only-one':
         'You can select a service update view only for a display with one stop view.',
       'info-text-short': 'Departures in a chronological order',
@@ -81,6 +85,10 @@ export const resources = {
       'language-name-en': 'English',
       'language-name-fi': 'Finnish',
       'language-name-sv': 'Swedish',
+      'added-stops': 'Added stops',
+      leftColumn: 'Left column',
+      rightColumn: 'Right column',
+      renameDestinationFor: 'Rename {{line}} destination in {{lang}}',
       languageSelection: 'Language selection',
       layout: 'Layout',
       'layout-double': 'Double view',
@@ -122,6 +130,7 @@ export const resources = {
       'one-column': 'One column',
       open: 'Open the display',
       ok: 'OK',
+      notice: 'Notice',
       or: 'or',
       'platform-or-stop': 'Platform/Stop',
       prepareDisplay: 'Add new stop view',
@@ -155,7 +164,14 @@ export const resources = {
       stop: 'Stop',
       'stop-display': 'Stop display',
       stopSettings: 'Settings for stop {{stop}} ({{code}})',
+      maptitle: 'Name of the map view',
       stoptitle: 'Name of the stop view',
+      'transport-mode-bus': 'Bus stop',
+      'transport-mode-tram': 'Tram stop',
+      'transport-mode-rail': 'Train stop',
+      'transport-mode-subway': 'Metro stop',
+      'transport-mode-ferry': 'Ferry stop',
+      'transport-mode-airplane': 'Airport',
       tighten: 'Convergent',
       timeShift: 'Filter departures by time',
       timeShiftDescription:
@@ -182,6 +198,7 @@ export const resources = {
       breadCrumbsModify: 'Muokkaa pysäkkinäyttöä',
       breadCrumbsOwnMonitors: 'Omat pysäkkinäytöt',
       breadCrumbsSite: 'Reittiopas',
+      breadcrumbsNav: 'Murupolku',
       cancel: 'Peruuta',
       cancelled: 'Peruttu',
       changeLanguage: 'Vaihda kieleen {{language}}',
@@ -209,6 +226,8 @@ export const resources = {
       displayLanguages: 'Esityskielet',
       displayMap: 'Karttanäkymä',
       duration: 'Kesto / esityskieli',
+      'duration-disabled':
+        'Kesto / esityskieli – ei käytössä yksittäiselle näkymälle, jossa on yksi kieli',
       'edit-display': 'Muokkaa näyttöä',
       'edit-map': 'Muokkaa rajausta > ',
       'front-page-no-sign-in-button': 'Jatka kirjautumatta',
@@ -234,6 +253,7 @@ export const resources = {
       'import-instructions':
         'Anna olemassaolevan pysäkkinäytön URL-osoite, niin voit lisätä sen omiin näyttöihisi',
       'import-monitor': 'Tuo näyttö',
+      'import-url-label': 'URL-osoite',
       'info-display-only-one':
         'Voit valita tiedotenäytön vain näyttöön, jossa on yksi pysäkkinäkymä.',
       'info-text-short': 'Lähdöt aikajärjestyksessä',
@@ -247,6 +267,11 @@ export const resources = {
       'language-name-en': 'Englanti',
       'language-name-fi': 'Suomi',
       'language-name-sv': 'Ruotsi',
+      'added-stops': 'Lisätyt pysäkit',
+      leftColumn: 'Vasen sarake',
+      rightColumn: 'Oikea sarake',
+      renameDestinationFor:
+        'Nimeä linjan {{line}} kohde uudelleen kielellä {{lang}}',
       languageSelection: 'Kielen valinta',
       layout: 'Asettelu',
       'layout-double': 'Kaksoisnäkymä',
@@ -288,6 +313,7 @@ export const resources = {
       'one-column': 'Yksi sarake',
       open: 'Avaa näyttö',
       ok: 'OK',
+      notice: 'Huomio',
       or: 'tai',
       'platform-or-stop': 'Lait./Pys.',
       prepareDisplay: 'Lisää uusi pysäkkinäkymä',
@@ -322,6 +348,12 @@ export const resources = {
       'stop-display': 'Pysäkkinäyttö',
       stopSettings: 'Pysäkin {{stop}} {{code}} asetukset',
       stoptitle: 'Pysäkkinäkymän nimi',
+      'transport-mode-bus': 'Bussipysäkki',
+      'transport-mode-tram': 'Raitiovaunupysäkki',
+      'transport-mode-rail': 'Juna-asema',
+      'transport-mode-subway': 'Metroasema',
+      'transport-mode-ferry': 'Lauttapysäkki',
+      'transport-mode-airplane': 'Lentokenttä',
       tighten: 'Tiivistyvä',
       timeShift: 'Rajaa lähtöjä ajan mukaan',
       timeShiftDescription:
@@ -348,6 +380,7 @@ export const resources = {
       breadCrumbsModify: 'Redigera hållplatsskärmen',
       breadCrumbsOwnMonitors: 'Mina hållplatsskärmar',
       breadCrumbsSite: 'Reseplaneraren',
+      breadcrumbsNav: 'Brödsmulor',
       cancel: 'Ångra',
       cancelled: 'Inställt',
       changeLanguage: 'Byt språket till {{language}}',
@@ -375,6 +408,8 @@ export const resources = {
       displayLanguages: 'Språk',
       displayMap: 'Kartvy',
       duration: 'Tid / språk',
+      'duration-disabled':
+        'Tid / språk – inte tillgänglig för en enskild vy med ett språk',
       'edit-display': 'Redigera skärmen',
       'edit-map': 'Justera beskärningen >',
       'front-page-no-sign-in-button': 'Fortsätt utan att logga in',
@@ -400,6 +435,7 @@ export const resources = {
       'import-instructions':
         'Ange URL-adressen för en existerande hållplatsskärm för att lägga till den i dina skärmar',
       'import-monitor': 'Importera skärmen',
+      'import-url-label': 'URL-adress',
       'info-display-only-one':
         'Du kan välja meddelandeskärmen endast för en skärm som har bara en hållplatsvy.',
       'info-text-short': 'Avgångarna i kronologisk ordning',
@@ -414,6 +450,10 @@ export const resources = {
       'language-name-en': 'engelska',
       'language-name-fi': 'finska',
       'language-name-sv': 'svenska',
+      'added-stops': 'Tillagda hållplatser',
+      leftColumn: 'Vänster kolumn',
+      rightColumn: 'Höger kolumn',
+      renameDestinationFor: 'Byt namn på {{line}} destination på {{lang}}',
       languageSelection: 'Språkval',
       layout: 'Justering',
       'layout-double': 'Dubbelvy',
@@ -455,6 +495,7 @@ export const resources = {
       'one-column': 'En kolumn',
       open: 'Öppna skärmen',
       ok: 'OK',
+      notice: 'Observera',
       or: 'eller',
       'platform-or-stop': 'Plattf./Hållpl.',
       prepareDisplay: 'Lägg till ny hållplatsskärm',
@@ -489,7 +530,14 @@ export const resources = {
       stop: 'Hållplats',
       'stop-display': 'Hållplatsskärm',
       stopSettings: 'Inställningar för hållplats {{stop}} ({{code}})',
+      maptitle: 'Kartvyns namn',
       stoptitle: 'Hållplatsskärmens namn',
+      'transport-mode-bus': 'Busshållplats',
+      'transport-mode-tram': 'Spårvagnshållplats',
+      'transport-mode-rail': 'Tågstation',
+      'transport-mode-subway': 'Metrostation',
+      'transport-mode-ferry': 'Färjehållplats',
+      'transport-mode-airplane': 'Flygplats',
       tighten: 'Förtätad',
       timeShift: 'Välja bort avgångar baserat på tid',
       timeShiftDescription:

src/test/IndexPage.test.tsx

@@ -45,6 +45,8 @@ it('should add createView to path when the button is clicked', () => {
 });
 
 it('render an image', () => {
-  const screen = render(<MemoryRouter>{withContext()}</MemoryRouter>);
-  expect(screen.getAllByAltText('monitor-image').length).toEqual(1);
+  const { container } = render(<MemoryRouter>{withContext()}</MemoryRouter>);
+  const img = container.querySelector('img.desktop-img');
+  expect(img).not.toBeNull();
+  expect(img.getAttribute('alt')).toBe('');
 });

src/test/MonitorRow.test.tsx

@@ -87,7 +87,7 @@ it('should render a cancelled departure with alert icon and destination', () =>
   expect(
     container.getElementsByClassName('grid-col destination')[0]?.children[0]
       .nodeName,
-  ).toEqual('svg');
+  ).toEqual('SPAN');
 });
 
 it('should do show tilde when realtime is off', () => {

src/ui/Banner.tsx

@@ -44,7 +44,6 @@ const Banner = () => {
             {user.sub ? (
               <button
                 className="menu-button"
-                role="button"
                 aria-label={t('userMenuOpen')}
                 onClick={setUserOpen}
               >
@@ -85,7 +84,6 @@ const Banner = () => {
       <div className="menu-container">
         <button
           className="menu-button"
-          role="button"
           aria-label={t('menuOpen')}
           onClick={setBurgerOpen}
         >

src/ui/BannerContainer.tsx

@@ -7,10 +7,10 @@ import { ConfigContext } from '../contexts';
 const BannerContainer = () => {
   const config = useContext(ConfigContext);
   return (
-    <section className="navigation-container" aria-label="navigation">
+    <nav className="navigation-container" aria-label="navigation">
       {config.name === 'hsl' ? <BannerHSL /> : <Banner />}
       <Breadcrumbs />
-    </section>
+    </nav>
   );
 };
 

src/ui/Breadcrumbs.scss

@@ -7,6 +7,10 @@
   padding-top: 39px;
 
   .crumbs {
+    padding-left: 0;
+    list-style: none;
+    margin: 0;
+
     .to-home {
       text-decoration: none;
       color: $primary-color;
@@ -24,6 +28,7 @@
   }
 
   .main-header {
+    margin: 0;
     padding-top: 53px;
     font-size: 36px;
     font-style: normal;

src/ui/Breadcrumbs.tsx

@@ -39,37 +39,39 @@ const Breadcrumbs = () => {
 
   return (
     <div className="breadcrumbs-container">
-      <div className="crumbs">
-        {crumbs.map((crumb, i) => {
-          let path = arr[i];
-          if (crumb === null) {
-            crumb = 'breadCrumbsCreate';
-            path = '';
-          }
-          return (
-            <React.Fragment key={`crumb${i}`}>
-              {i !== 0 && (
-                <Icon
-                  img={'arrow-down'}
-                  width={14}
-                  height={14}
-                  rotate={'-90'}
-                  color={config.colors.primary}
-                  margin={'0 10px'}
-                />
-              )}
-              {i === crumbs.length - 1 ? (
-                t(crumb)
-              ) : (
-                <Link className="to-home" to={`/${path}`}>
-                  {t(crumb)}
-                </Link>
-              )}
-            </React.Fragment>
-          );
-        })}
-      </div>
-      <span className="main-header">{t(crumbs[crumbs.length - 1])}</span>
+      <nav aria-label={t('breadcrumbsNav')}>
+        <ol className="crumbs">
+          {crumbs.map((crumb, i) => {
+            let path = arr[i];
+            if (crumb === null) {
+              crumb = 'breadCrumbsCreate';
+              path = '';
+            }
+            return (
+              <li key={`crumb${i}`} style={{ display: 'contents' }}>
+                {i !== 0 && (
+                  <Icon
+                    img={'arrow-down'}
+                    width={14}
+                    height={14}
+                    rotate={'-90'}
+                    color={config.colors.primary}
+                    margin={'0 10px'}
+                  />
+                )}
+                {i === crumbs.length - 1 ? (
+                  <span aria-current="page">{t(crumb)}</span>
+                ) : (
+                  <Link className="to-home" to={`/${path}`}>
+                    {t(crumb)}
+                  </Link>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+      <h1 className="main-header">{t(crumbs[crumbs.length - 1])}</h1>
     </div>
   );
 };