Issue 669 va-link for google directions (#673)

Co-authored-by: Tim Cosgrove <timcosgrove@users.noreply.github.com>
Co-authored-by: JR Reed <mikereed101@gmail.com>

src/templates/common/googleMapsDirections/index.test.tsx

@@ -11,10 +11,14 @@ describe('GoogleMapsDirections Component', () => {
 
     render(<GoogleMapsDirections title={title} address={address} />)
 
-    const anchorElement = screen.getByRole('link', {
-      name: /get directions on google maps/i,
-    })
+    //leaving old elemet selector just in case we need to re-use it
+    // const anchorElement = screen.getByRole('va-link', {
+    //   name: "maps-directions",
+    // })
+
+    const anchorElement = screen.getByTestId('maps-directions')
     expect(anchorElement).toBeInTheDocument()
+
     expect(anchorElement).toHaveAttribute('href', expectedUrl)
   })
 })

src/templates/common/googleMapsDirections/index.tsx

@@ -4,11 +4,13 @@ export const GoogleMapsDirections = ({ title, address }) => {
   )}`
 
   return (
-    <div>
-      <a href={googleMapsUrl}>
-        Get directions on Google Maps
-        <span className="sr-only">to {title}</span>
-      </a>
-    </div>
+    <va-link
+      class="vads-u-display--block vads-u-margin-top--0"
+      href={googleMapsUrl}
+      name="maps-directions"
+      id="google-map-directions"
+      text={`Get directions on Google Maps`}
+      data-testid="maps-directions"
+    ></va-link>
   )
 }