Improve View Details Link Accessibility

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

lib/components/viewers/related-stops-panel.js

@@ -95,6 +95,7 @@ class RelatedStopsPanel extends Component {
                   </div>
                   <ViewStopButton
                     className="view-child-stop-button"
+                    forStop={label}
                     stopId={stop.id}
                     text={
                       <FormattedMessage id="components.RelatedStopsPanel.viewDetails" />

lib/components/viewers/view-stop-button.js

@@ -1,36 +1,52 @@
-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 { 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,
+    forStop: 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.forStop && (
+          <InvisibleA11yLabel>
+            {' '}
+            <FormattedMessage
+              id="components.StopViewer.forStop"
+              values={{ stopName: this.props.forStop }}
+            />
+          </InvisibleA11yLabel>
+        )}
       </Button>
     )
   }
 }
 
 const mapStateToProps = (state, ownProps) => {
-  return { }
+  return {}
 }
 
 const mapDispatchToProps = {