Merge pull request #969 from opentripplanner/route-viewer-a11y-updates

Include Route Details in Route Button
opentripplanner · Aug 28, 2023 · e9b4c12 · e9b4c12
2 parents 6734acf + e5af8d4
commit e9b4c12
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 50 deletions.
diff --git a/lib/components/viewers/RouteRow.js b/lib/components/viewers/RouteRow.js
@@ -9,6 +9,7 @@ import { ComponentContext } from '../../util/contexts'
 import { getFormattedMode } from '../../util/i18n'
 import { getModeFromRoute } from '../../util/viewer'
 import { Icon } from '../util/styledIcon'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import OperatorLogo from '../util/operator-logo'
 
 import RouteName from './route-name'
@@ -17,19 +18,20 @@ export const StyledRouteRow = styled.li`
   align-items: center;
   background-color: transparent;
   display: flex;
-  gap: 7px;
   justify-content: space-between;
   list-style: none;
   margin: 5px 0;
-  padding: 5px;
+  min-height: 50px;
   position: relative;
 `
 // Route Row Button sits invisible on top of the route name and info.
 export const RouteRowButton = styled(Button)`
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
+  align-items: center;
+  display: flex;
+  min-height: 50px;
+  padding: 5px;
+  // Make sure route details always leaves enough room for pattern button
+  padding-right: 55px;
   transition: all ease-out 0.1s;
   width: 100%;
 
@@ -45,15 +47,6 @@ export const RouteRowButton = styled(Button)`
     z-index: -4;
   }
 
-  &:active,
-  &.btn-default:active:focus {
-    background-color: transparent !important;
-  }
-
-  &:active:before,
-  &.btn-default:active:focus:before {
-    background-color: #eee;
-    transition: all ease-out 0.1s;
   }
 `
 
@@ -69,11 +62,10 @@ export const ModeIconElement = styled.span`
 
 const RouteDetailsContainer = styled.div`
   align-items: center;
-  display: grid;
-  grid-template-columns: repeat(4, auto);
+  display: flex;
   gap: 12px;
-  justify-items: center;
   margin-left: 5px;
+  overflow: hidden;
 `
 
 const PatternButton = styled.button`
@@ -83,15 +75,16 @@ const PatternButton = styled.button`
   color: #004f96;
   height: 40px;
   margin-right: 8px;
-  min-width: 40px;
-  opacity: ${(props) => (props.display ? '80%' : 0)};
-  position: relative;
+  position: absolute;
+  right: 5px;
   transition: all ease-out 0.1s;
   z-index: ${(props) => (props.display ? 2 : -2)};
+  width: 40px;
 
   svg {
-    margin-top: -3px;
     height: 22px !important;
+    margin-top: -3px;
+    opacity: ${(props) => (props.display ? '80%' : 0)};
     width: 22px !important;
   }
 
@@ -101,7 +94,7 @@ const PatternButton = styled.button`
   }
 
   &:hover {
-    background: #eee;
+    background: #fff;
     transition: all ease-out 0.1s;
   }
 `
@@ -172,42 +165,45 @@ export class RouteRow extends PureComponent {
 
     return (
       <StyledRouteRow ref={this.activeRef}>
-        <RouteDetailsContainer>
-          <OperatorLogo operator={operator} />
-          {route.mode && (
-            <ModeIconElement>
-              <ModeIcon
-                aria-label={getFormattedMode(
-                  getModeFromRoute(route).toLowerCase(),
-                  intl
-                )}
-                height={28}
-                leg={{
-                  routeLongName: route?.longName,
-                  routeShortName: route?.shortName
-                }}
-                mode={getModeFromRoute(route)}
-                role="image"
-                width={28}
-              />
-            </ModeIconElement>
-          )}
-          <RouteName route={route} RouteRenderer={RouteRenderer} />
-        </RouteDetailsContainer>
         <RouteRowButton
-          aria-label={routeMapToggleText}
+          aria-pressed={isActive || false}
           className="clear-button-formatting"
           onClick={this._onClick}
           onFocus={this._onFocusOrEnter}
           onMouseEnter={this._onFocusOrEnter}
           onTouchStart={this._onFocusOrEnter}
           patternActive={isActive}
-          title={routeMapToggleText}
-        />
+        >
+          <RouteDetailsContainer>
+            <OperatorLogo operator={operator} />
+            {route.mode && (
+              <ModeIconElement>
+                <ModeIcon
+                  aria-label={getFormattedMode(
+                    getModeFromRoute(route).toLowerCase(),
+                    intl
+                  )}
+                  height={28}
+                  leg={{
+                    routeLongName: route?.longName,
+                    routeShortName: route?.shortName
+                  }}
+                  mode={getModeFromRoute(route)}
+                  role="img"
+                  width={28}
+                />
+              </ModeIconElement>
+            )}
+            <RouteName route={route} RouteRenderer={RouteRenderer} />
+          </RouteDetailsContainer>
+          <InvisibleA11yLabel>({routeMapToggleText})</InvisibleA11yLabel>
+        </RouteRowButton>
         <PatternButton
           aria-label={patternViewerButtonText}
           display={isActive}
-          id={`open-route-button-${route.shortName || route.longName}`}
+          id={`open-route-button-${route.shortName || route.longName}-${
+            operator.name || '' // don't print 'undefined' if there is no operator.
+          }`}
           onClick={this._patternButtonClicked}
           // Cannot keyboard navigate to the button unless it is visible
           tabIndex={isActive ? 0 : -1}

diff --git a/percy/percy.test.js b/percy/percy.test.js
@@ -290,7 +290,7 @@ async function executeTest(page, isMobile, isCallTaker) {
   // click the little pattern arrow
   // Triggers mock.har graphql query #13 and #14 (vehicle positions, twice again).
   // FIXME: Investigate why twice.
-  await page.click('#open-route-button-1')
+  await page.click('#open-route-button-1-')
 
   // View the other pattern on the selected route.
   await page.click('#headsign-selector-label')