From bca51f83ac5e9f9b602c1ac25cd6281c8ddc7a9c Mon Sep 17 00:00:00 2001
From: Cristen Jones <cjones3@mbta.com>
Date: Tue, 1 Aug 2023 15:26:21 -0400
Subject: [PATCH] fixup(DeparturesAndMap): allow text wrapping

Adjust the "Back to all routes" control so that it can wrap long test.
While we're here, also change this element to a button. This enables keyboard navigability and is more accessible.
---
 apps/site/assets/css/_stop-card.scss          | 28 +++++++++----------
 .../ts/stop/components/DeparturesAndMap.tsx   | 12 ++++----
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/site/assets/css/_stop-card.scss b/apps/site/assets/css/_stop-card.scss
index e0a9652bc3..bea0a788b0 100644
--- a/apps/site/assets/css/_stop-card.scss
+++ b/apps/site/assets/css/_stop-card.scss
@@ -303,24 +303,22 @@ $radius: 4px;
 }
 
 .back-to-routes {
-  align-items: center;
   background-color: $gray-bordered-background;
   border: .25px solid $gray-lighter;
   color: $brand-primary;
-  display: flex;
-  font-size: 1rem;
-  height: 2.5rem;
-  padding-left: .625rem;
-  text-decoration: underline;
-  text-underline-offset: .2rem;
-  :first-child {
-    cursor: pointer;
-    display: inline-block;
-    font-weight: 400;
-    :first-child {
-      font-weight: 900;
-      padding-right: .5rem;
-    }
+
+  .btn {
+    align-items: baseline;
+    display: flex;
+    gap: .5em;
+    padding: $base-spacing-sm;
+    white-space: unset;
+  }
+
+  span {
+    text-align: left;
+    text-decoration: underline;
+    text-underline-offset: .2rem;
   }
 }
 
diff --git a/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx b/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
index e3fab99b26..91db6585a2 100644
--- a/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
+++ b/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
@@ -154,15 +154,15 @@ const DeparturesAndMap = ({
 
   const BackToRoutes = (
     <div className="back-to-routes">
-      <div
+      <button
+        className="btn"
         onClick={unsetDepartureInfo}
         onKeyDown={unsetDepartureInfo}
-        aria-label={`Back to all ${stop.name} routes`}
-        role="presentation"
+        type="button"
       >
-        {renderFa("", "fa-angle-left")}
-        {`Back to all ${stop.name} routes`}
-      </div>
+        {renderFa("", "fa-fw fa-angle-left")}
+        <span className="btn-link">{`Back to all ${stop.name} routes`}</span>
+      </button>
     </div>
   );