feat(RouteSymbols): improve subway_route_pill readout (#2397)

* feat(RouteSymbols): improve subway_route_pill readout * fix(SubwayStatus): if pill is hidden, include route text for VO
mbta · Feb 26, 2025 · 6dd5046 · 6dd5046
1 parent e71b8ee
commit 6dd5046
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex
@@ -194,17 +194,21 @@ defmodule DotcomWeb.Components.RouteSymbols do
     assigns =
       assign(assigns, %{
         bg_color_class: "bg-#{String.downcase(route_id)}-line",
-        route_abbreviation: String.at(route_id, 0) <> "L"
+        route_abbreviation: String.at(route_id, 0) <> "L",
+        route_label: route_id <> " Line"
       })
 
     ~H"""
-    <div class={[
-      @bg_color_class,
-      @class,
-      "w-[3.125rem] h-6 rounded-full ring-2 ring-white",
-      "flex items-center justify-center",
-      "text-white font-bold font-heading leading-none notranslate"
-    ]}>
+    <div
+      aria-label={@route_label}
+      class={[
+        @bg_color_class,
+        @class,
+        "w-[3.125rem] h-6 rounded-full ring-2 ring-white",
+        "flex items-center justify-center",
+        "text-white font-bold font-heading leading-none notranslate"
+      ]}
+    >
       {@route_abbreviation}
     </div>
     """
@@ -264,6 +268,7 @@ defmodule DotcomWeb.Components.RouteSymbols do
   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{id: "Mattapan"}), do: "Mattapan Trolley"
 
   defp route_label(%Route{
          external_agency_name: "Massport",

diff --git a/lib/dotcom_web/components/system_status/subway_status.ex b/lib/dotcom_web/components/system_status/subway_status.ex
@@ -35,9 +35,9 @@ defmodule DotcomWeb.Components.SystemStatus.SubwayStatus do
             "text-black no-underline font-normal"
           ]}
         >
-          <div class={["pl-2 py-3", row.style.hide_route_pill && "invisible"]}>
+          <div class="pl-2 py-3">
             <.subway_route_pill
-              class="group-hover/row:ring-brand-primary-lightest"
+              class={"group-hover/row:ring-brand-primary-lightest #{if(row.style.hide_route_pill, do: "opacity-0")}"}
               route_ids={[row.route_info.route_id | row.route_info.branch_ids]}
             />
           </div>
@@ -77,9 +77,9 @@ defmodule DotcomWeb.Components.SystemStatus.SubwayStatus do
             chevron_class={"fill-gray-lighter px-2 py-3 #{row.style.hide_route_pill && "border-t-[1px] border-gray-lightest"}"}
           >
             <:heading>
-              <div class={["pl-2 py-3 pr-sm", row.style.hide_route_pill && "invisible"]}>
+              <div class="pl-2 py-3 pr-sm">
                 <.subway_route_pill
-                  class="group-hover/row:ring-brand-primary-lightest"
+                  class={"group-hover/row:ring-brand-primary-lightest #{if(row.style.hide_route_pill, do: "opacity-0")}"}
                   route_ids={[row.route_info.route_id | row.route_info.branch_ids]}
                 />
               </div>
@@ -104,9 +104,9 @@ defmodule DotcomWeb.Components.SystemStatus.SubwayStatus do
             class="flex gap-sm"
             style={if(row.style.hide_route_pill, do: "--tw-divide-opacity: 0")}
           >
-            <div class={["pl-2 py-3", row.style.hide_route_pill && "invisible"]}>
+            <div class="pl-2 py-3">
               <.subway_route_pill
-                class="group-hover/row:ring-brand-primary-lightest"
+                class={"group-hover/row:ring-brand-primary-lightest #{if(row.style.hide_route_pill, do: "opacity-0")}"}
                 route_ids={[row.route_info.route_id | row.route_info.branch_ids]}
               />
             </div>