fix: add accessible label to store locator directions button

PiperOrigin-RevId: 688670234
googlemaps · Oct 22, 2024 · 696ae15 · 696ae15
1 parent 8de2d96
commit 696ae15
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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>