diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index ea2ca378f..d1c386c48 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -1,5 +1,1328 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Building-Blocks/Colors Blue 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#CCDAE7",
+        "200": "#B2C7DB",
+        "300": "#99B5CF",
+        "400": "#7FA2C2",
+        "50": "#E5ECF3",
+        "500": "#6690B7",
+        "600": "#4D7EAB",
+        "700": "#336B9E",
+        "800": "#1A5992",
+        "900": "#004686",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Blue 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #E5ECF3;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #E5ECF3
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #CCDAE7;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #CCDAE7
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B2C7DB;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #B2C7DB
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #99B5CF;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #99B5CF
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #7FA2C2;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #7FA2C2
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #6690B7;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #6690B7
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #4D7EAB;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #4D7EAB
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #336B9E;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #336B9E
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #1A5992;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #1A5992
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #004686;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #004686
+    </p>
+  </div>,
+]
+`;
+
+exports[`Storyshots Building-Blocks/Colors Grey 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#D9D9D9",
+        "200": "#C5C5C5",
+        "300": "#B3B3B3",
+        "400": "#9F9F9F",
+        "50": "#ECECEC",
+        "500": "#8C8C8C",
+        "600": "#797979",
+        "700": "#666666",
+        "800": "#535353",
+        "900": "#404040",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Grey 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #ECECEC;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #ECECEC
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #D9D9D9;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #D9D9D9
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #C5C5C5;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #C5C5C5
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B3B3B3;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #B3B3B3
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #9F9F9F;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #9F9F9F
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #8C8C8C;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #8C8C8C
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #797979;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #797979
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #666666;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #666666
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #535353;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #535353
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #404040;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #404040
+    </p>
+  </div>,
+]
+`;
+
+exports[`Storyshots Building-Blocks/Colors Red 1`] = `
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en-US"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en-US"
+  messages={Object {}}
+  onError={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
+  <ColorPalette
+    color={
+      Object {
+        "100": "#EFCFCE",
+        "200": "#E7B6B4",
+        "300": "#DF9E9C",
+        "400": "#D78683",
+        "50": "#F7E7E6",
+        "500": "#CF6E6B",
+        "600": "#C75652",
+        "700": "#BF3E3A",
+        "800": "#B72620",
+        "900": "#AF0E08",
+      }
+    }
+  />
+</IntlProvider>
+`;
+
+exports[`Storyshots Building-Blocks/Colors Red 2`] = `
+Array [
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F7E7E6;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      50
+    </p>
+    <p>
+      #F7E7E6
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EFCFCE;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      100
+    </p>
+    <p>
+      #EFCFCE
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #E7B6B4;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      200
+    </p>
+    <p>
+      #E7B6B4
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #DF9E9C;
+  color: #000000;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      300
+    </p>
+    <p>
+      #DF9E9C
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #D78683;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      400
+    </p>
+    <p>
+      #D78683
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #CF6E6B;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      500
+    </p>
+    <p>
+      #CF6E6B
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #C75652;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      600
+    </p>
+    <p>
+      #C75652
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #BF3E3A;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      700
+    </p>
+    <p>
+      #BF3E3A
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #B72620;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      800
+    </p>
+    <p>
+      #B72620
+    </p>
+  </div>,
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #AF0E08;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px black;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial,Helvetica,sans-serif;
+  height: 40px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+}
+
+.c0:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+.c0:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+<div
+    className="c0"
+  >
+    <p>
+      900
+    </p>
+    <p>
+      #AF0E08
+    </p>
+  </div>,
+]
+`;
+
 exports[`Storyshots EndpointsOverlay Endpoints Overlay With Custom Map Markers 1`] = `
 <IntlProvider
   defaultFormats={Object {}}
@@ -73713,11 +75036,11 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   color: #333;
 }
 
