From 696ae152f1ade2f74dbfe2e8c5e052a656511f13 Mon Sep 17 00:00:00 2001
From: awmack <awmack@google.com>
Date: Tue, 22 Oct 2024 13:28:15 -0700
Subject: [PATCH] fix: add accessible label to store locator directions button

PiperOrigin-RevId: 688670234
---
 src/base/strings.ts                | 3 +++
 src/store_locator/store_locator.ts | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/base/strings.ts b/src/base/strings.ts
index 77ae61d..166f59d 100644
--- a/src/base/strings.ts
+++ b/src/base/strings.ts
@@ -19,6 +19,7 @@ export type StringFunction = (...args: any[]) => string;
 export declare interface StringLiterals extends
     Record<string, string|StringFunction> {
   LOCATOR_BACK_BUTTON_CTA: string;
+  LOCATOR_DIRECTIONS_BUTTON_LABEL: (destination: string) => string;
   LOCATOR_LIST_HEADER: string;
   LOCATOR_LIST_SUBHEADING: string;
   LOCATOR_LIST_SUBHEADING_WITH_SEARCH: string;
@@ -64,6 +65,8 @@ export declare interface StringLiterals extends
  */
 export const STRING_LITERALS_EN_US: StringLiterals = Object.freeze({
   'LOCATOR_BACK_BUTTON_CTA': 'Back',
+  'LOCATOR_DIRECTIONS_BUTTON_LABEL': (destination) =>
+      `Directions to ${destination}`,
   'LOCATOR_LIST_HEADER': 'Find a location near you',
   'LOCATOR_LIST_SUBHEADING': 'All locations',
   'LOCATOR_LIST_SUBHEADING_WITH_SEARCH': 'Nearest locations',
diff --git a/src/store_locator/store_locator.ts b/src/store_locator/store_locator.ts
index 2565cb0..22a3204 100644
--- a/src/store_locator/store_locator.ts
+++ b/src/store_locator/store_locator.ts
@@ -383,9 +383,10 @@ export class StoreLocator extends BaseComponent {
           </gmpx-icon-button>`);
     }
     for (const action of listing.actions ?? []) {
-      actionButtons.push(html`
+      actionButtons.push(
+          html`
           <gmpx-icon-button icon="open_in_new" .href=${
-          action.defaultUri ?? nothing}>
+              action.defaultUri ?? nothing}>
             ${action.label}
           </gmpx-icon-button>`);
     }
@@ -426,6 +427,7 @@ export class StoreLocator extends BaseComponent {
             </div>
             <div class="distance">${distanceHtml}</div>
             <gmpx-place-directions-button condensed
+                .ariaLabel=${this.getMsg('LOCATOR_DIRECTIONS_BUTTON_LABEL', listing.title)}
                 .origin=${this.searchLocation?.location ?? undefined}>
             </gmpx-place-directions-button>
           </div>