fix: remove <br> from Store Locator for a11y

PiperOrigin-RevId: 688714416
googlemaps · Oct 22, 2024 · ec1c655 · ec1c655
1 parent 7e11d01
commit ec1c655
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/store_locator/store_locator.ts b/src/store_locator/store_locator.ts
@@ -415,12 +415,12 @@ export class StoreLocator extends BaseComponent {
             .place=${listing.placeResult}>
           <div class="result-item">
             <button class="select-location" @click=${selectButtonClick}>
-              <h2 class="name">
+              <div class="name">
                 <gmpx-place-field-text field="displayName"></gmpx-place-field-text>
-              </h2>
+              </div>
             </button>
             <div class="address">
-              ${join(listing.addressLines ?? [], html`<br>`)}
+              ${(listing.addressLines ?? []).map((line) => html`<p>${line}</p>`)}
             </div>
             <div class="actions">
               ${join(actionButtons, html``)}
@@ -465,16 +465,16 @@ export class StoreLocator extends BaseComponent {
     const header = this.featureSet === FeatureSet.BASIC ?
         nothing :
         html`
-        <header>
-          <h1 class="search-title">
+        <div class="header">
+          <div class="search-title">
             <span class="icon material-symbols-outlined">distance</span>
             ${this.getMsg('LOCATOR_LIST_HEADER')}
-          </h1>
+          </div>
           <gmpx-place-picker for-map="main-map" type="geocode"
               .placeholder=${this.getMsg('LOCATOR_SEARCH_PROMPT')}
               @gmpx-placechange=${this.updateSearchLocation}>
           </gmpx-place-picker>
-        </header>
+        </div>
     `;
 
     return html`

diff --git a/src/store_locator/store_locator_styles.ts b/src/store_locator/store_locator_styles.ts
@@ -54,18 +54,18 @@ export const storeLocatorStyles = css`
     padding: 0.5em;
   }
 
-  #locations-panel-list > header {
+  #locations-panel-list > .header {
     padding: 1.4em 1.4em 0 1.4em;
   }
 
-  #locations-panel-list h1.search-title {
+  #locations-panel-list .search-title {
     align-items: center;
     display: flex;
     font: ${GMPX_FONT_TITLE_LARGE};
     margin: 0;
   }
 
-  #locations-panel-list h1.search-title .icon {
+  #locations-panel-list .search-title .icon {
     font-size: 150%;
     margin-right: 0.2em;
   }
@@ -101,7 +101,7 @@ export const storeLocatorStyles = css`
     outline-offset: -2px;
   }
 
-  #location-results-list h2 {
+  #location-results-list .name {
     font: ${GMPX_FONT_TITLE_LARGE};
     margin: 0 0 0.6em 0;
   }
@@ -111,6 +111,10 @@ export const storeLocatorStyles = css`
     margin-bottom: 0.5em;
   }
 
+  #location-results-list .address p {
+    margin: 0;
+  }
+
   #location-results-list gmpx-place-directions-button {
     position: absolute;
     right: 1.2em;
@@ -162,4 +166,4 @@ export const storeLocatorStyles = css`
     fill: #3367D6;
     fill-opacity: 50%;
   }
-`;
+`;