diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex
index e7e48b7943..50710936bd 100644
--- 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
index a77e5b9389..d55de3a71f 100644
--- 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>