Add aria labels for itinerary group summaries (#2328)

mbta · Jan 17, 2025 · eba1e9e · eba1e9e
1 parent d868d22
commit eba1e9e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 16 deletions.
diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex
@@ -61,7 +61,10 @@ defmodule DotcomWeb.Components.RouteSymbols do
     assigns = update(assigns, :class, &"#{&1} #{route_class}")
 
     ~H"""
-    <div class={"#{@class} #{@cva_class} font-heading whitespace-nowrap w-min font-bold inline-flex items-center justify-center leading-[1]"}>
+    <div
+      class={"#{@class} #{@cva_class} font-heading whitespace-nowrap w-min font-bold inline-flex items-center justify-center leading-[1]"}
+      aria-label={route_label(@route)}
+    >
       {@route.name}
     </div>
     """
@@ -122,7 +125,12 @@ defmodule DotcomWeb.Components.RouteSymbols do
       end)
 
     ~H"""
-    <.icon type="icon-svg" name={@icon_name} class={"#{@class} #{@cva_class}"} />
+    <.icon
+      type="icon-svg"
+      name={@icon_name}
+      class={"#{@class} #{@cva_class}"}
+      aria-label={route_label(@route)}
+    />
     """
   end
 
@@ -138,7 +146,12 @@ defmodule DotcomWeb.Components.RouteSymbols do
     assigns = assign(assigns, :route_number, route_number)
 
     ~H"""
-    <.icon type="icon-svg" name={"icon-massport-#{@route_number}"} class={"#{@class} #{@cva_class}"} />
+    <.icon
+      type="icon-svg"
+      name={"icon-massport-#{@route_number}"}
+      class={"#{@class} #{@cva_class}"}
+      aria-label={route_label(@route)}
+    />
     """
   end
 
@@ -149,13 +162,44 @@ defmodule DotcomWeb.Components.RouteSymbols do
       type="icon-svg"
       name={"icon-logan-express-#{@route.name}"}
       class={"#{@class} #{@cva_class}"}
+      aria-label={route_label(@route)}
     />
     """
   end
 
   def route_icon(assigns) do
     ~H"""
-    <.icon type="icon-svg" name="icon-mode-shuttle-default" class={"#{@class} #{@cva_class}"} />
+    <.icon
+      type="icon-svg"
+      name="icon-mode-shuttle-default"
+      class={"#{@class} #{@cva_class}"}
+      aria-label="Shuttle"
+    />
     """
   end
+
+  # Given a route, return a machine-readable label.
+  defp route_label(%Route{type: 2}), do: "Commuter Rail"
+  defp route_label(%Route{type: 4}), do: "Ferry"
+  defp route_label(%Route{external_agency_name: "Logan Express"}), do: "Logan Express"
+  defp route_label(%Route{id: "Green-" <> branch}), do: "Green Line #{branch} Branch"
+
+  defp route_label(%Route{
+         external_agency_name: "Massport",
+         name: <<route_number::binary-size(2), _::binary>>
+       }),
+       do: "Massport Shuttle #{route_number}"
+
+  # Silver Line and Buses.
+  defp route_label(%Route{name: name} = route)
+       when not is_external?(route) and not is_shuttle?(route) and
+              route.description != :rapid_transit do
+    if Routes.Route.silver_line?(route) do
+      name
+    else
+      "Route #{name}"
+    end
+  end
+
+  defp route_label(%Route{long_name: long_name}), do: long_name
 end
diff --git a/lib/dotcom_web/components/trip_planner/itinerary_summary.ex b/lib/dotcom_web/components/trip_planner/itinerary_summary.ex
@@ -18,7 +18,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
       </div>
       <div class="flex flex-wrap gap-1 items-center content-center mb-3">
         <%= for {summary_leg, index} <- Enum.with_index(@summary.summarized_legs) do %>
-          <.icon :if={index > 0} name="angle-right" class="font-black w-2" />
+          <.icon :if={index > 0} name="angle-right" class="font-black w-2" aria-label="to" />
           <.leg_icon {summary_leg} />
         <% end %>
       </div>
@@ -54,12 +54,15 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
   # No routes: this is a walking leg
   defp leg_icon(%{routes: [], walk_minutes: _} = assigns) do
     ~H"""
-    <span class={[
-      "flex items-center gap-1 text-sm font-semibold leading-none whitespace-nowrap py-1 px-2 rounded-full border-[1px] border-gray-light",
-      @class
-    ]}>
-      <.icon name="person-walking" class="h-4 w-4" />
-      <span>{@walk_minutes} min</span>
+    <span
+      aria-label={"#{@walk_minutes} minute walk"}
+      class={[
+        "flex items-center gap-1 text-sm font-semibold leading-none whitespace-nowrap py-1 px-2 rounded-full border-[1px] border-gray-light",
+        @class
+      ]}
+    >
+      <.icon name="person-walking" class="h-4 w-4" aria-hidden="true" />
+      <span aria-hidden="true">{@walk_minutes} min</span>
     </span>
     """
   end
@@ -99,11 +102,16 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
       <%= for {route, index} <- Enum.with_index(@routes) do %>
         <.route_symbol route={route} class={"#{@grouped_classes} #{zindex(index)} #{@class}"} />
 
-        <div
-          :if={@slashed? and index < Kernel.length(@routes) - 1}
-          class={"bg-white -mt-0.5 w-1 h-7 #{zindex(index)} transform rotate-[17deg]"}
-        >
-        </div>
+        <%= if index < Kernel.length(@routes) - 1 do %>
+          <%= if @slashed? do %>
+            <div
+              class={"bg-white -mt-0.5 w-1 h-7 #{zindex(index)} transform rotate-[17deg]"}
+              aria-label="or"
+            />
+          <% else %>
+            <span class="sr-only">or</span>
+          <% end %>
+        <% end %>
       <% end %>
     </div>
     """