Add labels to nearby view filtering

i18n/en-US.yml

@@ -395,6 +395,7 @@ components:
     distanceAway: "{localizedDistanceString} away"
     error: An error occurred loading nearby amenities.
     errorHeader: Error
+    filterNearby: Filter nearby results
     header: Nearby View
     headsign: "{destination}"
     nearbyListIntro: List of {count} nearby entities.

i18n/fr.yml

@@ -406,6 +406,7 @@ components:
     distanceAway: à {localizedDistanceString}
     error: Erreur lors du chargement des services à proximité.
     errorHeader: Erreur
+    filterNearby: Filtrer les entités à proximité
     header: À proximité
     headsign: "{destination}"
     nearbyListIntro: Liste de {count} entités à proximité.

lib/components/viewers/nearby/nearby-filter.tsx

@@ -1,13 +1,19 @@
 import { Check2 } from '@styled-icons/bootstrap/Check2'
+import { useIntl } from 'react-intl'
+import React, { useContext } from 'react'
+import styled from 'styled-components'
 
 import { ComponentContext } from '../../../util/contexts'
 import { getBaseColor } from '../../util/colors'
-import { NearbyFilterConfig } from '../../../util/config-types'
-import React, { useContext } from 'react'
-
 import { invisibleCss } from '../../util/invisible-a11y-label'
+import { NearbyFilterConfig } from '../../../util/config-types'
 
-import styled from 'styled-components'
+const FILTER_LABELS = {
+  BikeRentalStation: 'components.nearbyView.bikeRentalStation',
+  RentalVehicle: 'common.modes.rent',
+  Stop: 'components.MapLayers.stops',
+  VehicleParking: 'common.modes.car_park'
+}
 
 const StyledFilterCheckbox = styled.label<{ checked: boolean }>`
   width: 75px;
@@ -37,6 +43,7 @@ const StyledFilterCheckbox = styled.label<{ checked: boolean }>`
 
   input {
     ${invisibleCss}
+    position: absolute;
   }
   &:hover {
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -55,18 +62,25 @@ export const FilterCheckboxes = ({
   onChange: (arg: React.ChangeEvent<HTMLInputElement>) => void
   value: boolean
 }): JSX.Element => {
+  const intl = useIntl()
   // @ts-expect-error component context
   const { ModeIcon, SvgIcon } = useContext(ComponentContext)
   // The icon is either in SvgIcon or ModeIcon so provide both
   const ModeFilterIcon = () => (
     <ModeIcon className="mode-svg" mode={filter.iconName} />
   )
+  const filterLabel = intl.formatMessage({ id: FILTER_LABELS[filter.cardType] })
 
   return (
-    <StyledFilterCheckbox checked={value} htmlFor={filter.cardType}>
+    <StyledFilterCheckbox
+      checked={value}
+      htmlFor={filter.cardType}
+      title={filterLabel}
+    >
       <SvgIcon Fallback={ModeFilterIcon} iconName={filter.iconName} />
       {value && <Check2 />}
       <input
+        aria-label={filterLabel}
         checked={value}
         id={filter.cardType}
         onChange={onChange}

lib/components/viewers/nearby/nearby-view.tsx

@@ -428,10 +428,13 @@ function NearbyView({
           suggestionCount={geocoderConfig?.resultsCount}
         />
         {nearbyFilters && (
-          <div
+          <fieldset
             className="filter-container"
             style={{ display: 'flex', gap: '10px', marginTop: '10px' }}
           >
+            <InvisibleA11yLabel as="legend" style={{ position: 'absolute' }}>
+              <FormattedMessage id="components.NearbyView.filterNearby" />
+            </InvisibleA11yLabel>
             {nearbyFilters.map((filter: NearbyFilterConfig) => {
               return (
                 <FilterCheckboxes
@@ -442,7 +445,7 @@ function NearbyView({
                 />
               )
             })}
-          </div>
+          </fieldset>
         )}
       </div>