refactor(itinerary): use button instead of a tag

Author: evansiroky

Diff for: dist/index.css.map

@@ -19,11 +19,11 @@
   padding: 0px;
 }
 
-a.header, a.step, .intermediate-stops a  {
+button.header, button.step, .intermediate-stops button  {
+  background: inherit;
   color: inherit;
+  border: 0;
+  text-align: inherit;
   text-decoration: none;
-}
-
-.step {
   width: 100%;
 }

Diff for: example.css

@@ -13,7 +13,7 @@ export default class AccessLeg extends Component {
     setActiveStep: PropTypes.func
   }
 
-  _onLegClick (e) {
+  _onLegClick = (e) => {
     const {active, leg, index, setActiveLeg} = this.props
     if (active) {
       setActiveLeg(null)
@@ -36,35 +36,31 @@ export default class AccessLeg extends Component {
       <div
         key={index}
         className={`leg${active ? ' active' : ''}`}>
-        <a
+        <button
           className='header'
           onClick={this._onLegClick}
-          tabIndex='0'
           >
           <span><Icon type={`caret-${active ? 'down' : 'right'}`} /></span>
           <span><b>{leg.mode}</b></span>
           {' '}
           <span className='leg-duration'>{formatDuration(leg.duration)}</span>
           {' '}
           <span className='leg-distance'>({distanceString(leg.distance)})</span>
-        </a>
+        </button>
         {active &&
           <div className='step-by-step'>
             <div className='access-leg'>
               {leg.steps.map((step, stepIndex) => {
                 const stepIsActive = activeStep === stepIndex
                 return (
-                  <div>
-                    <a
-                      key={stepIndex}
-                      className={`step ${stepIsActive ? 'active' : ''}`}
-                      onClick={(e) => this._onStepClick(e, step, stepIndex)}
-                      tabIndex='0'
-                      >
-                      <span className='step-distance'>{distanceString(step.distance)}</span>
-                      <span className='step-text'>{getStepInstructions(step)}</span>
-                    </a>
-                  </div>
+                  <button
+                    key={stepIndex}
+                    className={`step ${stepIsActive ? 'active' : ''}`}
+                    onClick={(e) => this._onStepClick(e, step, stepIndex)}
+                    >
+                    <span className='step-distance'>{distanceString(step.distance)}</span>
+                    <span className='step-text'>{getStepInstructions(step)}</span>
+                  </button>
                 )
               })}
             </div>

Diff for: lib/components/narrative/access-leg.js

@@ -37,16 +37,15 @@ export default class NarrativeItinerary extends Component {
     } = this.props
     return (
       <div className={`option itinerary${active ? ' active' : ''}`}>
-        <a
+        <button
           className='header'
           onClick={this._onHeaderClick}
-          tabIndex='0'
         >
           <span className='title'>Itinerary {index + 1}</span>{' '}
           <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
           <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
           <ItinerarySummary itinerary={itinerary} />
-        </a>
+        </button>
         {active &&
           <div className='body'>
             <ItineraryDetails

Diff for: lib/components/narrative/narrative-itinerary.js

@@ -36,14 +36,13 @@ export default class TransitLeg extends Component {
     return (
       <div
         className={`leg${active ? ' active' : ''}`}>
-        <a
+        <button
           className={`header`}
           onClick={(e) => this._onLegClick(e, leg, index)}
-          tabIndex='0'
           >
           {leg.realTime ? <Icon type='rss' /> : null}
           <span><Label>{leg.routeShortName}</Label> <b>{leg.routeLongName}</b> {leg.headsign}</span>
-        </a>
+        </button>
         <div className='step-by-step'>
           <div className='transit-leg'>
             <div className='from-stop'>
@@ -54,15 +53,14 @@ export default class TransitLeg extends Component {
                 className='stop-count'
                 style={{borderLeft: `3px solid ${getMapColor(leg.mode)}`}}
                 >
-                <a
+                <button
                   onClick={this._onClick}
-                  tabIndex='0'
                   >
                   <Icon type={`caret-${expanded ? 'down' : 'right'}`} />
                   <span className='transit-duration'>{formatDuration(leg.duration)}</span>
                   {' '}
                   ({numStops ? `${numStops} stops` : 'non-stop'})
-                </a>
+                </button>
                 {leg.alerts &&
                   <div>
                     <div className='item'><Icon type='exclamation-circle' /> Information</div>