From c60451301b5a0cef6be7265f0ee6632733782130 Mon Sep 17 00:00:00 2001
From: Devin Matte <devinmatte@gmail.com>
Date: Fri, 7 Jul 2023 13:37:27 -0400
Subject: [PATCH] Fixing accessibility issues according to lighthouse (#721)

---
 common/components/{general => buttons}/DownloadButton.tsx | 1 +
 common/components/charts/AggregateLineChart.tsx           | 2 +-
 common/components/charts/SingleDayLineChart.tsx           | 2 +-
 common/components/general/WidgetCarousel.tsx              | 2 +-
 common/components/graphics/LoadingSpinner.tsx             | 2 +-
 common/components/widgets/StationSelectorWidget.tsx       | 8 ++++++--
 modules/navigation/BusNavMenu.tsx                         | 2 +-
 modules/navigation/BusSelection.tsx                       | 4 +++-
 modules/navigation/SideNavigation.tsx                     | 2 +-
 modules/navigation/SidebarTabs.tsx                        | 4 ++--
 modules/navigation/SubwayNavMenu.tsx                      | 2 +-
 modules/navigation/SystemNavMenu.tsx                      | 2 +-
 12 files changed, 20 insertions(+), 13 deletions(-)
 rename common/components/{general => buttons}/DownloadButton.tsx (98%)

diff --git a/common/components/general/DownloadButton.tsx b/common/components/buttons/DownloadButton.tsx
similarity index 98%
rename from common/components/general/DownloadButton.tsx
rename to common/components/buttons/DownloadButton.tsx
index 41156ade4..5c3e35f95 100644
--- a/common/components/general/DownloadButton.tsx
+++ b/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" />
diff --git a/common/components/charts/AggregateLineChart.tsx b/common/components/charts/AggregateLineChart.tsx
index 4a8c90bec..58956975c 100644
--- a/common/components/charts/AggregateLineChart.tsx
+++ b/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';
diff --git a/common/components/charts/SingleDayLineChart.tsx b/common/components/charts/SingleDayLineChart.tsx
index 71c8af8da..bbe54fb83 100644
--- a/common/components/charts/SingleDayLineChart.tsx
+++ b/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';
diff --git a/common/components/general/WidgetCarousel.tsx b/common/components/general/WidgetCarousel.tsx
index 95784fb1f..3532bee57 100644
--- a/common/components/general/WidgetCarousel.tsx
+++ b/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"
           >
diff --git a/common/components/graphics/LoadingSpinner.tsx b/common/components/graphics/LoadingSpinner.tsx
index f7acbbd0b..a7a630743 100644
--- a/common/components/graphics/LoadingSpinner.tsx
+++ b/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'
       }`}
diff --git a/common/components/widgets/StationSelectorWidget.tsx b/common/components/widgets/StationSelectorWidget.tsx
index b4f31a3d0..e5a86de64 100644
--- a/common/components/widgets/StationSelectorWidget.tsx
+++ b/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>
   );
diff --git a/modules/navigation/BusNavMenu.tsx b/modules/navigation/BusNavMenu.tsx
index 920ba5cbe..81d23a1a9 100644
--- a/modules/navigation/BusNavMenu.tsx
+++ b/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>
diff --git a/modules/navigation/BusSelection.tsx b/modules/navigation/BusSelection.tsx
index 88588145b..7a2eb383b 100644
--- a/modules/navigation/BusSelection.tsx
+++ b/modules/navigation/BusSelection.tsx
@@ -23,6 +23,7 @@ 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}
     >
@@ -30,11 +31,12 @@ export const BusSelection: React.FC<BusSelectionProps> = ({ setSidebarOpen }) =>
         {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
diff --git a/modules/navigation/SideNavigation.tsx b/modules/navigation/SideNavigation.tsx
index 5f6580e20..cf1c99efb 100644
--- a/modules/navigation/SideNavigation.tsx
+++ b/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>
diff --git a/modules/navigation/SidebarTabs.tsx b/modules/navigation/SidebarTabs.tsx
index 6e287ce50..372c6a8d3 100644
--- a/modules/navigation/SidebarTabs.tsx
+++ b/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;
diff --git a/modules/navigation/SubwayNavMenu.tsx b/modules/navigation/SubwayNavMenu.tsx
index 117f5621a..aa29ec344 100644
--- a/modules/navigation/SubwayNavMenu.tsx
+++ b/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>
diff --git a/modules/navigation/SystemNavMenu.tsx b/modules/navigation/SystemNavMenu.tsx
index b70c1b749..56e70d413 100644
--- a/modules/navigation/SystemNavMenu.tsx
+++ b/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>