Fixing accessibility issues according to lighthouse

common/components/general/DownloadButton.tsx → common/components/buttons/DownloadButton.tsx

@@ -67,6 +67,7 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({
       <CSVLink
         className={'csv-link'}
         data={data}
+        title={'Download data as CSV'}
         filename={filename(datasetName, location, bothStops, startDate, endDate)}
       >
         <FontAwesomeIcon icon={faFileArrowDown} className="text-stone-600" />

common/components/charts/AggregateLineChart.tsx

@@ -8,7 +8,7 @@ import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import type { AggregateDataPoint, AggregateLineProps } from '../../types/charts';
 import { prettyDate } from '../../utils/date';
 import { CHART_COLORS } from '../../../common/constants/colors';
-import { DownloadButton } from '../general/DownloadButton';
+import { DownloadButton } from '../buttons/DownloadButton';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
 import { watermarkLayout } from '../../constants/charts';
 import { writeError } from '../../utils/chartError';

common/components/charts/SingleDayLineChart.tsx

@@ -9,7 +9,7 @@ import { CHART_COLORS, COLORS, LINE_COLORS } from '../../../common/constants/col
 import type { SingleDayLineProps } from '../../../common/types/charts';
 import { prettyDate } from '../../utils/date';
 import { useDelimitatedRoute } from '../../utils/router';
-import { DownloadButton } from '../general/DownloadButton';
+import { DownloadButton } from '../buttons/DownloadButton';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
 import { watermarkLayout } from '../../constants/charts';
 import { writeError } from '../../utils/chartError';

common/components/general/WidgetCarousel.tsx

@@ -46,7 +46,7 @@ export const WidgetCarousel: FC<WidgetCarouselProps> = ({ children, isSingleWidg
             className={classNames(
               'group/button flex cursor-pointer items-center justify-center rounded-md focus:outline-none lg:p-1'
             )}
-            aria-label={'Next Statistic'}
+            title={'Next Statistic'}
             onClick={navigateTo(activeItem + 1)}
             type="button"
           >

common/components/graphics/LoadingSpinner.tsx

@@ -10,7 +10,7 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ isWidget }) => {
   const { line } = useDelimitatedRoute();
   return (
     <div
-      role="status"
+      role={'status'}
       className={`absolute bottom-0 left-0 right-0 top-0 flex h-auto w-auto items-center justify-center rounded-md ${
         isWidget && 'bg-white bg-opacity-90'
       }`}

common/components/widgets/StationSelectorWidget.tsx

@@ -78,8 +78,12 @@ export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ li
         toStation={toStation}
         setStation={(stationId) => updateStations('to', stationId)}
       />
-      <Button onClick={() => updateStations('swap')} additionalClasses="shrink-0 w-fit">
-        <FontAwesomeIcon icon={faRightLeft} className="h-4 w-4" />
+      <Button
+        onClick={() => updateStations('swap')}
+        title={'Swap Stations'}
+        additionalClasses={'shrink-0 w-fit'}
+      >
+        <FontAwesomeIcon icon={faRightLeft} className={'h-4 w-4'} />
       </Button>
     </div>
   );

modules/navigation/BusNavMenu.tsx

@@ -11,7 +11,7 @@ export const BusNavMenu: React.FC<BusNavMenuProps> = ({ setSidebarOpen }) => {
   return (
     <>
       <BusSelection setSidebarOpen={setSidebarOpen} />
-      <div className="flex flex-col gap-y-3 px-1">
+      <div className="flex flex-col gap-y-3 px-1" role={'navigation'}>
         <SidebarTabs tabs={BUS_OVERVIEW} setSidebarOpen={setSidebarOpen} />
         <SidebarTabs tabs={TRIP_PAGES} setSidebarOpen={setSidebarOpen} />
       </div>

modules/navigation/BusSelection.tsx

@@ -23,18 +23,20 @@ export const BusSelection: React.FC<BusSelectionProps> = ({ setSidebarOpen }) =>
   return (
     <Tab.Group
       manual
+      aria-label={'Bus Routes'}
       selectedIndex={busRoutes.findIndex((key) => key === route.query.busRoute)}
       onChange={handleChange}
     >
       <Tab.List className="relative grid grid-cols-3 gap-2">
         {busRoutes.map((key) => {
           const selected = route.query.busRoute === key;
           return (
-            <Tab key={key}>
+            <Tab key={key} aria-label={key}>
               <Link
                 href={getBusRouteSelectionItemHref(key, route)}
                 onClick={handleChange}
                 key={key}
+                aria-label={key}
                 className={classNames(
                   'flex w-full cursor-pointer items-center justify-center rounded-md border border-mbta-bus bg-mbta-bus px-2 py-1 text-sm font-medium',
                   selected

modules/navigation/SideNavigation.tsx

@@ -19,7 +19,7 @@ export const SideNavigation: React.FC<SideNavigationProps> = ({ setSidebarOpen }
   const { tab } = useDelimitatedRoute();
   return (
     <nav className="flex flex-1 flex-col pb-3 md:px-4 md:pb-0 md:pt-5">
-      <ul role="list" className="flex flex-1 flex-col gap-y-4">
+      <ul role={'navigation'} className="flex flex-1 flex-col gap-y-4">
         <DashboardSelection />
         {getNavMenu(tab)}
       </ul>

modules/navigation/SidebarTabs.tsx

@@ -26,8 +26,8 @@ export const SidebarTabs: React.FC<SidebarTabs> = ({ tabs, setSidebarOpen }) =>
   };
 
   return (
-    <div className="rounded-md bg-white bg-opacity-5 p-1">
-      <ul role="list" className="space-y-1">
+    <div className="rounded-md bg-white bg-opacity-5 p-1" role={'navigation'}>
+      <ul className="space-y-1">
         {tabs.map((tab: PageMetadata) => {
           const enabled = line ? tab.lines.includes(line) : true;
           const selected = page === tab.key;

modules/navigation/SubwayNavMenu.tsx

@@ -17,7 +17,7 @@ const LINE_ITEMS = [
 export const SubwayNavMenu: React.FC<SubwayNavMenuProps> = ({ setSidebarOpen }) => (
   <>
     <LineSelection lineItems={LINE_ITEMS} setSidebarOpen={setSidebarOpen} />
-    <div className="flex flex-col gap-y-3 px-1">
+    <div className="flex flex-col gap-y-3 px-1" role={'navigation'}>
       <SidebarTabs tabs={LINE_PAGES} setSidebarOpen={setSidebarOpen} />
       <SidebarTabs tabs={TRIP_PAGES} setSidebarOpen={setSidebarOpen} />
     </div>

modules/navigation/SystemNavMenu.tsx

@@ -7,7 +7,7 @@ interface SystemNavMenuProps {
 }
 export const SystemNavMenu = ({ setSidebarOpen }: SystemNavMenuProps) => {
   return (
-    <div className="flex flex-col gap-y-2 px-1">
+    <div className="flex flex-col gap-y-2 px-1" role={'navigation'}>
       <SidebarTabs tabs={LANDING_PAGE} setSidebarOpen={setSidebarOpen} />
       <SidebarTabs tabs={SYSTEM_SLOWZONES_PAGE} setSidebarOpen={setSidebarOpen} />
     </div>