Skip to content

Commit 6e7c93a

Browse files
mcreinhardcopybara-github
authored andcommitted
fix: remove header/heading semantics from Store Locator for a11y
PiperOrigin-RevId: 688746007
1 parent 7e11d01 commit 6e7c93a

2 files changed

Lines changed: 11 additions & 11 deletions

File tree

src/store_locator/store_locator.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -415,9 +415,9 @@ export class StoreLocator extends BaseComponent {
415415
.place=${listing.placeResult}>
416416
<div class="result-item">
417417
<button class="select-location" @click=${selectButtonClick}>
418-
<h2 class="name">
418+
<div class="name">
419419
<gmpx-place-field-text field="displayName"></gmpx-place-field-text>
420-
</h2>
420+
</div>
421421
</button>
422422
<div class="address">
423423
${join(listing.addressLines ?? [], html`<br>`)}
@@ -465,16 +465,16 @@ export class StoreLocator extends BaseComponent {
465465
const header = this.featureSet === FeatureSet.BASIC ?
466466
nothing :
467467
html`
468-
<header>
469-
<h1 class="search-title">
468+
<div class="header">
469+
<div class="search-title">
470470
<span class="icon material-symbols-outlined">distance</span>
471471
${this.getMsg('LOCATOR_LIST_HEADER')}
472-
</h1>
472+
</div>
473473
<gmpx-place-picker for-map="main-map" type="geocode"
474474
.placeholder=${this.getMsg('LOCATOR_SEARCH_PROMPT')}
475475
@gmpx-placechange=${this.updateSearchLocation}>
476476
</gmpx-place-picker>
477-
</header>
477+
</div>
478478
`;
479479

480480
return html`

src/store_locator/store_locator_styles.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,18 @@ export const storeLocatorStyles = css`
5454
padding: 0.5em;
5555
}
5656
57-
#locations-panel-list > header {
57+
#locations-panel-list > .header {
5858
padding: 1.4em 1.4em 0 1.4em;
5959
}
6060
61-
#locations-panel-list h1.search-title {
61+
#locations-panel-list .search-title {
6262
align-items: center;
6363
display: flex;
6464
font: ${GMPX_FONT_TITLE_LARGE};
6565
margin: 0;
6666
}
6767
68-
#locations-panel-list h1.search-title .icon {
68+
#locations-panel-list .search-title .icon {
6969
font-size: 150%;
7070
margin-right: 0.2em;
7171
}
@@ -101,7 +101,7 @@ export const storeLocatorStyles = css`
101101
outline-offset: -2px;
102102
}
103103
104-
#location-results-list h2 {
104+
#location-results-list .name {
105105
font: ${GMPX_FONT_TITLE_LARGE};
106106
margin: 0 0 0.6em 0;
107107
}
@@ -162,4 +162,4 @@ export const storeLocatorStyles = css`
162162
fill: #3367D6;
163163
fill-opacity: 50%;
164164
}
165-
`;
165+
`;

0 commit comments

Comments
 (0)