-.c62 {
+.c61 {
   color: #f44256;
 }
 
-.c29 {
+.c28 {
   background: transparent;
   border: 0;
   color: inherit;
@@ -73727,33 +75050,33 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   text-decoration: none;
 }
 
-.c44 {
+.c43 {
   color: #008;
   cursor: pointer;
   margin-left: 5px;
 }
 
-.c44:hover {
+.c43:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c45 {
+.c44 {
   padding-left: 0px;
 }
 
-.c45:before {
+.c44:before {
   content: "|";
   color: black;
   margin-right: 5px;
 }
 
-.c34::before {
+.c33::before {
   content: "";
   margin: 0 0.125em;
 }
 
-.c56 {
+.c55 {
   display: block;
   font-size: 13px;
   list-style: none;
@@ -73765,13 +75088,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   padding: 0;
 }
 
-.c24 {
+.c23 {
   color: #676767;
   font-size: 13px;
   padding-bottom: 12px;
 }
 
-.c30 {
+.c29 {
   bottom: 0;
   cursor: pointer;
   left: 0;
@@ -73782,7 +75105,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   z-index: 1;
 }
 
-.c25 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -73796,7 +75119,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   position: relative;
 }
 
-.c22 {
+.c20 {
   display: inline-block;
   grid-row-start: 2;
   grid-column-start: 1;
@@ -73805,38 +75128,38 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   width: 0;
 }
 
-.c50 {
+.c49 {
   font-weight: 200;
 }
 
-.c28 {
+.c27 {
   font-weight: inherit;
 }
 
-.c49 {
+.c48 {
   font-size: 13px;
   font-weight: 500;
 }
 
-.c48 {
+.c47 {
   font-weight: 800;
   margin-right: 6px;
 }
 
-.c46 {
+.c45 {
   color: #807373;
   margin-top: 5px;
 }
 
-.c27 img,
-.c27 svg {
+.c26 img,
+.c26 svg {
   margin-right: 6px;
   height: 24px;
   width: 24px;
   vertical-align: bottom;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -73848,7 +75171,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   padding-right: 5px;
 }
 
-.c31 {
+.c30 {
   display: grid;
   grid-template-columns: 100px auto;
 }
@@ -73866,7 +75189,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   font-size: 0.9em;
 }
 
-.c23 {
+.c22 {
   grid-row-start: 2;
   grid-column-start: 3;
 }
@@ -73895,7 +75218,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   padding: 3px 0 10px 0;
 }
 
-.c43 {
+.c42 {
   color: #807373;
   font-size: 13px;
   font-weight: 300;
@@ -73904,23 +75227,23 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   margin-top: -14px;
 }
 
-.c35 {
+.c34 {
   display: block;
   list-style: none;
   padding: 0;
 }
 
-.c38 {
+.c37 {
   margin-left: 24px;
   line-height: 1.25em;
   padding-top: 1px;
 }
 
-.c38 > span {
+.c37 > span {
   margin-right: 1ch;
 }
 
-.c32 {
+.c31 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -73931,7 +75254,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   margin-top: 10px;
 }
 
-.c32 a {
+.c31 a {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -73946,58 +75269,58 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   justify-content: center;
 }
 
-.c33 {
+.c32 {
   color: #676767;
   font-size: 13px;
   font-style: normal;
   padding: 0;
 }
 
-.c37 {
+.c36 {
   fill: #676767;
   float: left;
   height: 16px;
   width: 16px;
 }
 
-.c36 {
+.c35 {
   font-size: 13px;
   margin-top: 8px;
   color: #676767;
   font-style: normal;
 }
 
-.c39 {
+.c38 {
   font-weight: 500;
 }
 
-.c40 {
+.c39 {
   font-weight: 200;
   opacity: 0.8975;
   padding-left: 1ch;
 }
 
-.c59 {
+.c58 {
   float: left;
   margin-left: -36px;
   color: #fff;
 }
 
-.c60 {
+.c59 {
   color: #676767;
   margin-top: 3px;
 }
 
-.c57 {
+.c56 {
   z-index: 30;
   position: relative;
 }
 
-.c52 {
+.c51 {
   margin-top: 5px;
 }
 
-.c53 {
+.c52 {
   color: #676767;
   display: -webkit-box;
   display: -webkit-flex;
@@ -74005,30 +75328,30 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   display: flex;
 }
 
-.c55 {
+.c54 {
   font-size: 14px;
 }
 
-.c54 {
+.c53 {
   padding: 0;
 }
 
-.c51 {
+.c50 {
   margin-top: 5px;
 }
 
-.c51 a {
+.c50 a {
   color: #337ab7;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c51 a:hover {
+.c50 a:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c51 img {
+.c50 img {
   margin-left: 5px;
   vertical-align: middle;
 }
@@ -74056,7 +75379,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   word-wrap: anywhere;
 }
 
-.c42 {
+.c41 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -74079,7 +75402,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   word-wrap: anywhere;
 }
 
-.c61 {
+.c60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -74102,21 +75425,16 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   word-wrap: anywhere;
 }
 
-.c20 {
+.c21 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c20 span {
+.c21 span {
   display: block;
 }
 
-.c21 {
-  padding-top: 3px;
-  font-weight: 600;
-}
-
 .c1 {
   font-size: 16px;
 }
@@ -74126,7 +75444,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   font-family: Hind,sans-serif;
 }
 
-.c1 .c47 {
+.c1 .c46 {
   background-color: rgb(15,106,172);
   border-color: white;
   border-image: initial;
@@ -74170,7 +75488,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   width: 100%;
 }
 
-.c1 .c58 {
+.c1 .c57 {
   margin-left: -23px;
 }
 
@@ -74205,7 +75523,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
   z-index: 10;
 }
 
-.c41 {
+.c40 {
   background-color: gray;
   left: 5px;
   right: 5px;
@@ -74300,8 +75618,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
       <div
         className="c19"
         color="#bfffb5"
-        title="✅"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible"
       >
+        <span
+          className="c20"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible
+        </span>
         <svg
           aria-hidden="true"
           className="c8"
@@ -74330,38 +75653,35 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           />
         </svg>
         <span
-          className="c20"
+          aria-hidden={true}
+          className="c21"
         >
-          <span
-            className="c21"
-          >
-            ✅
-          </span>
+          ✅
         </span>
       </div>
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c23"
+      className="c22"
     >
       <div
-        className="c24"
+        className="c23"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c25"
+            className="c24"
           >
             <span
-              className="c26"
+              className="c25"
             >
               <span
-                className="c27"
+                className="c26"
               >
                 <svg
                   height="100%"
@@ -74382,24 +75702,24 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               </span>
             </span>
             <span
-              className="c22"
+              className="c20"
             >
                - 
             </span>
             <span>
               Walk 238 feet to 
               <span
-                className="c28"
+                className="c27"
               >
                 SE Cesar Chavez Blvd & Brooklyn (long address that spans multiple lines)
               </span>
             </span>
             <button
-              className="c29 c30"
+              className="c28 c29"
               onClick={[Function]}
             >
               <span
-                className="c22"
+                className="c20"
               >
                 Zoom to leg on map
               </span>
@@ -74407,19 +75727,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           </span>
         </div>
         <span
-          className="c31"
+          className="c30"
         >
           <span
-            className="c32"
+            className="c31"
           >
             <button
               aria-expanded={false}
-              className="c29 c33"
+              className="c28 c32"
               onClick={[Function]}
             >
               1 min
               <span
-                className="c34"
+                className="c33"
               >
                 <svg
                   aria-hidden="true"
@@ -74438,7 +75758,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 </svg>
               </span>
               <span
-                className="c22"
+                className="c20"
               >
                 (Expand details)
               </span>
@@ -74459,13 +75779,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               style={Object {}}
             >
               <ol
-                className="c35"
+                className="c34"
               >
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -74476,19 +75796,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       Head 
                       WEST
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Brooklyn St
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         205 feet
                       </span>
@@ -74496,10 +75816,10 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </div>
                 </li>
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -74510,18 +75830,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Cesar E. Chavez Blvd
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         33 feet
                       </span>
@@ -74542,7 +75862,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
       className="c4 c5"
     >
       <div
-        className="c41"
+        className="c40"
       />
       <span
         className="c7"
@@ -74596,10 +75916,15 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
     >
       3:47 PM
       <div
-        className="c42"
+        className="c41"
         color="#dbe9ff"
-        title="？"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear"
       >
+        <span
+          className="c20"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear
+        </span>
         <svg
           aria-hidden="true"
           className="c8"
@@ -74628,59 +75953,56 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           />
         </svg>
         <span
-          className="c20"
+          aria-hidden={true}
+          className="c21"
         >
-          <span
-            className="c21"
-          >
-            ？
-          </span>
+          ？
         </span>
       </div>
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c23"
+      className="c22"
     >
       <div
-        className="c43"
+        className="c42"
       >
         Stop ID 7439
         <a
-          className="c44 c45"
+          className="c43 c44"
           onClick={[Function]}
         >
           Stop Viewer
         </a>
       </div>
       <div
-        className="c24"
+        className="c23"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c25"
+            className="c24"
           >
             <span>
               <span
-                className="c22"
+                className="c20"
               >
                  - 
                 Ride
               </span>
               <span
-                className="c25 c46"
+                className="c24 c45"
               >
                 <span
-                  className="c26"
+                  className="c25"
                 >
                   <span
-                    className="c27"
+                    className="c26"
                   >
                     <svg
                       aria-label="BUS"
@@ -74707,18 +76029,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </span>
                   <span
-                    className="c47 c48"
+                    className="c46 c47"
                   >
                     755X
                   </span>
                 </span>
                 <span
-                  className="c49"
+                  className="c48"
                 >
                   <span>
                     Cesar Chavez/Lombard (very long route name) 
                     <span
-                      className="c50"
+                      className="c49"
                     >
                       to
                     </span>
@@ -74727,7 +76049,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 </span>
               </span>
               <span
-                className="c22"
+                className="c20"
               >
                  - 
                 Disembark at 
@@ -74735,11 +76057,11 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               </span>
             </span>
             <button
-              className="c29 c30"
+              className="c28 c29"
               onClick={[Function]}
             >
               <span
-                className="c22"
+                className="c20"
               >
                 Zoom to leg on map
               </span>
@@ -74751,7 +76073,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           role="group"
         >
           <div
-            className="c51"
+            className="c50"
           >
             Service operated by 
             <a
@@ -74783,20 +76105,20 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
             />
           </div>
           <div
-            className="c52"
+            className="c51"
           >
             <div
-              className="c53"
+              className="c52"
             >
               <button
-                className="c29 c54"
+                className="c28 c53"
                 onClick={[Function]}
               >
                 Ride 
                 4 min
                  / 5 stops
                 <span
-                  className="c34"
+                  className="c33"
                 >
                   <svg
                     aria-hidden="true"
@@ -74815,13 +76137,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </svg>
                 </span>
                 <span
-                  className="c22"
+                  className="c20"
                 >
                   (Expand details)
                 </span>
               </button>
               <a
-                className="c44 c45"
+                className="c43 c44"
                 onClick={[Function]}
                 type="button"
               >
@@ -74842,63 +76164,63 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 style={Object {}}
               >
                 <div
-                  className="c55"
+                  className="c54"
                 >
                   <ol
-                    className="c56"
+                    className="c55"
                   >
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Cesar Chavez Blvd & Clinton
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Cesar Chavez Blvd & Division
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Cesar Chavez Blvd & Lincoln
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Cesar Chavez Blvd & Stephens
                       </div>
@@ -74974,38 +76296,38 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
       3:52 PM
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c23"
+      className="c22"
     >
       <div
-        className="c43"
+        className="c42"
       >
         Stop ID 7459
         <a
-          className="c44 c45"
+          className="c43 c44"
           onClick={[Function]}
         >
           Stop Viewer
         </a>
       </div>
       <div
-        className="c24"
+        className="c23"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c25"
+            className="c24"
           >
             <span
-              className="c26"
+              className="c25"
             >
               <span
-                className="c27"
+                className="c26"
               >
                 <svg
                   height="100%"
@@ -75026,24 +76348,24 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               </span>
             </span>
             <span
-              className="c22"
+              className="c20"
             >
                - 
             </span>
             <span>
               Walk 440 feet to 
               <span
-                className="c28"
+                className="c27"
               >
                 SE Hawthorne & Cesar Chavez Blvd
               </span>
             </span>
             <button
-              className="c29 c30"
+              className="c28 c29"
               onClick={[Function]}
             >
               <span
-                className="c22"
+                className="c20"
               >
                 Zoom to leg on map
               </span>
@@ -75051,19 +76373,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           </span>
         </div>
         <span
-          className="c31"
+          className="c30"
         >
           <span
-            className="c32"
+            className="c31"
           >
             <button
               aria-expanded={false}
-              className="c29 c33"
+              className="c28 c32"
               onClick={[Function]}
             >
               1 min
               <span
-                className="c34"
+                className="c33"
               >
                 <svg
                   aria-hidden="true"
@@ -75082,7 +76404,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 </svg>
               </span>
               <span
-                className="c22"
+                className="c20"
               >
                 (Expand details)
               </span>
@@ -75103,13 +76425,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               style={Object {}}
             >
               <ol
-                className="c35"
+                className="c34"
               >
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75120,19 +76442,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       Head 
                       SOUTH
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         service road
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         146 feet
                       </span>
@@ -75140,10 +76462,10 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </div>
                 </li>
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75154,18 +76476,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Cesar E. Chavez Blvd
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         198 feet
                       </span>
@@ -75173,10 +76495,10 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </div>
                 </li>
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75187,18 +76509,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       LEFT
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Hawthorne Blvd
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         96 feet
                       </span>
@@ -75219,7 +76541,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
       className="c4 c5"
     >
       <div
-        className="c41"
+        className="c40"
       />
       <span
         className="c7"
@@ -75273,10 +76595,15 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
     >
       4:00 PM
       <div
-        className="c61"
+        className="c60"
         color="#ffe4e5"
-        title="❌"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible"
       >
+        <span
+          className="c20"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
+        </span>
         <svg
           aria-hidden="true"
           className="c8"
@@ -75305,59 +76632,56 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           />
         </svg>
         <span
-          className="c20"
+          aria-hidden={true}
+          className="c21"
         >
-          <span
-            className="c21"
-          >
-            ❌
-          </span>
+          ❌
         </span>
       </div>
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c23"
+      className="c22"
     >
       <div
-        className="c43"
+        className="c42"
       >
         Stop ID 2626
         <a
-          className="c44 c45"
+          className="c43 c44"
           onClick={[Function]}
         >
           Stop Viewer
         </a>
       </div>
       <div
-        className="c24"
+        className="c23"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c25"
+            className="c24"
           >
             <span>
               <span
-                className="c22"
+                className="c20"
               >
                  - 
                 Ride
               </span>
               <span
-                className="c25 c46"
+                className="c24 c45"
               >
                 <span
-                  className="c26"
+                  className="c25"
                 >
                   <span
-                    className="c27"
+                    className="c26"
                   >
                     <svg
                       aria-label="BUS"
@@ -75384,18 +76708,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </span>
                   <span
-                    className="c47 c48"
+                    className="c46 c47"
                   >
                     1
                   </span>
                 </span>
                 <span
-                  className="c49"
+                  className="c48"
                 >
                   <span>
                     Hawthorne 
                     <span
-                      className="c50"
+                      className="c49"
                     >
                       to
                     </span>
@@ -75404,7 +76728,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 </span>
               </span>
               <span
-                className="c22"
+                className="c20"
               >
                  - 
                 Disembark at 
@@ -75412,11 +76736,11 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               </span>
             </span>
             <button
-              className="c29 c30"
+              className="c28 c29"
               onClick={[Function]}
             >
               <span
-                className="c22"
+                className="c20"
               >
                 Zoom to leg on map
               </span>
@@ -75428,7 +76752,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           role="group"
         >
           <div
-            className="c51"
+            className="c50"
           >
             Service operated by 
             <a
@@ -75460,20 +76784,20 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
             />
           </div>
           <div
-            className="c52"
+            className="c51"
           >
             <div
-              className="c53"
+              className="c52"
             >
               <button
-                className="c29 c54"
+                className="c28 c53"
                 onClick={[Function]}
               >
                 Ride 
                 4 min
                  / 5 stops
                 <span
-                  className="c34"
+                  className="c33"
                 >
                   <svg
                     aria-hidden="true"
@@ -75492,13 +76816,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </svg>
                 </span>
                 <span
-                  className="c22"
+                  className="c20"
                 >
                   (Expand details)
                 </span>
               </button>
               <a
-                className="c44 c45"
+                className="c43 c44"
                 onClick={[Function]}
                 type="button"
               >
@@ -75519,63 +76843,63 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 style={Object {}}
               >
                 <div
-                  className="c55"
+                  className="c54"
                 >
                   <ol
-                    className="c56"
+                    className="c55"
                   >
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Hawthorne & 37th
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Hawthorne & 34th
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Hawthorne & 32nd
                       </div>
                     </li>
                     <li
-                      className="c57"
+                      className="c56"
                     >
                       <div
-                        className="c58 c59"
+                        className="c57 c58"
                       >
                         •
                       </div>
                       <div
-                        className="c60"
+                        className="c59"
                       >
                         SE Hawthorne & 30th
                       </div>
@@ -75650,10 +76974,15 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
     >
       4:04 PM
       <div
-        className="c61"
+        className="c60"
         color="#ffe4e5"
-        title="❌"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible"
       >
+        <span
+          className="c20"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
+        </span>
         <svg
           aria-hidden="true"
           className="c8"
@@ -75682,49 +77011,46 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           />
         </svg>
         <span
-          className="c20"
+          aria-hidden={true}
+          className="c21"
         >
-          <span
-            className="c21"
-          >
-            ❌
-          </span>
+          ❌
         </span>
       </div>
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c23"
+      className="c22"
     >
       <div
-        className="c43"
+        className="c42"
       >
         Stop ID 2613
         <a
-          className="c44 c45"
+          className="c43 c44"
           onClick={[Function]}
         >
           Stop Viewer
         </a>
       </div>
       <div
-        className="c24"
+        className="c23"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c25"
+            className="c24"
           >
             <span
-              className="c26"
+              className="c25"
             >
               <span
-                className="c27"
+                className="c26"
               >
                 <svg
                   height="100%"
@@ -75745,24 +77071,24 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               </span>
             </span>
             <span
-              className="c22"
+              className="c20"
             >
                - 
             </span>
             <span>
               Walk 479 feet to 
               <span
-                className="c28"
+                className="c27"
               >
                 1415 SE 28th Ave, Portland, OR, USA 97214
               </span>
             </span>
             <button
-              className="c29 c30"
+              className="c28 c29"
               onClick={[Function]}
             >
               <span
-                className="c22"
+                className="c20"
               >
                 Zoom to leg on map
               </span>
@@ -75770,19 +77096,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
           </span>
         </div>
         <span
-          className="c31"
+          className="c30"
         >
           <span
-            className="c32"
+            className="c31"
           >
             <button
               aria-expanded={false}
-              className="c29 c33"
+              className="c28 c32"
               onClick={[Function]}
             >
               2 min
               <span
-                className="c34"
+                className="c33"
               >
                 <svg
                   aria-hidden="true"
@@ -75801,7 +77127,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                 </svg>
               </span>
               <span
-                className="c22"
+                className="c20"
               >
                 (Expand details)
               </span>
@@ -75822,13 +77148,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
               style={Object {}}
             >
               <ol
-                className="c35"
+                className="c34"
               >
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75839,19 +77165,19 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       Head 
                       WEST
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Hawthorne Blvd
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         40 feet
                       </span>
@@ -75859,10 +77185,10 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </div>
                 </li>
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75873,18 +77199,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE 27th Ave
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         294 feet
                       </span>
@@ -75892,10 +77218,10 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                   </div>
                 </li>
                 <li
-                  className="c36"
+                  className="c35"
                 >
                   <div
-                    className="c37"
+                    className="c36"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -75906,18 +77232,18 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
                     </svg>
                   </div>
                   <div
-                    className="c38"
+                    className="c37"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c39"
+                        className="c38"
                       >
                         SE Madison St
                       </span>
                       <span
-                        className="c40"
+                        className="c39"
                       >
                         146 feet
                       </span>
@@ -75958,7 +77284,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
         </svg>
         <svg
           aria-hidden="true"
-          className="c8 c62 c12"
+          className="c8 c61 c12"
           fill="currentColor"
           focusable="false"
           height={20}
@@ -75989,13 +77315,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Transit Transfer With A 1
       4:06 PM
     </div>
     <span
-      className="c22"
+      className="c20"
     >
       Arrive at 
       1415 SE 28th Ave, Portland, OR, USA 97214
     </span>
     <div
-      className="c23"
+      className="c22"
     />
   </li>
 </ol>
@@ -163631,24 +164957,24 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
 `;
 
 exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itinerary 2`] = `
-.c11 {
+.c12 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c56 {
+.c55 {
   color: #f44256;
 }
 
-.c32 {
+.c31 {
   border-top-style: solid;
   border-top-width: 0;
   padding-top: 0;
   padding-bottom: 10px;
 }
 
-.c20 {
+.c19 {
   background: transparent;
   border: 0;
   color: inherit;
@@ -163658,13 +164984,13 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   text-decoration: none;
 }
 
-.c34 {
+.c33 {
   color: #008;
   cursor: pointer;
   margin-left: 5px;
 }
 
-.c34:hover {
+.c33:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -163693,7 +165019,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   padding-left: 1px;
 }
 
-.c45 {
+.c44 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -163715,12 +165041,12 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   text-align: inherit;
 }
 
-.c25::before {
+.c24::before {
   content: "";
   margin: 0 0.125em;
 }
 
-.c55 {
+.c54 {
   text-align: center;
 }
 
@@ -163735,7 +165061,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   transform: translateX(-50%);
 }
 
-.c36 {
+.c35 {
   border-left: solid 8px #008ab0;
   height: 100%;
   width: 0;
@@ -163746,7 +165072,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   transform: translateX(-50%);
 }
 
-.c50 {
+.c49 {
   display: block;
   font-size: 13px;
   list-style: none;
@@ -163758,13 +165084,13 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   padding: 0;
 }
 
-.c16 {
+.c15 {
   color: #676767;
   font-size: 13px;
   padding-bottom: 12px;
 }
 
-.c21 {
+.c20 {
   bottom: 0;
   cursor: pointer;
   left: 0;
@@ -163775,7 +165101,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   z-index: 1;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -163789,7 +165115,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   position: relative;
 }
 
-.c14 {
+.c11 {
   display: inline-block;
   grid-row-start: 2;
   grid-column-start: 1;
@@ -163798,30 +165124,30 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   width: 0;
 }
 
-.c44 {
+.c43 {
   font-weight: 200;
 }
 
-.c19 {
+.c18 {
   font-weight: inherit;
 }
 
-.c43 {
+.c42 {
   font-size: 13px;
   font-weight: 500;
 }
 
-.c42 {
+.c41 {
   font-weight: 800;
   margin-right: 6px;
 }
 
-.c41 {
+.c40 {
   color: #807373;
   margin-top: 5px;
 }
 
-.c18 {
+.c17 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -163854,7 +165180,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   padding-right: 5px;
 }
 
-.c22 {
+.c21 {
   display: grid;
   grid-template-columns: 100px auto;
 }
@@ -163872,7 +165198,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   font-size: 0.9em;
 }
 
-.c35 {
+.c34 {
   padding: 3px 10px 3px 10px;
   border: 0;
   margin-top: -15px;
@@ -163880,18 +165206,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   height: 35px;
 }
 
-.c35:hover {
+.c34:hover {
   cursor: pointer;
 }
 
-.c33 {
+.c32 {
   -webkit-flex: 0 0 25px;
   -ms-flex: 0 0 25px;
   flex: 0 0 25px;
   grid-column: -1;
 }
 
-.c15 {
+.c14 {
   grid-row-start: 2;
   grid-column-start: 3;
 }
@@ -163920,7 +165246,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   padding: 3px 0 10px 0;
 }
 
-.c37 {
+.c36 {
   text-align: center;
   min-width: 30px;
   min-height: 30px;
@@ -163949,7 +165275,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   cursor: default;
 }
 
-.c38 {
+.c37 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -163961,23 +165287,23 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   border: 0;
 }
 
-.c26 {
+.c25 {
   display: block;
   list-style: none;
   padding: 0;
 }
 
-.c29 {
+.c28 {
   margin-left: 24px;
   line-height: 1.25em;
   padding-top: 1px;
 }
 
-.c29 > span {
+.c28 > span {
   margin-right: 1ch;
 }
 
-.c23 {
+.c22 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -163988,7 +165314,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   margin-top: 10px;
 }
 
-.c23 a {
+.c22 a {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164003,64 +165329,64 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   justify-content: center;
 }
 
-.c24 {
+.c23 {
   color: #676767;
   font-size: 13px;
   font-style: normal;
   padding: 0;
 }
 
-.c28 {
+.c27 {
   fill: #676767;
   float: left;
   height: 16px;
   width: 16px;
 }
 
-.c27 {
+.c26 {
   font-size: 13px;
   margin-top: 8px;
   color: #676767;
   font-style: normal;
 }
 
-.c30 {
+.c29 {
   font-weight: 500;
 }
 
-.c31 {
+.c30 {
   font-weight: 200;
   opacity: 0.8975;
   padding-left: 1ch;
 }
 
-.c39 {
+.c38 {
   font-weight: 200;
   font-size: 0.9em;
   margin-left: 10px;
 }
 
-.c52 {
+.c51 {
   float: left;
   margin-left: -36px;
   color: #fff;
 }
 
-.c53 {
+.c52 {
   color: #676767;
   margin-top: 3px;
 }
 
-.c51 {
+.c50 {
   z-index: 30;
   position: relative;
 }
 
-.c46 {
+.c45 {
   margin-top: 5px;
 }
 
-.c47 {
+.c46 {
   color: #676767;
   display: -webkit-box;
   display: -webkit-flex;
@@ -164068,11 +165394,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   display: flex;
 }
 
-.c49 {
+.c48 {
   font-size: 14px;
 }
 
-.c48 {
+.c47 {
   padding: 0;
 }
 
@@ -164099,7 +165425,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   word-wrap: anywhere;
 }
 
-.c40 {
+.c39 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -164122,7 +165448,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   word-wrap: anywhere;
 }
 
-.c54 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -164145,21 +165471,16 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
   word-wrap: anywhere;
 }
 
-.c12 {
+.c13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c12 span {
+.c13 span {
   display: block;
 }
 
-.c13 {
-  padding-top: 3px;
-  font-weight: 600;
-}
-
 <ol
   className="c0"
 >
@@ -164216,11 +165537,16 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       <div
         className="c10"
         color="#bfffb5"
-        title="✅"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible"
       >
+        <span
+          className="c11"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible
+        </span>
         <svg
           aria-hidden="true"
-          className="c11"
+          className="c12"
           fill="currentColor"
           focusable="false"
           style={
@@ -164246,55 +165572,52 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           />
         </svg>
         <span
-          className="c12"
+          aria-hidden={true}
+          className="c13"
         >
-          <span
-            className="c13"
-          >
-            ✅
-          </span>
+          ✅
         </span>
       </div>
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c15"
+      className="c14"
     >
       <div
-        className="c16"
+        className="c15"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c17"
+            className="c16"
           >
             <span
-              className="c18"
+              className="c17"
             />
             <span
-              className="c14"
+              className="c11"
             >
                - 
             </span>
             <span>
               Walk 238 feet to 
               <span
-                className="c19"
+                className="c18"
               >
                 SE Cesar Chavez Blvd & Brooklyn (long address that spans multiple lines)
               </span>
             </span>
             <button
-              className="c20 c21"
+              className="c19 c20"
               onClick={[Function]}
             >
               <span
-                className="c14"
+                className="c11"
               >
                 Zoom to leg on map
               </span>
@@ -164302,23 +165625,23 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           </span>
         </div>
         <span
-          className="c22"
+          className="c21"
         >
           <span
-            className="c23"
+            className="c22"
           >
             <button
               aria-expanded={false}
-              className="c20 c24"
+              className="c19 c23"
               onClick={[Function]}
             >
               1 min
               <span
-                className="c25"
+                className="c24"
               >
                 <svg
                   aria-hidden="true"
-                  className="c11"
+                  className="c12"
                   fill="currentColor"
                   focusable="false"
                   height={15}
@@ -164333,7 +165656,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 </svg>
               </span>
               <span
-                className="c14"
+                className="c11"
               >
                 (Expand details)
               </span>
@@ -164354,13 +165677,13 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
               style={Object {}}
             >
               <ol
-                className="c26"
+                className="c25"
               >
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -164371,19 +165694,19 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       Head 
                       WEST
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Brooklyn St
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         205 feet
                       </span>
@@ -164391,10 +165714,10 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </div>
                 </li>
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -164405,18 +165728,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Cesar E. Chavez Blvd
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         33 feet
                       </span>
@@ -164430,11 +165753,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       </div>
     </div>
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >
@@ -164465,14 +165788,14 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
         className="c3"
       >
         <div
-          className="c36"
+          className="c35"
           mode="BUS"
         />
         <div
           className="c5"
         >
           <div
-            className="c37"
+            className="c36"
           >
             <span
               aria-hidden={true}
@@ -164481,7 +165804,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
               75
             </span>
             <span
-              className="c38"
+              className="c37"
             >
               Cesar Chavez/Lombard (very long route name)
             </span>
@@ -164498,7 +165821,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       >
         SE Cesar Chavez Blvd & Brooklyn
         <span
-          className="c39"
+          className="c38"
         >
           ID 7439
         </span>
@@ -164509,13 +165832,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
     >
       3:47 PM
       <div
-        className="c40"
+        className="c39"
         color="#dbe9ff"
-        title="？"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear"
       >
+        <span
+          className="c11"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear
+        </span>
         <svg
           aria-hidden="true"
-          className="c11"
+          className="c12"
           fill="currentColor"
           focusable="false"
           style={
@@ -164541,57 +165869,54 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           />
         </svg>
         <span
-          className="c12"
+          aria-hidden={true}
+          className="c13"
         >
-          <span
-            className="c13"
-          >
-            ？
-          </span>
+          ？
         </span>
       </div>
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c15"
+      className="c14"
     >
       <div
-        className="c16"
+        className="c15"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c17"
+            className="c16"
           >
             <span>
               <span
-                className="c14"
+                className="c11"
               >
                  - 
                 Ride
               </span>
               <span
-                className="c17 c41"
+                className="c16 c40"
               >
                 <div>
                   <span
-                    className="c42"
+                    className="c41"
                   >
                     755X
                   </span>
                 </div>
                 <span
-                  className="c43"
+                  className="c42"
                 >
                   <span>
                     Cesar Chavez/Lombard (very long route name) 
                     <span
-                      className="c44"
+                      className="c43"
                     >
                       to
                     </span>
@@ -164600,24 +165925,24 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 </span>
               </span>
               <span
-                className="c14"
+                className="c11"
               >
                  - 
                 Disembark at 
                 SE Cesar Chavez Blvd & Hawthorne
                 <span
-                  className="c39"
+                  className="c38"
                 >
                   ID 7459
                 </span>
               </span>
             </span>
             <button
-              className="c20 c21"
+              className="c19 c20"
               onClick={[Function]}
             >
               <span
-                className="c14"
+                className="c11"
               >
                 Zoom to leg on map
               </span>
@@ -164625,7 +165950,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           </span>
         </div>
         <button
-          className="c45"
+          className="c44"
           onClick={null}
         >
           Arrives in 
@@ -164651,24 +165976,24 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
             />
           </div>
           <div
-            className="c46"
+            className="c45"
           >
             <div
-              className="c47"
+              className="c46"
             >
               <button
-                className="c20 c48"
+                className="c19 c47"
                 onClick={[Function]}
               >
                 Ride 
                 4 min
                  / 5 stops
                 <span
-                  className="c25"
+                  className="c24"
                 >
                   <svg
                     aria-hidden="true"
-                    className="c11"
+                    className="c12"
                     fill="currentColor"
                     focusable="false"
                     height={15}
@@ -164683,7 +166008,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </svg>
                 </span>
                 <span
-                  className="c14"
+                  className="c11"
                 >
                   (Expand details)
                 </span>
@@ -164703,63 +166028,63 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 style={Object {}}
               >
                 <div
-                  className="c49"
+                  className="c48"
                 >
                   <ol
-                    className="c50"
+                    className="c49"
                   >
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Cesar Chavez Blvd & Clinton
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Cesar Chavez Blvd & Division
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Cesar Chavez Blvd & Lincoln
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Cesar Chavez Blvd & Stephens
                       </div>
@@ -164773,11 +166098,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       </div>
     </div>
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >
@@ -164843,7 +166168,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       >
         SE Cesar Chavez Blvd & Hawthorne
         <span
-          className="c39"
+          className="c38"
         >
           ID 7459
         </span>
@@ -164855,44 +166180,44 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       3:52 PM
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c15"
+      className="c14"
     >
       <div
-        className="c16"
+        className="c15"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c17"
+            className="c16"
           >
             <span
-              className="c18"
+              className="c17"
             />
             <span
-              className="c14"
+              className="c11"
             >
                - 
             </span>
             <span>
               Walk 440 feet to 
               <span
-                className="c19"
+                className="c18"
               >
                 SE Hawthorne & Cesar Chavez Blvd
               </span>
             </span>
             <button
-              className="c20 c21"
+              className="c19 c20"
               onClick={[Function]}
             >
               <span
-                className="c14"
+                className="c11"
               >
                 Zoom to leg on map
               </span>
@@ -164900,23 +166225,23 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           </span>
         </div>
         <span
-          className="c22"
+          className="c21"
         >
           <span
-            className="c23"
+            className="c22"
           >
             <button
               aria-expanded={false}
-              className="c20 c24"
+              className="c19 c23"
               onClick={[Function]}
             >
               1 min
               <span
-                className="c25"
+                className="c24"
               >
                 <svg
                   aria-hidden="true"
-                  className="c11"
+                  className="c12"
                   fill="currentColor"
                   focusable="false"
                   height={15}
@@ -164931,7 +166256,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 </svg>
               </span>
               <span
-                className="c14"
+                className="c11"
               >
                 (Expand details)
               </span>
@@ -164952,13 +166277,13 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
               style={Object {}}
             >
               <ol
-                className="c26"
+                className="c25"
               >
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -164969,19 +166294,19 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       Head 
                       SOUTH
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         service road
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         146 feet
                       </span>
@@ -164989,10 +166314,10 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </div>
                 </li>
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -165003,18 +166328,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Cesar E. Chavez Blvd
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         198 feet
                       </span>
@@ -165022,10 +166347,10 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </div>
                 </li>
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -165036,18 +166361,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       LEFT
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Hawthorne Blvd
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         96 feet
                       </span>
@@ -165061,11 +166386,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       </div>
     </div>
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >
@@ -165096,14 +166421,14 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
         className="c3"
       >
         <div
-          className="c36"
+          className="c35"
           mode="BUS"
         />
         <div
           className="c5"
         >
           <div
-            className="c37"
+            className="c36"
           >
             <span
               aria-hidden={true}
@@ -165112,7 +166437,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
               1
             </span>
             <span
-              className="c38"
+              className="c37"
             >
               Hawthorne
             </span>
@@ -165129,7 +166454,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       >
         SE Hawthorne & Cesar Chavez Blvd
         <span
-          className="c39"
+          className="c38"
         >
           ID 2626
         </span>
@@ -165140,13 +166465,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
     >
       4:00 PM
       <div
-        className="c54"
+        className="c53"
         color="#ffe4e5"
-        title="❌"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible"
       >
+        <span
+          className="c11"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
+        </span>
         <svg
           aria-hidden="true"
-          className="c11"
+          className="c12"
           fill="currentColor"
           focusable="false"
           style={
@@ -165172,57 +166502,54 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           />
         </svg>
         <span
-          className="c12"
+          aria-hidden={true}
+          className="c13"
         >
-          <span
-            className="c13"
-          >
-            ❌
-          </span>
+          ❌
         </span>
       </div>
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c15"
+      className="c14"
     >
       <div
-        className="c16"
+        className="c15"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c17"
+            className="c16"
           >
             <span>
               <span
-                className="c14"
+                className="c11"
               >
                  - 
                 Ride
               </span>
               <span
-                className="c17 c41"
+                className="c16 c40"
               >
                 <div>
                   <span
-                    className="c42"
+                    className="c41"
                   >
                     1
                   </span>
                 </div>
                 <span
-                  className="c43"
+                  className="c42"
                 >
                   <span>
                     Hawthorne 
                     <span
-                      className="c44"
+                      className="c43"
                     >
                       to
                     </span>
@@ -165231,24 +166558,24 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 </span>
               </span>
               <span
-                className="c14"
+                className="c11"
               >
                  - 
                 Disembark at 
                 SE Hawthorne & 27th
                 <span
-                  className="c39"
+                  className="c38"
                 >
                   ID 2613
                 </span>
               </span>
             </span>
             <button
-              className="c20 c21"
+              className="c19 c20"
               onClick={[Function]}
             >
               <span
-                className="c14"
+                className="c11"
               >
                 Zoom to leg on map
               </span>
@@ -165256,7 +166583,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           </span>
         </div>
         <button
-          className="c45"
+          className="c44"
           onClick={null}
         >
           Arrives in 
@@ -165282,24 +166609,24 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
             />
           </div>
           <div
-            className="c46"
+            className="c45"
           >
             <div
-              className="c47"
+              className="c46"
             >
               <button
-                className="c20 c48"
+                className="c19 c47"
                 onClick={[Function]}
               >
                 Ride 
                 4 min
                  / 5 stops
                 <span
-                  className="c25"
+                  className="c24"
                 >
                   <svg
                     aria-hidden="true"
-                    className="c11"
+                    className="c12"
                     fill="currentColor"
                     focusable="false"
                     height={15}
@@ -165314,7 +166641,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </svg>
                 </span>
                 <span
-                  className="c14"
+                  className="c11"
                 >
                   (Expand details)
                 </span>
@@ -165334,63 +166661,63 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 style={Object {}}
               >
                 <div
-                  className="c49"
+                  className="c48"
                 >
                   <ol
-                    className="c50"
+                    className="c49"
                   >
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Hawthorne & 37th
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Hawthorne & 34th
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Hawthorne & 32nd
                       </div>
                     </li>
                     <li
-                      className="c51"
+                      className="c50"
                     >
                       <div
-                        className="c52"
+                        className="c51"
                       >
                         •
                       </div>
                       <div
-                        className="c53"
+                        className="c52"
                       >
                         SE Hawthorne & 30th
                       </div>
@@ -165404,11 +166731,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       </div>
     </div>
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >
@@ -165474,7 +166801,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       >
         SE Hawthorne & 27th
         <span
-          className="c39"
+          className="c38"
         >
           ID 2613
         </span>
@@ -165485,13 +166812,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
     >
       4:04 PM
       <div
-        className="c54"
+        className="c53"
         color="#ffe4e5"
-        title="❌"
+        title="otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible"
       >
+        <span
+          className="c11"
+        >
+          otpUi.ItineraryBody.tripAccessibility.legAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
+        </span>
         <svg
           aria-hidden="true"
-          className="c11"
+          className="c12"
           fill="currentColor"
           focusable="false"
           style={
@@ -165517,55 +166849,52 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           />
         </svg>
         <span
-          className="c12"
+          aria-hidden={true}
+          className="c13"
         >
-          <span
-            className="c13"
-          >
-            ❌
-          </span>
+          ❌
         </span>
       </div>
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       otpUi.TransitLegBody.fromLocation
     </span>
     <div
-      className="c15"
+      className="c14"
     >
       <div
-        className="c16"
+        className="c15"
       >
         <div
           className="styled__LegClickable-sc-1q8npbl-24"
         >
           <span
-            className="c17"
+            className="c16"
           >
             <span
-              className="c18"
+              className="c17"
             />
             <span
-              className="c14"
+              className="c11"
             >
                - 
             </span>
             <span>
               Walk 479 feet to 
               <span
-                className="c19"
+                className="c18"
               >
                 1415 SE 28th Ave, Portland, OR, USA 97214
               </span>
             </span>
             <button
-              className="c20 c21"
+              className="c19 c20"
               onClick={[Function]}
             >
               <span
-                className="c14"
+                className="c11"
               >
                 Zoom to leg on map
               </span>
@@ -165573,23 +166902,23 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           </span>
         </div>
         <span
-          className="c22"
+          className="c21"
         >
           <span
-            className="c23"
+            className="c22"
           >
             <button
               aria-expanded={false}
-              className="c20 c24"
+              className="c19 c23"
               onClick={[Function]}
             >
               2 min
               <span
-                className="c25"
+                className="c24"
               >
                 <svg
                   aria-hidden="true"
-                  className="c11"
+                  className="c12"
                   fill="currentColor"
                   focusable="false"
                   height={15}
@@ -165604,7 +166933,7 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                 </svg>
               </span>
               <span
-                className="c14"
+                className="c11"
               >
                 (Expand details)
               </span>
@@ -165625,13 +166954,13 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
               style={Object {}}
             >
               <ol
-                className="c26"
+                className="c25"
               >
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -165642,19 +166971,19 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       Head 
                       WEST
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Hawthorne Blvd
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         40 feet
                       </span>
@@ -165662,10 +166991,10 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </div>
                 </li>
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -165676,18 +167005,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE 27th Ave
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         294 feet
                       </span>
@@ -165695,10 +167024,10 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                   </div>
                 </li>
                 <li
-                  className="c27"
+                  className="c26"
                 >
                   <div
-                    className="c28"
+                    className="c27"
                   >
                     <svg
                       viewBox="0 0 261 261"
@@ -165709,18 +167038,18 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
                     </svg>
                   </div>
                   <div
-                    className="c29"
+                    className="c28"
                   >
                     <span>
                       RIGHT
                        on 
                       <span
-                        className="c30"
+                        className="c29"
                       >
                         SE Madison St
                       </span>
                       <span
-                        className="c31"
+                        className="c30"
                       >
                         146 feet
                       </span>
@@ -165734,11 +167063,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       </div>
     </div>
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >
@@ -165772,11 +167101,11 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
           className="c5"
         >
           <div
-            className="c55"
+            className="c54"
           >
             <svg
               aria-hidden="true"
-              className="c11 c56"
+              className="c12 c55"
               fill="currentColor"
               focusable="false"
               height={25}
@@ -165809,20 +167138,20 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Transit Transfer With A 11 Y Itine
       4:06 PM
     </div>
     <span
-      className="c14"
+      className="c11"
     >
       Arrive at 
       1415 SE 28th Ave, Portland, OR, USA 97214
     </span>
     <div
-      className="c15"
+      className="c14"
     />
     <div
-      className="c32 c33"
+      className="c31 c32"
     >
       <a
         aria-label="View on map"
-        className="c34 c35"
+        className="c33 c34"
         onClick={[Function]}
         title="View on map"
       >