From 82bae740b9af2d96c654c03d0cd7180bd7a9388b Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:45:45 -0500
Subject: [PATCH 1/6] refactor: adjust markup for goecoder results

---
 packages/location-field/src/index.tsx   |  2 --
 packages/location-field/src/options.tsx | 17 +++++-------
 packages/location-field/src/styled.ts   | 36 ++++++++++++++++---------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index d0084d726..75023a6de 100644
--- a/packages/location-field/src/index.tsx
+++ b/packages/location-field/src/index.tsx
@@ -874,7 +874,6 @@ const LocationField = ({
     currentPosition && currentPosition.fetching
       ? intl.formatMessage({ id: "otpUi.LocationField.fetchingLocation" })
       : defaultPlaceholder;
-  const hasNoEnabledOptions = menuItemCount === 0;
   const isExpanded = isStatic || menuVisible;
 
   const textControl = (
@@ -951,7 +950,6 @@ const LocationField = ({
       </S.HiddenContent>
       <ItemList
         // Hide the list from screen readers if no enabled options are shown.
-        aria-hidden={hasNoEnabledOptions}
         aria-label={intl.formatMessage({
           defaultMessage: "Suggested locations",
           description:
diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx
index 5f41326cb..cc7449bfe 100644
--- a/packages/location-field/src/options.tsx
+++ b/packages/location-field/src/options.tsx
@@ -53,17 +53,14 @@ export const MenuItem = ({
   <S.MenuItemLi
     // Hide disabled choices from screen readers (a relevant status is already provided).
     aria-hidden={disabled || undefined}
-    role={disabled ? undefined : "none"}
+    active={active}
+    id={id}
+    onClick={disabled ? null : onClick}
+    role="option"
+    aria-selected={active}
+    tabIndex={-1}
   >
-    <S.MenuItemA
-      active={active}
-      id={id}
-      onClick={disabled ? null : onClick}
-      role="option"
-      tabIndex={-1}
-    >
-      {children}
-    </S.MenuItemA>
+    {children}
   </S.MenuItemLi>
 );
 
diff --git a/packages/location-field/src/styled.ts b/packages/location-field/src/styled.ts
index 88756f657..437fb5a74 100644
--- a/packages/location-field/src/styled.ts
+++ b/packages/location-field/src/styled.ts
@@ -74,18 +74,6 @@ export const InputGroup = styled.div`
   position: relative;
 `;
 
-export const MenuItemA = styled.a<{ active?: boolean }>`
-  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
-  clear: both;
-  color: ${props => (props.active ? "#fff" : "#333")};
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  text-decoration: none;
-  white-space: nowrap;
-`;
-
 export const MenuGroupHeader = styled.h2<{
   bgColor?: string;
   fgColor?: string;
@@ -101,7 +89,7 @@ export const MenuGroupHeader = styled.h2<{
   white-space: nowrap;
 `;
 
-export const MenuItemLi = styled.li`
+export const MenuItemLi = styled.li<{ active?: boolean }>`
   &:hover {
     /* TODO: adjust highlight color based on props.color? */
     background-color: #f5f5f5;
@@ -114,6 +102,28 @@ export const MenuItemLi = styled.li`
     background-color: unset;
     cursor: default;
   }
+
+  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
+  clear: both;
+  color: ${props => (props.active ? "#fff" : "#333")};
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap;
+`;
+
+export const MenuItemA = styled.span<{ active?: boolean }>`
+  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
+  clear: both;
+  color: ${props => (props.active ? "#fff" : "#333")};
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap;
 `;
 
 export const OptionContainer = styled.span`

From 35a6cd02743edb18634ccb41b76cbe9687fd5698 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 20 Sep 2023 14:40:06 -0500
Subject: [PATCH 2/6] fix(location-field): add aria-assertive to results

---
 packages/location-field/src/options.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx
index cc7449bfe..d3f1434ba 100644
--- a/packages/location-field/src/options.tsx
+++ b/packages/location-field/src/options.tsx
@@ -53,6 +53,9 @@ export const MenuItem = ({
   <S.MenuItemLi
     // Hide disabled choices from screen readers (a relevant status is already provided).
     aria-hidden={disabled || undefined}
+    /* A known issue prevents combobox results to be read out on Voiceover. This is a hack to ensure 
+    AT hear all options - see https://react-spectrum.adobe.com/blog/building-a-combobox.html#voiceover */
+    aria-live={active ? "assertive" : "off"}
     active={active}
     id={id}
     onClick={disabled ? null : onClick}

From 18a13ceb17bd2a92f0ccb6f8dba89c1287acebce Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 21 Sep 2023 12:30:11 -0400
Subject: [PATCH 3/6] fix typo in AT message

---
 packages/location-field/i18n/en-US.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/location-field/i18n/en-US.yml b/packages/location-field/i18n/en-US.yml
index 283803a10..de88545ca 100644
--- a/packages/location-field/i18n/en-US.yml
+++ b/packages/location-field/i18n/en-US.yml
@@ -8,7 +8,7 @@ otpUi:
     geocoderUnreachable: Unable to obtain suggestions
     homeLocation: Home
     howToAccessResults: >-
-      Use the down arrow key browse the results list. To select a result, use
+      Use the down arrow key to browse the results list. To select a result, use
       the Enter key.
     myPlaces: My Places
     nearby: Nearby Stops

From f6f845308dac871126007d11a47b2a088ca3bba7 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 21 Sep 2023 13:01:35 -0400
Subject: [PATCH 4/6] refactor: clean up changes

---
 packages/location-field/src/index.tsx |  2 ++
 packages/location-field/src/styled.ts | 12 ------------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index 75023a6de..d0084d726 100644
--- a/packages/location-field/src/index.tsx
+++ b/packages/location-field/src/index.tsx
@@ -874,6 +874,7 @@ const LocationField = ({
     currentPosition && currentPosition.fetching
       ? intl.formatMessage({ id: "otpUi.LocationField.fetchingLocation" })
       : defaultPlaceholder;
+  const hasNoEnabledOptions = menuItemCount === 0;
   const isExpanded = isStatic || menuVisible;
 
   const textControl = (
@@ -950,6 +951,7 @@ const LocationField = ({
       </S.HiddenContent>
       <ItemList
         // Hide the list from screen readers if no enabled options are shown.
+        aria-hidden={hasNoEnabledOptions}
         aria-label={intl.formatMessage({
           defaultMessage: "Suggested locations",
           description:
diff --git a/packages/location-field/src/styled.ts b/packages/location-field/src/styled.ts
index 437fb5a74..c6735f54f 100644
--- a/packages/location-field/src/styled.ts
+++ b/packages/location-field/src/styled.ts
@@ -114,18 +114,6 @@ export const MenuItemLi = styled.li<{ active?: boolean }>`
   white-space: nowrap;
 `;
 
-export const MenuItemA = styled.span<{ active?: boolean }>`
-  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
-  clear: both;
-  color: ${props => (props.active ? "#fff" : "#333")};
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  text-decoration: none;
-  white-space: nowrap;
-`;
-
 export const OptionContainer = styled.span`
   display: block;
   padding-top: 5px;

From 1f403c2afa7f59bffdb6aa6f2e721ee015163939 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 25 Sep 2023 11:17:36 -0500
Subject: [PATCH 5/6] test: update snapshots

---
 __snapshots__/storybook.test.ts.snap | 45 ++++++++++++++++------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 1ad56a326..63361c7ba 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -208234,7 +208234,9 @@ exports[`Storyshots PrintableItinerary Tnc Transit Itinerary 2`] = `
          
         <span
           className="c10"
-        />
+        >
+          Burnside/Stark
+        </span>
       </div>
       <div
         className="c6"
@@ -213370,24 +213372,6 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
   overflow: hidden;
 }
 
-.c20 {
-  font-weight: 200;
-}
-
-.c11 {
-  font-weight: inherit;
-}
-
-.c16 {
-  font-weight: 500;
-}
-
-.c17 {
-  font-weight: 200;
-  opacity: 0.8975;
-  padding-left: 1ch;
-}
-
 .c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -213426,6 +213410,24 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
   font-weight: 600;
 }
 
+.c20 {
+  font-weight: 200;
+}
+
+.c11 {
+  font-weight: inherit;
+}
+
+.c16 {
+  font-weight: 500;
+}
+
+.c17 {
+  font-weight: 200;
+  opacity: 0.8975;
+  padding-left: 1ch;
+}
+
 .c0 {
   margin-bottom: 10px;
   border-top: 1px solid grey;
@@ -239655,6 +239657,7 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = `
           "accessibilityScore": null,
           "agency": null,
           "agencyBrandingUrl": undefined,
+          "agencyId": undefined,
           "agencyName": undefined,
           "agencyUrl": undefined,
           "alightRule": "scheduled",
@@ -239793,6 +239796,7 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = `
             "url": "https://kingcounty.gov/en/dept/metro",
           },
           "agencyBrandingUrl": "https://kingcounty.gov/en/dept/metro",
+          "agencyId": "QWdlbmN5OmtjbTox",
           "agencyName": "Metro Transit",
           "agencyUrl": "https://kingcounty.gov/en/dept/metro",
           "alightRule": "scheduled",
@@ -240314,6 +240318,7 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = `
           "accessibilityScore": null,
           "agency": null,
           "agencyBrandingUrl": undefined,
+          "agencyId": undefined,
           "agencyName": undefined,
           "agencyUrl": undefined,
           "alightRule": "scheduled",
@@ -240406,6 +240411,7 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = `
             "url": "https://www.soundtransit.org",
           },
           "agencyBrandingUrl": "https://www.soundtransit.org",
+          "agencyId": "QWdlbmN5OjQwOjQw",
           "agencyName": "Sound Transit",
           "agencyUrl": "https://www.soundtransit.org",
           "alightRule": "scheduled",
@@ -240809,6 +240815,7 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = `
           "accessibilityScore": null,
           "agency": null,
           "agencyBrandingUrl": undefined,
+          "agencyId": undefined,
           "agencyName": undefined,
           "agencyUrl": undefined,
           "alightRule": "scheduled",

From 39efee91be0e5f5689e7758a26761d9e8c52e712 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:31:58 -0500
Subject: [PATCH 6/6] test: update snapshots

---
 __snapshots__/storybook.test.ts.snap | 2041 +++++++++++++-------------
 1 file changed, 982 insertions(+), 1059 deletions(-)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 15209adfa..d526a6121 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -184371,7 +184371,7 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -184394,20 +184394,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c12 {
+.c11 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c12 {
   float: left;
 }
 
@@ -184476,50 +184476,47 @@ input[aria-expanded="false"] ~ .c7 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c12"
-        >
-          <span
-            className="c13"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c14"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c13"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -184635,7 +184632,7 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -184658,20 +184655,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c12 {
+.c11 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c12 {
   float: left;
 }
 
@@ -184740,50 +184737,47 @@ input[aria-expanded="false"] ~ .c7 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c12"
-        >
-          <span
-            className="c13"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c14"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c13"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -184904,7 +184898,7 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -184927,20 +184921,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c12 {
+.c11 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c12 {
   float: left;
 }
 
@@ -185009,50 +185003,47 @@ input[aria-expanded="false"] ~ .c7 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c12"
-        >
-          <span
-            className="c13"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c14"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c13"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -185165,7 +185156,7 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185188,20 +185179,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c12 {
+.c11 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c12 {
   float: left;
 }
 
@@ -185273,49 +185264,47 @@ input[aria-expanded="false"] ~ .c7 {
   >
     <li
       aria-hidden={true}
+      aria-live="off"
+      aria-selected={false}
       className="c10"
+      id="otpui-locf-option-0"
+      onClick={null}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={null}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c12"
-        >
-          <span
-            className="c13"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c14"
-          >
-            otpUi.LocationField.currentLocationUnavailable
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c13"
+        >
+          otpUi.LocationField.currentLocationUnavailable
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -185456,7 +185445,7 @@ input[aria-expanded="false"] ~ .c8 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185479,20 +185468,20 @@ input[aria-expanded="false"] ~ .c8 {
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
@@ -185582,50 +185571,47 @@ input[aria-expanded="false"] ~ .c8 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -185764,7 +185750,7 @@ input[aria-expanded="false"] ~ .c8 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185787,20 +185773,20 @@ input[aria-expanded="false"] ~ .c8 {
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
@@ -185890,50 +185876,47 @@ input[aria-expanded="false"] ~ .c8 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -186054,7 +186037,7 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186077,20 +186060,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c12 {
+.c11 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c12 {
   float: left;
 }
 
@@ -186159,50 +186142,47 @@ input[aria-expanded="false"] ~ .c7 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c12"
-        >
-          <span
-            className="c13"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c14"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c13"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -186330,7 +186310,7 @@ input[aria-expanded="false"] ~ .c8 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186353,20 +186333,20 @@ input[aria-expanded="false"] ~ .c8 {
   cursor: default;
 }
 
-.c14 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c15 {
+.c14 {
   float: left;
 }
 
@@ -186376,7 +186356,7 @@ input[aria-expanded="false"] ~ .c8 {
   display: block;
 }
 
-.c1 .c13 {
+.c1 .c12 {
   background-color: pink;
   font-size: 24px;
 }
@@ -186440,50 +186420,47 @@ input[aria-expanded="false"] ~ .c8 {
     role="listbox"
   >
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c12 c13"
       >
         <span
-          className="c13 c14"
-        >
-          <span
-            className="c15"
-            style={
-              Object {
-                "color": null,
-              }
+          className="c14"
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c4"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c4"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c16"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c15"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -186658,7 +186635,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   background: none;
 }
 
-.c17 {
+.c16 {
   clear: both;
 }
 
@@ -186709,19 +186686,6 @@ input[aria-expanded="false"] ~ .c6 {
   position: relative;
 }
 
-.c11 {
-  background-color: transparent;
-  clear: both;
-  color: #333;
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
 .c9 {
   color: #eee;
   background-color: #333;
@@ -186734,6 +186698,19 @@ input[aria-expanded="false"] ~ .c6 {
   white-space: nowrap;
 }
 
+.c10 {
+  background-color: transparent;
+  clear: both;
+  color: #333;
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
 .c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
@@ -186744,24 +186721,24 @@ input[aria-expanded="false"] ~ .c6 {
   cursor: default;
 }
 
-.c18 {
+.c17 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c20 {
+.c19 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c19 {
+.c18 {
   float: left;
 }
 
-.c16 {
+.c15 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
@@ -186774,20 +186751,20 @@ input[aria-expanded="false"] ~ .c6 {
   display: block;
 }
 
-.c14 {
+.c13 {
   margin-left: 30px;
 }
 
-.c13 {
+.c12 {
   font-size: 8px;
 }
 
-.c12 {
+.c11 {
   float: left;
   padding-top: 3px;
 }
 
-.c15 {
+.c14 {
   font-size: 9px;
 }
 
@@ -186855,126 +186832,120 @@ input[aria-expanded="false"] ~ .c6 {
       otpUi.LocationField.nearby
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
+        <svg
+          aria-hidden="true"
+          className="c3"
+          fill="currentColor"
+          focusable="false"
+          height={13}
+          viewBox="0 0 512 512"
+          width={13}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M507.31 84.69 464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"
+            fill="currentColor"
+          />
+        </svg>
         <span
           className="c12"
         >
-          <svg
-            aria-hidden="true"
-            className="c3"
-            fill="currentColor"
-            focusable="false"
-            height={13}
-            viewBox="0 0 512 512"
-            width={13}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M507.31 84.69 464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            className="c13"
-          >
-            404 ft
-          </span>
+          404 ft
+        </span>
+      </span>
+      <span
+        className="c13"
+      >
+        <span
+          className="styled__StopName-sc-xahsq2-19"
+        >
+          1st & Main
+           (
+          1
+          )
         </span>
         <span
           className="c14"
         >
-          <span
-            className="styled__StopName-sc-xahsq2-20"
-          >
-            1st & Main
-             (
-            1
-            )
-          </span>
           <span
             className="c15"
           >
-            <span
-              className="c16"
-            >
-              1
-            </span>
+            1
           </span>
         </span>
-        <div
-          className="c17"
-        />
-      </a>
+      </span>
+      <div
+        className="c16"
+      />
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-1"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c11"
-        id="otpui-locf-option-1"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
+        <svg
+          aria-hidden="true"
+          className="c3"
+          fill="currentColor"
+          focusable="false"
+          height={13}
+          viewBox="0 0 512 512"
+          width={13}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M507.31 84.69 464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"
+            fill="currentColor"
+          />
+        </svg>
         <span
           className="c12"
         >
-          <svg
-            aria-hidden="true"
-            className="c3"
-            fill="currentColor"
-            focusable="false"
-            height={13}
-            viewBox="0 0 512 512"
-            width={13}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M507.31 84.69 464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            className="c13"
-          >
-            0.2 mi
-          </span>
+          0.2 mi
+        </span>
+      </span>
+      <span
+        className="c13"
+      >
+        <span
+          className="styled__StopName-sc-xahsq2-19"
+        >
+          Main & 2nd
+           (
+          2
+          )
         </span>
         <span
           className="c14"
         >
-          <span
-            className="styled__StopName-sc-xahsq2-20"
-          >
-            Main & 2nd
-             (
-            2
-            )
-          </span>
           <span
             className="c15"
           >
-            <span
-              className="c16"
-            >
-              2
-            </span>
+            2
           </span>
         </span>
-        <div
-          className="c17"
-        />
-      </a>
+      </span>
+      <div
+        className="c16"
+      />
     </li>
     <h2
       className="c9"
@@ -186982,51 +186953,48 @@ input[aria-expanded="false"] ~ .c6 {
       otpUi.LocationField.recentlySearched
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-2"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-2"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313-20 25a16 16 0 0 1-22.49 2.5l-67-49.72a40 40 0 0 1-15-31.23V112a16 16 0 0 1 16-16h32a16 16 0 0 1 16 16v144l58 42.5a16 16 0 0 1 2.49 22.5z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313-20 25a16 16 0 0 1-22.49 2.5l-67-49.72a40 40 0 0 1-15-31.23V112a16 16 0 0 1 16-16h32a16 16 0 0 1 16 16v144l58 42.5a16 16 0 0 1 2.49 22.5z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            123 Main St
-            
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          123 Main St
+          
+        </span>
+      </span>
     </li>
     <h2
       className="c9"
@@ -187034,234 +187002,219 @@ input[aria-expanded="false"] ~ .c6 {
       otpUi.LocationField.myPlaces
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-3"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-3"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 576 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 576 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            otpUi.LocationField.parenthesisFormat
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          otpUi.LocationField.parenthesisFormat
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-4"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-4"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 448 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 448 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            otpUi.LocationField.parenthesisFormat
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          otpUi.LocationField.parenthesisFormat
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-5"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-5"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 576 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 576 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            Coffee Roasters Shop, 55 Coffee Street
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          Coffee Roasters Shop, 55 Coffee Street
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-6"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-6"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 576 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 576 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            123 Main St
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          123 Main St
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c10"
-      role="none"
+      id="otpui-locf-option-7"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c11"
-        id="otpui-locf-option-7"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c17"
       >
         <span
           className="c18"
-        >
-          <span
-            className="c19"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M500 224h-30.364C455.724 130.325 381.675 56.276 288 42.364V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v30.364C130.325 56.276 56.276 130.325 42.364 224H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h30.364C56.276 381.675 130.325 455.724 224 469.636V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-30.364C381.675 455.724 455.724 381.675 469.636 288H500c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12zM288 404.634V364c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40.634C165.826 392.232 119.783 346.243 107.366 288H148c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40.634C119.768 165.826 165.757 119.783 224 107.366V148c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40.634C346.174 119.768 392.217 165.757 404.634 224H364c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40.634C392.232 346.174 346.243 392.217 288 404.634zM288 256c0 17.673-14.327 32-32 32s-32-14.327-32-32c0-17.673 14.327-32 32-32s32 14.327 32 32z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M500 224h-30.364C455.724 130.325 381.675 56.276 288 42.364V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v30.364C130.325 56.276 56.276 130.325 42.364 224H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h30.364C56.276 381.675 130.325 455.724 224 469.636V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-30.364C381.675 455.724 455.724 381.675 469.636 288H500c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12zM288 404.634V364c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40.634C165.826 392.232 119.783 346.243 107.366 288H148c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40.634C119.768 165.826 165.757 119.783 224 107.366V148c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40.634C346.174 119.768 392.217 165.757 404.634 224H364c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40.634C392.232 346.174 346.243 392.217 288 404.634zM288 256c0 17.673-14.327 32-32 32s-32-14.327-32-32c0-17.673 14.327-32 32-32s32 14.327 32 32z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c20"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c19"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -187376,7 +187329,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   background: none;
 }
 
-.c18 {
+.c17 {
   clear: both;
 }
 
@@ -187427,19 +187380,6 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c12 {
-  background-color: transparent;
-  clear: both;
-  color: #333;
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
 .c10 {
   color: #eee;
   background-color: #333;
@@ -187452,6 +187392,19 @@ input[aria-expanded="false"] ~ .c7 {
   white-space: nowrap;
 }
 
+.c11 {
+  background-color: transparent;
+  clear: both;
+  color: #333;
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
 .c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
@@ -187462,24 +187415,24 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c19 {
+.c18 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c21 {
+.c20 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c20 {
+.c19 {
   float: left;
 }
 
-.c17 {
+.c16 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
@@ -187492,20 +187445,20 @@ input[aria-expanded="false"] ~ .c7 {
   display: block;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
 }
 
-.c14 {
+.c13 {
   font-size: 8px;
 }
 
-.c13 {
+.c12 {
   float: left;
   padding-top: 3px;
 }
 
-.c16 {
+.c15 {
   font-size: 9px;
 }
 
@@ -187573,79 +187526,140 @@ input[aria-expanded="false"] ~ .c7 {
       otpUi.LocationField.nearby
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
+        <svg
+          aria-hidden="true"
+          className="c3"
+          fill="currentColor"
+          focusable="false"
+          height={13}
+          viewBox="0 0 512 512"
+          width={13}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"
+            fill="currentColor"
+          />
+        </svg>
         <span
           className="c13"
         >
-          <svg
-            aria-hidden="true"
-            className="c3"
-            fill="currentColor"
-            focusable="false"
-            height={13}
-            viewBox="0 0 512 512"
-            width={13}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            className="c14"
-          >
-            404 ft
-          </span>
+          404 ft
+        </span>
+      </span>
+      <span
+        className="c14"
+      >
+        <span
+          className="styled__StopName-sc-xahsq2-19"
+        >
+          1st & Main
+           (
+          1
+          )
         </span>
         <span
           className="c15"
         >
           <span
-            className="styled__StopName-sc-xahsq2-20"
+            className="c16"
           >
-            1st & Main
-             (
             1
-            )
           </span>
+        </span>
+      </span>
+      <div
+        className="c17"
+      />
+    </li>
+    <li
+      aria-live="off"
+      aria-selected={false}
+      className="c11"
+      id="otpui-locf-option-1"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
+    >
+      <span
+        className="c12"
+      >
+        <svg
+          aria-hidden="true"
+          className="c3"
+          fill="currentColor"
+          focusable="false"
+          height={13}
+          viewBox="0 0 512 512"
+          width={13}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c13"
+        >
+          0.2 mi
+        </span>
+      </span>
+      <span
+        className="c14"
+      >
+        <span
+          className="styled__StopName-sc-xahsq2-19"
+        >
+          Main & 2nd
+           (
+          2
+          )
+        </span>
+        <span
+          className="c15"
+        >
           <span
             className="c16"
           >
-            <span
-              className="c17"
-            >
-              1
-            </span>
-          </span>
-        </span>
-        <div
-          className="c18"
-        />
-      </a>
+            2
+          </span>
+        </span>
+      </span>
+      <div
+        className="c17"
+      />
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-2"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
-        className="c12"
-        id="otpui-locf-option-1"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
+      <span
+        className="c18"
       >
         <span
-          className="c13"
+          className="c19"
+          style={
+            Object {
+              "color": null,
+            }
+          }
         >
           <svg
             aria-hidden="true"
@@ -187658,87 +187672,17 @@ input[aria-expanded="false"] ~ .c7 {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
             />
           </svg>
-          <span
-            className="c14"
-          >
-            0.2 mi
-          </span>
-        </span>
-        <span
-          className="c15"
-        >
-          <span
-            className="styled__StopName-sc-xahsq2-20"
-          >
-            Main & 2nd
-             (
-            2
-            )
-          </span>
-          <span
-            className="c16"
-          >
-            <span
-              className="c17"
-            >
-              2
-            </span>
-          </span>
         </span>
-        <div
-          className="c18"
-        />
-      </a>
-    </li>
-    <li
-      className="c11"
-      role="none"
-    >
-      <a
-        className="c12"
-        id="otpui-locf-option-2"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
-      >
         <span
-          className="c19"
+          className="c20"
         >
-          <span
-            className="c20"
-            style={
-              Object {
-                "color": null,
-              }
-            }
-          >
-            <svg
-              aria-hidden="true"
-              className="c3"
-              fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c21"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+          otpUi.LocationField.useCurrentLocation
         </span>
-      </a>
+      </span>
     </li>
   </ul>
 </div>
@@ -187875,19 +187819,6 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c12 {
-  background-color: transparent;
-  clear: both;
-  color: #333;
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
 .c10 {
   color: #eee;
   background-color: #333;
@@ -187900,6 +187831,19 @@ input[aria-expanded="false"] ~ .c7 {
   white-space: nowrap;
 }
 
+.c11 {
+  background-color: transparent;
+  clear: both;
+  color: #333;
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
 .c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
@@ -187910,20 +187854,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
@@ -187997,97 +187941,91 @@ input[aria-expanded="false"] ~ .c7 {
       otpUi.LocationField.recentlySearched
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            123 Main St
-            
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          123 Main St
+          
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-1"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-1"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -188247,19 +188185,6 @@ input[aria-expanded="false"] ~ .c7 {
   position: relative;
 }
 
-.c12 {
-  background-color: transparent;
-  clear: both;
-  color: #333;
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
 .c10 {
   color: #eee;
   background-color: #333;
@@ -188272,6 +188197,19 @@ input[aria-expanded="false"] ~ .c7 {
   white-space: nowrap;
 }
 
+.c11 {
+  background-color: transparent;
+  clear: both;
+  color: #333;
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
 .c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
@@ -188282,20 +188220,20 @@ input[aria-expanded="false"] ~ .c7 {
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
@@ -188369,234 +188307,219 @@ input[aria-expanded="false"] ~ .c7 {
       otpUi.LocationField.myPlaces
     </h2>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-0"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-0"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 576 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M280.37 148.26 96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47 488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 576 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M280.37 148.26 96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47 488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.parenthesisFormat
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.parenthesisFormat
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-1"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-1"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.parenthesisFormat
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.parenthesisFormat
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-2"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-2"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 384 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 384 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            Coffee Roasters Shop, 55 Coffee Street
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          Coffee Roasters Shop, 55 Coffee Street
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-3"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-3"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 384 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 384 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            123 Main St
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          123 Main St
+        </span>
+      </span>
     </li>
     <li
+      aria-live="off"
+      aria-selected={false}
       className="c11"
-      role="none"
+      id="otpui-locf-option-4"
+      onClick={[Function]}
+      role="option"
+      tabIndex={-1}
     >
-      <a
+      <span
         className="c12"
-        id="otpui-locf-option-4"
-        onClick={[Function]}
-        role="option"
-        tabIndex={-1}
       >
         <span
           className="c13"
-        >
-          <span
-            className="c14"
-            style={
-              Object {
-                "color": null,
-              }
+          style={
+            Object {
+              "color": null,
             }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            fill="currentColor"
+            focusable="false"
+            height={13}
+            viewBox="0 0 512 512"
+            width={13}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="c3"
+            <path
+              d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
               fill="currentColor"
-              focusable="false"
-              height={13}
-              viewBox="0 0 512 512"
-              width={13}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M444.52 3.52 28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span
-            className="c15"
-          >
-            otpUi.LocationField.useCurrentLocation
-          </span>
+            />
+          </svg>
         </span>
-      </a>
+        <span
+          className="c14"
+        >
+          otpUi.LocationField.useCurrentLocation
+        </span>
+      </span>
     </li>
   </ul>
 </div>
@@ -214296,6 +214219,24 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
   overflow: hidden;
 }
 
+.c20 {
+  font-weight: 200;
+}
+
+.c11 {
+  font-weight: inherit;
+}
+
+.c16 {
+  font-weight: 500;
+}
+
+.c17 {
+  font-weight: 200;
+  opacity: 0.8975;
+  padding-left: 1ch;
+}
+
 .c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -214334,24 +214275,6 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
   font-weight: 600;
 }
 
-.c20 {
-  font-weight: 200;
-}
-
-.c11 {
-  font-weight: inherit;
-}
-
-.c16 {
-  font-weight: 500;
-}
-
-.c17 {
-  font-weight: 200;
-  opacity: 0.8975;
-  padding-left: 1ch;
-}
-
 .c0 {
   margin-bottom: 10px;
   border-top: 1px solid grey;