Read route short names in lower case

app/component/AlternativeLegsInfo.js

@@ -20,8 +20,22 @@ const AlternativeLegsInfo = ({ legs, showAlternativeLegs, toggle }) => {
         className="alternative-leg-info"
         id="alternative-legs"
         values={{
-          leg1: legs[0].route.shortName,
-          leg2: legs[1].route.shortName,
+          leg1: (
+            <>
+              <span aria-hidden="true">{legs[0].route.shortName}</span>
+              <span className="sr-only">
+                {legs[0].route.shortName?.toLowerCase()}
+              </span>
+            </>
+          ),
+          leg2: (
+            <>
+              <span aria-hidden="true">{legs[1].route.shortName}</span>
+              <span className="sr-only">
+                {legs[1].route.shortName?.toLowerCase()}
+              </span>
+            </>
+          ),
           startTime1: (
             <span
               className={cx({ realtime: legs[0].realTime })}
@@ -56,7 +70,14 @@ const AlternativeLegsInfo = ({ legs, showAlternativeLegs, toggle }) => {
         className="alternative-leg-info"
         id="alternative-legs-single"
         values={{
-          leg1: legs[0].route.shortName,
+          leg1: (
+            <>
+              <span aria-hidden="true">{legs[0].route.shortName}</span>
+              <span className="sr-only">
+                {legs[0].route.shortName?.toLowerCase()}
+              </span>
+            </>
+          ),
           startTime1: (
             <span
               className={cx({ realtime: legs[0].realTime })}

app/component/DepartureRow.js

@@ -119,7 +119,7 @@ const DepartureRow = (
               id: 'departure-page-sr',
             },
             {
-              shortName,
+              shortName: shortName?.toLowerCase(),
               destination: headsign,
               time: moment(departureTime * 1000).format('HH:mm'),
             },
@@ -154,7 +154,10 @@ const DepartureRow = (
       >
         {renderWithLink(
           <>
-            <div className="route-number">{shortName}</div>
+            <div aria-hidden="true" className="route-number">
+              {shortName}
+            </div>
+            <span className="sr-only">{shortName?.toLowerCase()}</span>
             {icon && (
               <>
                 <Icon

app/component/FuzzyTripLink.js

@@ -88,14 +88,23 @@ function FuzzyTripLink({ vehicle, stopName, nextStopName, ...rest }, context) {
                 defaultMessage:
                   '{mode} {shortName} is between {stopName} and {nextStopName}',
               },
-              { stopName, nextStopName, mode: localizedMode, shortName },
+              {
+                stopName,
+                nextStopName,
+                mode: localizedMode,
+                shortName: shortName?.toLowerCase(),
+              },
             )
           : context.intl.formatMessage(
               {
                 id: 'route-page-vehicle-position',
                 defaultMessage: '{mode} {shortName} is at {stopName}',
               },
-              { stopName, mode: localizedMode, shortName },
+              {
+                stopName,
+                mode: localizedMode,
+                shortName: shortName?.toLowerCase(),
+              },
             );
 
         return (

app/component/LegInfo.js

@@ -57,7 +57,7 @@ const LegInfo = (
         aria-label={`${intl.formatMessage({
           id: mode.toLowerCase(),
           defaultMessage: 'Vehicle',
-        })} ${leg.route && leg.route.shortName}}`}
+        })} ${leg.route && leg.route.shortName?.toLowerCase()}`}
       >
         <span aria-hidden="true">
           <RouteNumber

app/component/RouteNumber.js

@@ -132,6 +132,7 @@ function RouteNumber(props, context) {
             )}
           >
             <span
+              aria-hidden="true"
               className={cx(
                 'vehicle-number'.concat(props.card ? '-map' : ''),
                 mode,
@@ -141,6 +142,7 @@ function RouteNumber(props, context) {
             >
               {props.text}
             </span>
+            <span className="sr-only">{props.text?.toLowerCase()}</span>
           </div>
         )}
         {!context.config?.hideWalkLegDurationSummary &&

app/component/RoutePage.js

@@ -124,9 +124,10 @@ class RoutePage extends React.Component {
                 <span className="sr-only" style={{ whiteSpace: 'pre' }}>
                   {this.context.intl.formatMessage({
                     id: mode.toLowerCase(),
-                  })}
+                  })}{' '}
+                  {label?.toLowerCase()}
                 </span>
-                {label}
+                <span aria-hidden="true">{label}</span>
               </h1>
               {tripId && headsign && (
                 <div className="trip-destination">

app/component/TransitLeg.js

@@ -413,6 +413,7 @@ class TransitLeg extends React.Component {
           >
             <div className="itinerary-leg-row">
               <Link
+                aria-label={leg.from.name?.toLowerCase()}
                 onClick={e => {
                   e.stopPropagation();
                   addAnalyticsEvent({

app/component/TripLinkWithScroll.js

@@ -66,15 +66,19 @@ function TripLinkWithScroll(
           stopName,
           nextStopName,
           mode: localizedMode,
-          shortName: vehicleNumber,
+          shortName: vehicleNumber?.toLowerCase(),
         },
       )
     : context.intl.formatMessage(
         {
           id: 'route-page-vehicle-position',
           defaultMessage: '{mode} {shortName} is at {stopName}',
         },
-        { stopName, mode: localizedMode, shortName: vehicleNumber },
+        {
+          stopName,
+          mode: localizedMode,
+          shortName: vehicleNumber?.toLowerCase(),
+        },
       );
   if (selected) {
     ariaMessage += context.intl.formatMessage({

app/component/map/non-tile-layer/LegMarker.js

@@ -46,7 +46,10 @@ class LegMarker extends React.Component {
               className: 'map-route-icon',
               color,
             })}
-              <span class="map-route-number">${this.props.leg.name}</span>
+              <span class="map-route-number" aria-hidden="true">${
+                this.props.leg.name
+              }</span>
+              <span class="sr-only">${this.props.leg.name.toLowerCase()}</span>
             </div>`,
           className: `${
             this.props.style ? `arrow-${this.props.style}` : 'legmarker'

digitransit-component/packages/digitransit-component-autosuggest-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest-panel",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "digitransit-component autosuggest-panel module",
   "main": "index.js",
   "files": [
@@ -28,7 +28,7 @@
   "author": "Digitransit Authors",
   "license": "(AGPL-3.0 OR EUPL-1.2)",
   "peerDependencies": {
-    "@digitransit-component/digitransit-component-autosuggest": "^2.0.3",
+    "@digitransit-component/digitransit-component-autosuggest": "^2.0.4",
     "@digitransit-component/digitransit-component-icon": "^1.0.1",
     "@hsl-fi/sass": "^0.2.0",
     "classnames": "2.2.6",

digitransit-component/packages/digitransit-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "digitransit-component autosuggest module",
   "main": "index.js",
   "files": [
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@digitransit-component/digitransit-component-dialog-modal": "^0.3.4",
     "@digitransit-component/digitransit-component-icon": "^1.0.1",
-    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.2",
+    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.3",
     "@hsl-fi/sass": "^0.2.0",
     "classnames": "2.2.6",
     "i18next": "^19.3.3",

digitransit-component/packages/digitransit-component-autosuggest/src/index.js

@@ -167,7 +167,6 @@ const getSuggestionValue = suggestion => {
   }
   return getLabel(suggestion.properties);
 };
-
 /**
  * @example
  * const searchContext = {
@@ -953,7 +952,8 @@ class DTAutosuggest extends React.Component {
     const ariaCurrentSuggestion = () => {
       if (this.suggestionAsAriaContent() || this.props.value) {
         return i18next.t('search-current-suggestion', {
-          selection: this.suggestionAsAriaContent() || this.props.value,
+          selection:
+            this.suggestionAsAriaContent().toLowerCase() || this.props.value,
         });
       }
       return '';

digitransit-component/packages/digitransit-component-favourite-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-favourite-bar",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "digitransit-component favourite-bar module",
   "main": "index.js",
   "files": [
@@ -33,7 +33,7 @@
   },
   "peerDependencies": {
     "@digitransit-component/digitransit-component-icon": "^1.0.1",
-    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.2",
+    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.3",
     "@hsl-fi/sass": "^0.2.0",
     "@hsl-fi/shimmer": "0.1.2",
     "classnames": "2.2.6",

digitransit-component/packages/digitransit-component-suggestion-item/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-suggestion-item",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "digitransit-component suggestion-item module",
   "main": "index.js",
   "files": [

digitransit-component/packages/digitransit-component-suggestion-item/src/index.js

@@ -31,7 +31,7 @@ function getAriaDescription(ariaContentArray) {
   const description = ariaContentArray
     .filter(part => part !== undefined && part !== null && part !== '')
     .join(' ');
-  return description;
+  return description?.toLowerCase();
 }
 
 function getIconProperties(
@@ -352,6 +352,7 @@ const SuggestionItem = pure(
             iconId !== 'edit' && (
               <span>
                 <div
+                  aria-hidden="true"
                   className={cx(styles['suggestion-name'], styles[className])}
                 >
                   {name}

digitransit-component/packages/digitransit-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "a JavaScript library for Digitransit",
   "main": "digitransit-component",
   "module": "digitransit-component.mjs",
@@ -14,14 +14,14 @@
     "docs": "node -r esm ../../scripts/generate-readmes"
   },
   "dependencies": {
-    "@digitransit-component/digitransit-component-autosuggest": "^2.0.3",
-    "@digitransit-component/digitransit-component-autosuggest-panel": "^3.0.3",
+    "@digitransit-component/digitransit-component-autosuggest": "^2.0.4",
+    "@digitransit-component/digitransit-component-autosuggest-panel": "^3.0.4",
     "@digitransit-component/digitransit-component-control-panel": "^1.1.6",
-    "@digitransit-component/digitransit-component-favourite-bar": "2.0.2",
+    "@digitransit-component/digitransit-component-favourite-bar": "2.0.3",
     "@digitransit-component/digitransit-component-favourite-editing-modal": "^2.0.0",
     "@digitransit-component/digitransit-component-favourite-modal": "^1.0.4",
     "@digitransit-component/digitransit-component-icon": "^1.0.1",
-    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.2",
+    "@digitransit-component/digitransit-component-suggestion-item": "^2.0.3",
     "@digitransit-component/digitransit-component-with-breakpoint": "^0.0.5"
   },
   "peerDependencies": {