fix: remove header/heading semantics from Store Locator for a11y

PiperOrigin-RevId: 688703942
googlemaps · Oct 22, 2024 · 6ead425 · 6ead425
1 parent 7e11d01
commit 6ead425
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/src/store_locator/store_locator.ts b/src/store_locator/store_locator.ts
@@ -415,9 +415,7 @@ export class StoreLocator extends BaseComponent {
             .place=${listing.placeResult}>
           <div class="result-item">
             <button class="select-location" @click=${selectButtonClick}>
-              <h2 class="name">
-                <gmpx-place-field-text field="displayName"></gmpx-place-field-text>
-              </h2>
+              <gmpx-place-field-text class="name" field="displayName"></gmpx-place-field-text>
             </button>
             <div class="address">
               ${join(listing.addressLines ?? [], html`<br>`)}
@@ -465,16 +463,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;
   }
@@ -162,4 +162,4 @@ export const storeLocatorStyles = css`
     fill: #3367D6;
     fill-opacity: 50%;
   }
-`;
+`;