feat: improve accessibility of reset button (#341)

smeijer · Oct 3, 2022 · 912de5f · 912de5f
1 parent 57fa248
commit 912de5f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/assets/css/leaflet.css b/assets/css/leaflet.css
@@ -216,7 +216,7 @@
   font-style: italic;
 }
 
-.leaflet-control-geosearch a.reset {
+.leaflet-control-geosearch button.reset {
   color: black;
   font-weight: bold;
   position: absolute;
@@ -231,10 +231,10 @@
   border-radius: 0 4px 4px 0;
 }
 
-.leaflet-touch .leaflet-control-geosearch a.reset {
+.leaflet-touch .leaflet-control-geosearch button.reset {
   line-height: 30px;
 }
 
-.leaflet-control-geosearch a.reset:hover {
+.leaflet-control-geosearch button.reset:hover {
   background: #f5f5f5;
 }
diff --git a/src/SearchControl.ts b/src/SearchControl.ts
@@ -36,6 +36,7 @@ const defaultOptions: Omit<SearchControlProps, 'provider'> = {
   retainZoomLevel: false,
   animateZoom: true,
   searchLabel: 'Enter address',
+  clearSearchLabel: 'Clear search',
   notFoundMessage: '',
   messageHideDelay: 3000,
   zoomLevel: 18,
@@ -83,6 +84,7 @@ interface SearchControlProps {
   resultFormat<T = any>(args: { result: SearchResult<T> }): string;
 
   searchLabel: string;
+  clearSearchLabel: string;
   notFoundMessage: string;
   messageHideDelay: number;
 
@@ -196,12 +198,12 @@ const Control: SearchControl = {
     L.DomEvent.disableClickPropagation(this.button);
 
     this.resetButton = createElement<HTMLAnchorElement>(
-      'a',
+      'button',
       this.classNames.resetButton,
       this.searchElement.form,
       {
         text: '×',
-        href: '#',
+        'aria-label': this.options.clearSearchLabel,
         onClick: () => {
           if (this.searchElement.input.value === '') {
             this.close();