From fbe248a06159e0aa2c2a1da48151e6f24a3370bc Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 3 May 2023 17:38:26 -0500
Subject: [PATCH 1/2] make view details link accessible

---
 i18n/en-US.yml                                |  3 +-
 lib/components/viewers/related-stops-panel.js |  1 +
 lib/components/viewers/view-stop-button.js    | 33 ++++++++++++++-----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index f77ea9ac8..b2e036689 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -106,6 +106,7 @@ common:
     relativeCo2: |
       {co2} {isMore, select, true {more} other {less} } CO₂ than driving alone
     transfers: "{transfers, plural, =0 {} one {# transfer} other {# transfers}}"
+  linkOpensNewWindow: (Opens new window)
   modes:
     bicycle_rent: Bikeshare
     bike: Bike
@@ -153,7 +154,6 @@ common:
     tripDurationFormat: >-
       {hours, plural, =0 {} other {# hr }}{minutes} min { seconds, plural, =0 {}
       other {# sec}}
-  linkOpensNewWindow: "(Opens new window)"
 components:
   A11yPrefs:
     accessibilityRoutingByDefault: Prefer accessible trips by default
@@ -505,6 +505,7 @@ components:
       This is a flex stop. Vehicles will drop off and pick up passengers in this
       flexible zone by request. You may have to call ahead for service in this
       area.
+    forStop: for {stopName}
     header: Stop Viewer
     loadingText: Loading Stop...
     nextArrivals: Next Arrivals
diff --git a/lib/components/viewers/related-stops-panel.js b/lib/components/viewers/related-stops-panel.js
index 66a467f51..e946dcfcc 100644
--- a/lib/components/viewers/related-stops-panel.js
+++ b/lib/components/viewers/related-stops-panel.js
@@ -95,6 +95,7 @@ class RelatedStopsPanel extends Component {
                   </div>
                   <ViewStopButton
                     className="view-child-stop-button"
+                    label={label}
                     stopId={stop.id}
                     text={
                       <FormattedMessage id="components.RelatedStopsPanel.viewDetails" />
diff --git a/lib/components/viewers/view-stop-button.js b/lib/components/viewers/view-stop-button.js
index 5c345b54d..53d68f646 100644
--- a/lib/components/viewers/view-stop-button.js
+++ b/lib/components/viewers/view-stop-button.js
@@ -1,36 +1,53 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { Button } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
 import { connect } from 'react-redux'
+import { Formatted } from 'maplibre-gl'
+import { FormattedMessage } from 'react-intl'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { setMainPanelContent, setViewedStop } from '../../actions/ui'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
 class ViewStopButton extends Component {
   static propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.string,
+    setViewedStop: PropTypes.func,
     stopId: PropTypes.string,
     text: PropTypes.element
   }
 
   _onClick = () => {
-    this.props.setViewedStop({stopId: this.props.stopId})
+    this.props.setViewedStop({ stopId: this.props.stopId })
   }
 
-  render () {
+  render() {
     return (
       <Button
-        bsSize='xsmall'
+        bsSize="xsmall"
         className={this.props.className || 'view-stop-button'}
         onClick={this._onClick}
+        role="link"
       >
-        {this.props.text || <FormattedMessage id='components.StopViewer.header' />}
+        {this.props.text || (
+          <FormattedMessage id="components.StopViewer.header" />
+        )}
+        {this.props.label && (
+          <InvisibleA11yLabel>
+            {' '}
+            <FormattedMessage
+              id="components.StopViewer.forStop"
+              values={{ stopName: this.props.label }}
+            />
+          </InvisibleA11yLabel>
+        )}
       </Button>
     )
   }
 }
 
 const mapStateToProps = (state, ownProps) => {
-  return { }
+  return {}
 }
 
 const mapDispatchToProps = {

From d404aca9dda1628d241a13e54ed2b3e57866feed Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 4 May 2023 12:56:47 -0500
Subject: [PATCH 2/2] refactor: update label and remove unused import

---
 lib/components/viewers/related-stops-panel.js | 2 +-
 lib/components/viewers/view-stop-button.js    | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/lib/components/viewers/related-stops-panel.js b/lib/components/viewers/related-stops-panel.js
index e946dcfcc..537167e2e 100644
--- a/lib/components/viewers/related-stops-panel.js
+++ b/lib/components/viewers/related-stops-panel.js
@@ -95,7 +95,7 @@ class RelatedStopsPanel extends Component {
                   </div>
                   <ViewStopButton
                     className="view-child-stop-button"
-                    label={label}
+                    forStop={label}
                     stopId={stop.id}
                     text={
                       <FormattedMessage id="components.RelatedStopsPanel.viewDetails" />
diff --git a/lib/components/viewers/view-stop-button.js b/lib/components/viewers/view-stop-button.js
index 53d68f646..9cffa4141 100644
--- a/lib/components/viewers/view-stop-button.js
+++ b/lib/components/viewers/view-stop-button.js
@@ -1,6 +1,5 @@
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { Formatted } from 'maplibre-gl'
 import { FormattedMessage } from 'react-intl'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -11,7 +10,7 @@ import InvisibleA11yLabel from '../util/invisible-a11y-label'
 class ViewStopButton extends Component {
   static propTypes = {
     className: PropTypes.string,
-    label: PropTypes.string,
+    forStop: PropTypes.string,
     setViewedStop: PropTypes.func,
     stopId: PropTypes.string,
     text: PropTypes.element
@@ -32,12 +31,12 @@ class ViewStopButton extends Component {
         {this.props.text || (
           <FormattedMessage id="components.StopViewer.header" />
         )}
-        {this.props.label && (
+        {this.props.forStop && (
           <InvisibleA11yLabel>
             {' '}
             <FormattedMessage
               id="components.StopViewer.forStop"
-              values={{ stopName: this.props.label }}
+              values={{ stopName: this.props.forStop }}
             />
           </InvisibleA11yLabel>
         )}