more accessibility fixes

sharhio · sharhio · commit fcb2dd2e8585 · 2026-05-13T10:32:38.000+03:00
diff --git a/src/ui/LargeModal.tsx b/src/ui/LargeModal.tsx
@@ -31,7 +31,7 @@ const LargeModal: FC<IProps> = ({
       aria={{ labelledby: 'large-modal-heading' }}
     >
       <div className="monitor-modal-container">
-        <section id="close">
+        <div id="close">
           <button
             className="close-button"
             aria-label={t('close')}
@@ -44,7 +44,7 @@ const LargeModal: FC<IProps> = ({
               width={24}
             />
           </button>
-        </section>
+        </div>
         <h2 id="large-modal-heading" className="monitor-modal-header">
           {t(header)}
         </h2>
diff --git a/src/ui/MapModal.scss b/src/ui/MapModal.scss
@@ -15,6 +15,11 @@
   align-items: center;
   justify-content: center;
 
+  h2 {
+    margin: 0;
+    font-weight: normal;
+  }
+
   #close {
     display: flex;
     justify-content: flex-end;
diff --git a/src/ui/MapModal.tsx b/src/ui/MapModal.tsx
@@ -51,15 +51,16 @@ const MapModal: FC<Props> = ({
       onRequestClose={() => onClose(false)}
       portalClassName={cx('preview', !isLandscape ? 'portrait' : '')}
       ariaHideApp={ariaHideApp}
+      aria={{ labelledby: 'map-modal-heading' }}
     >
       <div className="mapmodal">
         <div className="map-modal-header">
-          {' '}
-          {t('select-bounds')}{' '}
-          <section id="close">
+          <h2 id="map-modal-heading">
+            {t('select-bounds')}
+          </h2>
+          <div id="close">
             <button
               className="close-button"
-              role="button"
               aria-label={t('close')}
               onClick={() => onClose(false)}
             >
@@ -69,8 +70,8 @@ const MapModal: FC<Props> = ({
                 height={24}
                 width={24}
               />
-            </button>{' '}
-          </section>
+            </button>
+          </div>
         </div>
         <MonitorMapContainer
           mapSettings={mapSettings}
diff --git a/src/ui/PreviewModal.scss b/src/ui/PreviewModal.scss
@@ -40,10 +40,12 @@
         position: relative;
         font-family: $font-family;
         font-size: 24px;
+        font-weight: normal;
         line-height: 29px;
         letter-spacing: -0.02em;
         color: #fff;
         width: 540px;
+        margin: 0;
       }
 
       .close {
diff --git a/src/ui/PreviewModal.tsx b/src/ui/PreviewModal.tsx
@@ -48,19 +48,19 @@ const PreviewModal: FC<Props> = ({
         onRequestClose={() => onClose(false)}
         portalClassName={cx('preview', !isLandscape ? 'portrait' : '')}
         ariaHideApp={ariaHideApp}
+        aria={{ labelledby: 'preview-modal-heading' }}
       >
         <div className="title-and-close">
-          <div className="title">{t('preview')}</div>
-          <section id="close">
+          <h2 id="preview-modal-heading" className="title">{t('preview')}</h2>
+          <div>
             <button
               className="close"
-              role="button"
               aria-label={t('close')}
               onClick={() => onClose(false)}
             >
               <Icon img="close" color={'#FFFFFF'} height={16} width={16} />
             </button>
-          </section>
+          </div>
         </div>
         <section
           id={isLandscape ? 'preview-monitor' : 'preview-monitor-portrait'}
diff --git a/src/ui/StopCardRow.scss b/src/ui/StopCardRow.scss
@@ -154,6 +154,7 @@
       max-width: 300px;
 
       .header {
+        display: block;
         padding-bottom: 16px;
         margin-left: 2px;
       }
diff --git a/src/ui/StopCardRow.tsx b/src/ui/StopCardRow.tsx
@@ -429,7 +429,7 @@ const StopCardRow: FC<IProps> = ({
               appElement={'root'}
               searchContext={searchContext}
               icon="search"
-              id={'search'}
+              id={`search-${id}`}
               ariaLabel={t('autosuggestPlaceHolder')}
               placeholder={t('autosuggestPlaceHolder')}
               renderLabel
diff --git a/src/ui/StopListContainer.tsx b/src/ui/StopListContainer.tsx
@@ -52,7 +52,7 @@ const StopListContainer: FC<Props> = ({
   return (
     <div className="stop-list">
       <section
-        id={'left'}
+        id={`left-${card.id}`}
         aria-label={showStopTitles ? t('leftColumn') : undefined}
       >
         <div>
@@ -73,7 +73,10 @@ const StopListContainer: FC<Props> = ({
           {showStopTitles && leftItems.length === 0 && (
             <StopListPlaceHolder text={t('no-stops-selected')} />
           )}
-          <ul className="stops" aria-label={t('added-stops')}>
+          <ul
+            className="stops"
+            aria-label={showStopTitles ? t('leftColumn') : t('added-stops')}
+          >
             {leftItems &&
               leftItems.map((item, index) => {
                 const s = {
@@ -98,7 +101,7 @@ const StopListContainer: FC<Props> = ({
         </div>
       </section>
       {showStopTitles && (
-        <section id={'right'} aria-label={t('rightColumn')}>
+        <section id={`right-${card.id}`} aria-label={t('rightColumn')}>
           <div className="double-inputs">
             {languages?.map(lan => (
               <StopListTitleInput
@@ -115,7 +118,7 @@ const StopListContainer: FC<Props> = ({
             <StopListPlaceHolder text={t('no-stops-selected')} />
           )}
           <div>
-            <ul className="stops" aria-label={t('added-stops')}>
+            <ul className="stops" aria-label={t('rightColumn')}>
               {rightItems &&
                 rightItems.map((item, index) => {
                   const s = {
diff --git a/src/ui/StopListTitleInput.tsx b/src/ui/StopListTitleInput.tsx
@@ -31,9 +31,9 @@ const StopListTitleInput: FC<IProps> = ({
 
   return (
     <div className="stop-list-title-input">
-      <div className="header">
+      <label className="header" htmlFor={`stop-list-title-input-${side}-${lang}`}>
         {t(`header-side-${side}`).concat(' - ').concat(lang.toUpperCase())}
-      </div>
+      </label>
       <InputWithEditIcon
         onChange={title => onChange(title, side)}
         id={`stop-list-title-input-${side}-${lang}`}
diff --git a/src/ui/StopRoutesModal.scss b/src/ui/StopRoutesModal.scss
@@ -1,5 +1,6 @@
 .modal-stop-routes {
-  h2 {
+  h2,
+  h3 {
     font-style: normal;
     font-weight: $font-weight;
     font-size: 18px;
diff --git a/src/ui/StopRoutesModal.tsx b/src/ui/StopRoutesModal.tsx
@@ -1,11 +1,17 @@
 import cx from 'classnames';
-import React, { FC, useContext, useState } from 'react';
+import React, {
+  FC,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import Button from './Button';
 import Checkbox from './CheckBox';
 import Dropdown from './Dropdown';
 import Icon from './Icon';
 import { useTranslation } from 'react-i18next';
-import { IStopInfoPlus, IPattern, IRoute } from '../util/Interfaces';
+import { IStopInfoPlus, IRoute } from '../util/Interfaces';
 import Modal from 'react-modal';
 import { getRouteMode } from '../util/stopCardUtil';
 import { isKeyboardSelectionEvent } from '../util/browser';
@@ -46,6 +52,11 @@ const StopRoutesModal: FC<Props> = props => {
   const [renamings, setRenamings] = useState(
     props.stopSettings?.renamedDestinations || [],
   );
+
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {
+    closeButtonRef.current?.focus();
+  }, []);
   const stopCode = props.stop.code ? `(${props.stop.code})` : '';
   const text = t('stopSettings', {
     stop: props.stop.name,
@@ -224,8 +235,9 @@ const StopRoutesModal: FC<Props> = props => {
       aria={{ labelledby: 'stop-routes-modal-title', modal: true }}
     >
       <div className="modal">
-        <section id="close">
+        <div id="close">
           <button
+            ref={closeButtonRef}
             className="close-button"
             aria-label={t('close')}
             onClick={handleClose}
@@ -237,7 +249,7 @@ const StopRoutesModal: FC<Props> = props => {
               width={24}
             />
           </button>
-        </section>
+        </div>
         <section className="section-margin-large">
           <div className="title-container">
             <h2 id="stop-routes-modal-title" className="title">
@@ -271,7 +283,7 @@ const StopRoutesModal: FC<Props> = props => {
           <div className="divider" />
         </section>
         <section className="section-margin-large timeshift">
-          <h2> {t('timeShift')}</h2>
+          <h3>{t('timeShift')}</h3>
           <p>{t('timeShiftDescription')}</p>
           <div className="show-departures-over">
             {t('timeShiftShow')}
@@ -289,12 +301,12 @@ const StopRoutesModal: FC<Props> = props => {
         </section>
         <section className="section-margin-large title-and-no-renaming">
           <div className="title">
-            <h2>
+            <h3>
               {t('hideLines', {
                 hidden: settings.hiddenRoutes.length,
                 all: props.combinedPatterns.length,
               })}
-            </h2>
+            </h3>
           </div>
           <div className="no-renaming">
             <button
@@ -333,7 +345,7 @@ const StopRoutesModal: FC<Props> = props => {
               ))}
             </div>
           )}
-          {props.combinedPatterns.map((pattern, index) => {
+          {props.combinedPatterns.map(pattern => {
             const patternArray = pattern.split(':');
             const gtfsID = [patternArray[0], patternArray[1]].join(':');
             const renameId = getRenameDestinationId(patternArray[3], gtfsID);
@@ -379,7 +391,6 @@ const StopRoutesModal: FC<Props> = props => {
                 <div className="renamedDestinations">
                   {props.languages.map(lang => (
                     <input
-                      tabIndex={showInputs ? 0 : -1}
                       key={`${lang}-${renameId}`}
                       id={`${lang}-${renameId}`}
                       name={renameId}
@@ -390,12 +401,30 @@ const StopRoutesModal: FC<Props> = props => {
                           : undefined
                       }
                       onChange={e => handleRenamedDestination(e, lang)}
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          const focusable =
+                            'button, [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
+                          const all = Array.from(
+                            document.querySelectorAll<HTMLElement>(focusable),
+                          );
+                          const idx = all.indexOf(e.target as HTMLElement);
+                          all[idx + 1]?.focus();
+                        }
+                      }}
                       placeholder={patternArray[3]}
-                      readOnly={!showInputs}
-                      aria-label={t('renameDestinationFor', {
-                        line: patternArray[2],
-                        lang: t(`language-name-${lang as SupportedLanguage}`),
-                      })}
+                      disabled={!showInputs}
+                      aria-label={
+                        showInputs
+                          ? t('renameDestinationFor', {
+                              line: patternArray[2],
+                              lang: t(
+                                `language-name-${lang as SupportedLanguage}`,
+                              ),
+                            })
+                          : renamedDestination?.[lang] || patternArray[3]
+                      }
                     />
                   ))}
                 </div>
diff --git a/src/ui/UserViewTitleEditor.tsx b/src/ui/UserViewTitleEditor.tsx
@@ -64,6 +64,7 @@ const UserViewTitleEditor: FC<IProps> = ({
           id="user-view-title-input"
           onChange={t => updateViewTitle(t)}
           value={title}
+          ariaLabelEdit={`${t('modify')} ${t('staticMonitorTitle')}`}
           inputProps={{
             placeholder: t('staticMonitorTitle'),
             maxLength: 25,

Original file line number	Diff line number	Diff line change
`@@ -154,6 +154,7 @@`
`154`	`154`	`max-width: 300px;`
`155`	`155`
`156`	`156`	`.header {`
	`157`	`+ display: block;`
`157`	`158`	`padding-bottom: 16px;`
`158`	`159`	`margin-left: 2px;`
`159`	`160`	`}`