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/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

@@ -69,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',
@@ -129,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',
@@ -162,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:
@@ -244,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ä',
@@ -303,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ä',
@@ -337,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:
@@ -418,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',
@@ -477,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',
@@ -511,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/BurgerMenu.scss

@@ -16,7 +16,7 @@
     margin: 20px;
     width: 100%;
 
-    #close {
+    .modal-close-container {
       display: flex;
       justify-content: flex-end;
 

src/ui/BurgerMenu.tsx

@@ -95,7 +95,7 @@ const BurgerMenu: FC<Props> = ({ createStatic, isOpen, onClose }) => {
       contentLabel={t('menuOpen')}
     >
       <div className="container">
-        <section id="close">
+        <section className="modal-close-container">
           <button
             className="close-button"
             aria-label={t('menuClose')}

src/ui/CheckBox.scss

@@ -1,14 +1,16 @@
 
 .check-box {
+  position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   margin: 5px;
 
   input[type="checkbox"] {
-    clip: rect(0 0 0 0);
+    position: absolute;
     clip-path: inset(50%);
-    height: 0;
+    height: 1px;
+    width: 1px;
     overflow: hidden;
     white-space: nowrap;
   }

src/ui/CreateViewPage.tsx

@@ -172,6 +172,7 @@ const CreateViewPage = () => {
       {showMonitorInfoModal && (
         <Modal
           appElement="#root"
+          contentLabel={t('notice')}
           closeButtonLabel={t('close')}
           isOpen
           variant="small"

src/ui/DeleteModal.tsx

@@ -20,6 +20,7 @@ const DeleteModal: FC<IProps> = ({
   return (
     <Modal
       appElement="#root"
+      contentLabel={t('delete-display', { id: name })}
       closeButtonLabel={t('close')}
       isOpen
       variant="small"
@@ -34,10 +35,13 @@ const DeleteModal: FC<IProps> = ({
         </div>
         <div className="monitor-modal-buttons">
           <button
-            disabled={loading}
+            aria-disabled={loading || undefined}
+            aria-busy={loading || undefined}
             className="monitor-button blue"
-            aria-label={t('delete-display', { id: name })}
-            onClick={onDeleteCallBack}
+            onClick={() => {
+              if (loading) return;
+              onDeleteCallBack();
+            }}
           >
             {loading ? <Loading small primary /> : <>{t('delete')}</>}
           </button>