From 688ef19c04228aead041f6e83329ef47e8a0d66c Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Tue, 29 Aug 2023 15:06:43 -0400
Subject: [PATCH] A11Y: switch from links to buttons when pertinent

---
 umap/static/umap/js/umap.controls.js    | 326 ++++++++++++------------
 umap/static/umap/js/umap.core.js        |  34 ++-
 umap/static/umap/js/umap.features.js    |  32 ++-
 umap/static/umap/js/umap.forms.js       |  40 ++-
 umap/static/umap/js/umap.js             | 101 ++++----
 umap/static/umap/js/umap.layer.js       |  55 ++--
 umap/static/umap/js/umap.permissions.js |  30 +--
 umap/static/umap/js/umap.popup.js       |   2 +-
 umap/static/umap/js/umap.ui.js          |  34 +--
 9 files changed, 322 insertions(+), 332 deletions(-)

diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 75a8371c..2e740fd7 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -319,15 +319,11 @@ L.U.EditControl = L.Control.extend({
   },
 
   onAdd: function (map) {
-    const container = L.DomUtil.create('div', 'leaflet-control-edit-enable'),
-      edit = L.DomUtil.create('a', '', container)
-    edit.href = '#'
-    edit.title = `${L._('Enable editing')} (Ctrl+E)`
-    edit.textContent = L._('Edit')
-
-    L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener(
-      edit,
-      'click',
+    const container = L.DomUtil.create('div', 'leaflet-control-edit-enable')
+    L.DomUtil.createButton(
+      '',
+      container,
+      `${L._('Enable editing')} (Ctrl+E)`,
       map.enableEdit,
       map
     )
@@ -343,15 +339,14 @@ L.Control.Embed = L.Control.extend({
 
   onAdd: function (map) {
     const container = L.DomUtil.create('div', 'leaflet-control-embed umap-control')
-
-    const link = L.DomUtil.create('a', '', container)
-    link.href = '#'
-    link.title = L._('Embed and share this map')
-
-    L.DomEvent.on(link, 'click', L.DomEvent.stop)
-      .on(link, 'click', map.renderShareBox, map)
-      .on(link, 'dblclick', L.DomEvent.stopPropagation)
-
+    const shareButton = L.DomUtil.createButton(
+      '',
+      container,
+      L._('Embed and share this map'),
+      map.renderShareBox,
+      map
+    )
+    L.DomEvent.on(shareButton, 'dblclick', L.DomEvent.stopPropagation)
     return container
   },
 })
@@ -362,19 +357,21 @@ L.U.MoreControls = L.Control.extend({
   },
 
   onAdd: function () {
-    const container = L.DomUtil.create('div', 'umap-control-text'),
-      more = L.DomUtil.create('a', 'umap-control-more', container),
-      less = L.DomUtil.create('a', 'umap-control-less', container)
-    more.href = '#'
-    more.title = L._('More controls')
-
-    L.DomEvent.on(more, 'click', L.DomEvent.stop).on(more, 'click', this.toggle, this)
-
-    less.href = '#'
-    less.title = L._('Hide controls')
-
-    L.DomEvent.on(less, 'click', L.DomEvent.stop).on(less, 'click', this.toggle, this)
-
+    const container = L.DomUtil.create('div', 'umap-control-text')
+    const moreButton = L.DomUtil.createButton(
+      'umap-control-more',
+      container,
+      L._('More controls'),
+      this.toggle,
+      this
+    )
+    const lessButton = L.DomUtil.createButton(
+      'umap-control-less',
+      container,
+      L._('Hide controls'),
+      this.toggle,
+      this
+    )
     return container
   },
 
@@ -452,23 +449,21 @@ L.U.DataLayersControl = L.Control.extend({
       actions
     )
 
-    const link = L.DomUtil.create('a', 'umap-browse-link', actions)
-    link.href = '#'
-    link.title = link.textContent = L._('Browse data')
-
-    const toggle = L.DomUtil.create('a', 'umap-browse-toggle', container)
-    toggle.href = '#'
-    toggle.title = L._('See data layers')
-
-    L.DomEvent.on(toggle, 'click', L.DomEvent.stop)
-
-    L.DomEvent.on(link, 'click', L.DomEvent.stop).on(
-      link,
-      'click',
+    L.DomUtil.createButton(
+      'umap-browse-link',
+      actions,
+      L._('Browse data'),
       map.openBrowser,
       map
     )
 
+    const toggleButton = L.DomUtil.createButton(
+      'umap-browse-toggle',
+      container,
+      L._('See data layers')
+    )
+    L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop)
+
     map.whenReady(function () {
       this.update()
     }, this)
@@ -489,8 +484,8 @@ L.U.DataLayersControl = L.Control.extend({
       )
     } else {
       L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation)
-      L.DomEvent.on(toggle, 'click', L.DomEvent.stop).on(
-        toggle,
+      L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop).on(
+        toggleButton,
         'click',
         this.expand,
         this
@@ -580,14 +575,11 @@ L.U.DataLayersControl = L.Control.extend({
       this
     )
 
-    const bar = L.DomUtil.create('div', 'button-bar', container),
-      add = L.DomUtil.create('a', 'show-on-edit block add-datalayer button', bar)
-    add.href = '#'
-    add.textContent = add.title = L._('Add a layer')
-
-    L.DomEvent.on(add, 'click', L.DomEvent.stop).on(
-      add,
-      'click',
+    const bar = L.DomUtil.create('div', 'button-bar', container)
+    L.DomUtil.createButton(
+      'show-on-edit block add-datalayer button',
+      bar,
+      L._('Add a layer'),
       this.newDataLayer,
       this
     )
@@ -677,7 +669,6 @@ L.U.DataLayer.addInitHook(function () {
 })
 
 L.U.Map.include({
-
   _openFacet: function () {
     const container = L.DomUtil.create('div', 'umap-facet-search'),
       title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),
@@ -777,13 +768,17 @@ L.U.Map.include({
     }
     if (this.options.licence) {
       const licence = L.DomUtil.add(
-          'p',
-          '',
-          credits,
-          `${L._('Map user content has been published under licence')} `
-        ),
-        link = L.DomUtil.add('a', '', licence, this.options.licence.name)
-      link.href = this.options.licence.url
+        'p',
+        '',
+        credits,
+        `${L._('Map user content has been published under licence')} `
+      )
+      L.DomUtil.createLink(
+        '',
+        licence,
+        this.options.licence.name,
+        this.options.licence.url
+      )
     } else {
       L.DomUtil.add('p', '', credits, L._('No licence has been set'))
     }
@@ -865,78 +860,75 @@ L.U.Map.include({
 
   renderEditToolbar: function () {
     const container = L.DomUtil.create(
-        'div',
-        'umap-main-edit-toolbox with-transition dark',
-        this._controlContainer
-      ),
-      logo = L.DomUtil.add('a', 'logo', container),
-      name = L.DomUtil.create('a', 'map-name', container),
-      share_status = L.DomUtil.create('a', 'share-status', container),
-      update = () => {
-        const status = this.permissions.getShareStatusDisplay()
-        name.textContent = this.getDisplayName()
-        // status is not set until map is saved once
-        if (status)
-          share_status.textContent = L._('Visibility: {status}', {
-            status: status,
-          })
+      'div',
+      'umap-main-edit-toolbox with-transition dark',
+      this._controlContainer
+    )
+    L.DomUtil.createLink('logo', container, '/')
+    const nameButton = L.DomUtil.createButton(
+      'map-name',
+      container,
+      '',
+      this.edit,
+      this
+    )
+    const shareStatusButton = L.DomUtil.createButton(
+      'share-status',
+      container,
+      '',
+      this.permissions.edit,
+      this.permissions
+    )
+    const update = () => {
+      const status = this.permissions.getShareStatusDisplay()
+      nameButton.textContent = this.getDisplayName()
+      // status is not set until map is saved once
+      if (status) {
+        shareStatusButton.textContent = L._('Visibility: {status}', {
+          status: status,
+        })
       }
+    }
     update()
     this.once('saved', L.bind(update, this))
-    logo.href = '/'
     if (this.options.editMode === 'advanced') {
-      name.href = '#'
-      share_status.href = '#'
-      L.DomEvent.on(name, 'click', this.edit, this)
-      L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions)
+      L.DomEvent.on(nameButton, 'click', this.edit, this)
+      L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
     }
     this.on('postsync', L.bind(update, this))
-    const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
-    save.href = '#'
-    save.title = `${L._('Save current edits')} (Ctrl+S)`
-    save.textContent = L._('Save')
-    const cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel', container)
-    cancel.href = '#'
-    cancel.title = `${L._('Cancel edits')} (Ctrl+Z)`
-    cancel.textContent = L._('Cancel all')
-    const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
-    disable.href = '#'
-    disable.textContent = L._('Disable editing')
-    disable.title = `${disable.textContent} (Ctrl+E)`
-    this.help.link(container, 'edit')
-    if (this.options.user) {
-      const userLabel = L.DomUtil.add(
-        'a',
-        'umap-user',
-        container,
-        L._(`My Dashboard ({username})`, { username: this.options.user.name })
-      )
-      userLabel.href = this.options.user.url
-    }
-
-    L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
-      disable,
-      'click',
+    L.DomUtil.createButton(
+      'leaflet-control-edit-save button',
+      container,
+      `${L._('Save current edits')} (Ctrl+S)`,
+      this.save,
+      this
+    )
+    L.DomUtil.createButton(
+      'leaflet-control-edit-cancel',
+      container,
+      `${L._('Cancel edits')} (Ctrl+Z)`,
+      this.askForReset,
+      this
+    )
+    L.DomUtil.createButton(
+      'leaflet-control-edit-disable',
+      container,
+      `${L._('Disable editing')} (Ctrl+E)`,
       function (e) {
         this.disableEdit(e)
         this.ui.closePanel()
       },
       this
     )
-
-    L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener(
-      save,
-      'click',
-      this.save,
-      this
-    )
-
-    L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener(
-      cancel,
-      'click',
-      this.askForReset,
-      this
-    )
+    this.help.link(container, 'edit')
+    if (this.options.user) {
+      L.DomUtil.createLink(
+        'umap-user',
+        container,
+        L._(`My Dashboard ({username})`, { username: this.options.user.name }),
+        this.options.user.url
+      )
+    }
   },
 
   renderShareBox: function () {
@@ -1020,12 +1012,19 @@ L.U.Map.include({
       }
     }
     toggleCaveat()
-    const download = L.DomUtil.create('a', 'button', container)
-    download.textContent = L._('Download data')
-    L.DomEvent.on(download, 'click', () => {
-      if (typeInput.value === 'umap') this.fullDownload()
-      else this.download(typeInput.value)
-    })
+    L.DomUtil.createButton(
+      'button',
+      container,
+      L._('Download data'),
+      () => {
+        if (typeInput.value === 'umap') {
+          this.fullDownload()
+        } else {
+          this.download(typeInput.value)
+        }
+      },
+      this
+    )
     this.ui.openPanel({ data: { html: container } })
   },
 
@@ -1171,15 +1170,14 @@ L.U.TileLayerControl = L.Control.extend({
 
   onAdd: function () {
     const container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control')
-
-    const link = L.DomUtil.create('a', '', container)
-    link.href = '#'
-    link.title = L._('Change map background')
-
-    L.DomEvent.on(link, 'click', L.DomEvent.stop)
-      .on(link, 'click', this.openSwitcher, this)
-      .on(link, 'dblclick', L.DomEvent.stopPropagation)
-
+    const changeMapBackgroundButton = L.DomUtil.createButton(
+      '',
+      container,
+      L._('Change map background'),
+      this.openSwitcher,
+      this
+    )
+    L.DomEvent.on(changeMapBackgroundButton, 'dblclick', L.DomEvent.stopPropagation)
     return container
   },
 
@@ -1236,7 +1234,12 @@ L.U.AttributionControl = L.Control.Attribution.extend({
     // Use our how container, so we can hide/show on small screens
     const credits = this._container.innerHTML
     this._container.innerHTML = ''
-    const container = L.DomUtil.add('div', 'attribution-container', this._container, credits)
+    const container = L.DomUtil.add(
+      'div',
+      'attribution-container',
+      this._container,
+      credits
+    )
     if (this._map.options.shortCredit) {
       L.DomUtil.add(
         'span',
@@ -1253,8 +1256,7 @@ L.U.AttributionControl = L.Control.Attribution.extend({
     }
     if (window.top === window.self && this._map.options.captionMenus) {
       // We are not in iframe mode
-      const home = L.DomUtil.add('a', '', container, ` — ${L._('Home')}`)
-      home.href = '/'
+      L.DomUtil.createLink('', container, ` — ${L._('Home')}`, '/')
     }
     if (this._map.options.captionMenus) {
       const poweredBy = L.DomUtil.add(
@@ -1277,16 +1279,17 @@ L.U.StarControl = L.Control.extend({
   onAdd: function (map) {
     const status = map.options.starred ? ' starred' : ''
     const container = L.DomUtil.create(
-        'div',
-        `leaflet-control-star umap-control${status}`
-      ),
-      link = L.DomUtil.create('a', '', container)
-    link.href = '#'
-    link.title = L._('Star this map')
-    L.DomEvent.on(link, 'click', L.DomEvent.stop)
-      .on(link, 'click', map.star, map)
-      .on(link, 'dblclick', L.DomEvent.stopPropagation)
-
+      'div',
+      `leaflet-control-star umap-control${status}`
+    )
+    const starMapButton = L.DomUtil.createButton(
+      '',
+      container,
+      L._('Star this map'),
+      map.star,
+      map
+    )
+    L.DomEvent.on(starMapButton, 'dblclick', L.DomEvent.stopPropagation)
     return container
   },
 })
@@ -1346,17 +1349,18 @@ L.U.SearchControl = L.Control.extend({
   },
 
   onAdd: function (map) {
-    const container = L.DomUtil.create('div', 'leaflet-control-search umap-control'),
-      self = this
-
+    const container = L.DomUtil.create('div', 'leaflet-control-search umap-control')
     L.DomEvent.disableClickPropagation(container)
-    const link = L.DomUtil.create('a', '', container)
-    link.href = '#'
-    link.title = L._('Search a place name')
-    L.DomEvent.on(link, 'click', (e) => {
-      L.DomEvent.stop(e)
-      self.openPanel(map)
-    })
+    L.DomUtil.createButton(
+      '',
+      container,
+      L._('Search a place name'),
+      (e) => {
+        L.DomEvent.stop(e)
+        this.openPanel(map)
+      },
+      this
+    )
     return container
   },
 
@@ -1562,7 +1566,7 @@ L.U.Editable = L.Editable.extend({
     return new L.U.Marker(this.map, latlng, this._getDefaultProperties())
   },
 
-  _getDefaultProperties: function() {
+  _getDefaultProperties: function () {
     const result = {}
     if (this.map.options.featuresHaveOwner && this.map.options.hasOwnProperty('user')) {
       result.geojson = { properties: { owner: this.map.options.user.id } }
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index a9398945..41bfd4bd 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -314,14 +314,25 @@ L.DomUtil.createFieldset = (container, legend, options) => {
 }
 
 L.DomUtil.createButton = (className, container, content, callback, context) => {
+  // TODO: actually switch to buttons’ elements.
   const el = L.DomUtil.add('a', className, container, content)
   el.href = '#'
+  // const el = L.DomUtil.add('button', className, container, content)
   if (callback) {
     L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context)
   }
   return el
 }
 
+L.DomUtil.createLink = (className, container, content, url, target) => {
+  const el = L.DomUtil.add('a', className, container, content)
+  el.href = url
+  if (target) {
+    el.target = target
+  }
+  return el
+}
+
 L.DomUtil.classIf = (el, className, bool) => {
   if (bool) L.DomUtil.addClass(el, className)
   else L.DomUtil.removeClass(el, className)
@@ -418,13 +429,17 @@ L.U.Help = L.Class.extend({
       'umap-help-box with-transition dark',
       document.body
     )
-    const closeLink = L.DomUtil.create('a', 'umap-close-link', this.box)
-    closeLink.href = '#'
-    L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    const label = L.DomUtil.create('span', '', closeLink)
+    const closeButton = L.DomUtil.createButton(
+      'umap-close-link',
+      this.box,
+      '',
+      this.hide,
+      this
+    )
+    L.DomUtil.add('i', 'umap-close-icon', closeButton)
+    const label = L.DomUtil.create('span', '', closeButton)
     label.title = label.textContent = L._('Close')
     this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
-    L.DomEvent.on(closeLink, 'click', this.hide, this)
   },
 
   onKeyDown: function (e) {
@@ -457,8 +472,11 @@ L.U.Help = L.Class.extend({
   },
 
   button: function (container, entries, classname) {
-    const helpButton = L.DomUtil.create('a', classname || 'umap-help-button', container)
-    helpButton.href = '#'
+    const helpButton = L.DomUtil.createButton(
+      classname || 'umap-help-button',
+      container,
+      L._('Help')
+    )
     if (entries) {
       L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
         helpButton,
@@ -475,7 +493,7 @@ L.U.Help = L.Class.extend({
 
   link: function (container, entries) {
     const helpButton = this.button(container, entries, 'umap-help-link')
-    helpButton.textContent = L._("Help")
+    helpButton.textContent = L._('Help')
     return helpButton
   },
 
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 5b3b8f7b..471c002c 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -130,12 +130,10 @@ L.U.FeatureMixin = {
   },
 
   getAdvancedEditActions: function (container) {
-    const deleteLink = L.DomUtil.create('a', 'button umap-delete', container)
-    deleteLink.href = '#'
-    deleteLink.textContent = L._('Delete')
-    L.DomEvent.on(
-      deleteLink,
-      'click',
+    const deleteButton = L.DomUtil.createButton(
+      'button umap-delete',
+      container,
+      L._('Delete'),
       function (e) {
         L.DomEvent.stop(e)
         if (this.confirmDelete()) this.map.ui.closePanel()
@@ -1017,10 +1015,13 @@ L.U.Polyline = L.Polyline.extend({
 
   getAdvancedEditActions: function (container) {
     L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
-    const toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container)
-    toPolygon.href = '#'
-    toPolygon.textContent = L._('Transform to polygon')
-    L.DomEvent.on(toPolygon, 'click', this.toPolygon, this)
+    const toPolygon = L.DomUtil.createButton(
+      'button umap-to-polygon',
+      container,
+      L._('Transform to polygon'),
+      this.toPolygon,
+      this
+    )
   },
 
   _mergeShapes: function (from, to) {
@@ -1164,10 +1165,13 @@ L.U.Polygon = L.Polygon.extend({
 
   getAdvancedEditActions: function (container) {
     L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
-    const toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container)
-    toPolyline.href = '#'
-    toPolyline.textContent = L._('Transform to lines')
-    L.DomEvent.on(toPolyline, 'click', this.toPolyline, this)
+    const toPolyline = L.DomUtil.createButton(
+      'button umap-to-polyline',
+      container,
+      L._('Transform to lines'),
+      this.toPolyline,
+      this
+    )
   },
 
   isMulti: function () {
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index c75d01ec..c81417c9 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -557,12 +557,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
         L.DomEvent.on(el, 'click', this.fetchIconList, this)
       }
     }
-    this.button = L.DomUtil.create('a', 'button action-button', this.buttonsContainer)
-    this.button.textContent = this.value() ? L._('Change') : L._('Add')
-    this.button.href = '#'
-    L.DomEvent.on(this.button, 'click', L.DomEvent.stop).on(
-      this.button,
-      'click',
+    this.button = L.DomUtil.createButton(
+      'button action-button',
+      this.buttonsContainer,
+      this.value() ? L._('Change') : L._('Add'),
       this.fetchIconList,
       this
     )
@@ -616,34 +614,30 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     for (const idx in data.pictogram_list) {
       this.addIconPreview(data.pictogram_list[idx])
     }
-    const closeButton = L.DomUtil.create('a', 'button action-button', this.pictogramsContainer)
-    closeButton.textContent = L._('Close')
-    closeButton.href = '#'
-    closeButton.style.display = 'block'
-    closeButton.style.clear = 'both'
-    L.DomEvent.on(closeButton, 'click', L.DomEvent.stop).on(
-      closeButton,
-      'click',
+    const cancelButton = L.DomUtil.createButton(
+      'button action-button',
+      this.pictogramsContainer,
+      L._('Close'),
       function (e) {
         this.pictogramsContainer.innerHTML = ''
         this.udpatePreview()
       },
       this
     )
-    const customButton = L.DomUtil.create('a', '', this.pictogramsContainer)
-    customButton.textContent = L._('Toggle direct input (advanced)')
-    customButton.href = '#'
-    customButton.style.display = 'block'
-    customButton.style.clear = 'both'
-    this.builder.map.help.button(customButton, 'formatIconSymbol')
-    L.DomEvent.on(customButton, 'click', L.DomEvent.stop).on(
-      customButton,
-      'click',
+    cancelButton.style.display = 'block'
+    cancelButton.style.clear = 'both'
+    const customButton = L.DomUtil.createButton(
+      '',
+      this.pictogramsContainer,
+      L._('Toggle direct input (advanced)'),
       function (e) {
         this.input.type = this.input.type === 'text' ? 'hidden' : 'text'
       },
       this
     )
+    customButton.style.display = 'block'
+    customButton.style.clear = 'both'
+    this.builder.map.help.button(customButton, 'formatIconSymbol')
   },
 
   fetchIconList: function (e) {
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index e762db14..b2f0cc6b 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -1532,16 +1532,10 @@ L.U.Map.include({
     })
     limitBounds.appendChild(boundsBuilder.build())
     const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
-    const setCurrentButton = L.DomUtil.add(
-      'a',
+    L.DomUtil.createButton(
       'button',
       boundsButtons,
-      L._('Use current bounds')
-    )
-    setCurrentButton.href = '#'
-    L.DomEvent.on(
-      setCurrentButton,
-      'click',
+      L._('Use current bounds'),
       function () {
         const bounds = this.getBounds()
         this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth())
@@ -1554,11 +1548,10 @@ L.U.Map.include({
       },
       this
     )
-    const emptyBounds = L.DomUtil.add('a', 'button', boundsButtons, L._('Empty'))
-    emptyBounds.href = '#'
-    L.DomEvent.on(
-      emptyBounds,
-      'click',
+    L.DomUtil.createButton(
+      'button',
+      boundsButtons,
+      L._('Empty'),
       function () {
         this.options.limitBounds.south = null
         this.options.limitBounds.west = null
@@ -1650,34 +1643,39 @@ L.U.Map.include({
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
     if (this.permissions.isOwner()) {
-      const del = L.DomUtil.create('a', 'button umap-delete', advancedButtons)
-      del.href = '#'
-      del.title = L._('Delete map')
-      del.textContent = L._('Delete')
-      L.DomEvent.on(del, 'click', L.DomEvent.stop).on(del, 'click', this.del, this)
-      const empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
-      empty.href = '#'
-      empty.textContent = L._('Empty')
-      empty.title = L._('Delete all layers')
-      L.DomEvent.on(empty, 'click', L.DomEvent.stop).on(
-        empty,
-        'click',
+      L.DomUtil.createButton(
+        'button umap-delete',
+        advancedButtons,
+        L._('Delete'),
+        this.del,
+        this
+      )
+      L.DomUtil.createButton(
+        'button umap-empty',
+        advancedButtons,
+        L._('Empty'),
         this.empty,
         this
       )
     }
-    const clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
-    clone.href = '#'
-    clone.textContent = L._('Clone')
-    clone.title = L._('Clone this map')
-    L.DomEvent.on(clone, 'click', L.DomEvent.stop).on(clone, 'click', this.clone, this)
-    const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
-    download.href = '#'
-    download.textContent = L._('Download')
-    download.title = L._('Open download panel')
-    L.DomEvent.on(download, 'click', L.DomEvent.stop).on(
-      download,
-      'click',
+    L.DomUtil.createButton(
+      'button umap-clone',
+      advancedButtons,
+      L._('Clone this map'),
+      this.clone,
+      this
+    )
+    L.DomUtil.createButton(
+      'button umap-empty',
+      advancedButtons,
+      L._('Delete all layers'),
+      this.empty,
+      this
+    )
+    L.DomUtil.createButton(
+      'button umap-download',
+      advancedButtons,
+      L._('Open download panel'),
       this.renderShareBox,
       this
     )
@@ -1739,38 +1737,25 @@ L.U.Map.include({
     L.DomEvent.disableClickPropagation(container)
     this.permissions.addOwnerLink('span', container)
     if (this.options.captionMenus) {
-      const about = L.DomUtil.add(
-        'a',
+      L.DomUtil.createButton(
         'umap-about-link',
         container,
-        ` — ${L._('About')}`
+        ` — ${L._('About')}`,
+        this.displayCaption,
+        this
       )
-      about.href = '#'
-      L.DomEvent.on(about, 'click', this.displayCaption, this)
-      const browser = L.DomUtil.add(
-        'a',
+      L.DomUtil.createButton(
         'umap-open-browser-link',
         container,
-        ` | ${L._('Browse data')}`
-      )
-      browser.href = '#'
-      L.DomEvent.on(browser, 'click', L.DomEvent.stop).on(
-        browser,
-        'click',
+        ` | ${L._('Browse data')}`,
         this.openBrowser,
         this
       )
       if (this.options.facetKey) {
-        const filter = L.DomUtil.add(
-          'a',
+        L.DomUtil.createButton(
           'umap-open-filter-link',
           container,
-          ` | ${L._('Select data')}`
-        )
-        filter.href = '#'
-        L.DomEvent.on(filter, 'click', L.DomEvent.stop).on(
-          filter,
-          'click',
+          ` | ${L._('Select data')}`,
           this.openFacet,
           this
         )
diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js
index 1200f8c2..5a8066d3 100644
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@@ -1272,16 +1272,10 @@ L.U.DataLayer = L.Evented.extend({
 
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
-    const deleteLink = L.DomUtil.create(
-      'a',
+    const deleteLink = L.DomUtil.createButton(
       'button delete_datalayer_button umap-delete',
-      advancedButtons
-    )
-    deleteLink.textContent = L._('Delete')
-    deleteLink.href = '#'
-    L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop).on(
-      deleteLink,
-      'click',
+      advancedButtons,
+      L._('Delete'),
       function () {
         this._delete()
         this.map.ui.closePanel()
@@ -1289,22 +1283,18 @@ L.U.DataLayer = L.Evented.extend({
       this
     )
     if (!this.isRemoteLayer()) {
-      const emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
-      emptyLink.textContent = L._('Empty')
-      emptyLink.href = '#'
-      L.DomEvent.on(emptyLink, 'click', L.DomEvent.stop).on(
-        emptyLink,
-        'click',
+      const emptyLink = L.DomUtil.createButton(
+        'button umap-empty',
+        advancedButtons,
+        L._('Empty'),
         this.empty,
         this
       )
     }
-    const cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
-    cloneLink.textContent = L._('Clone')
-    cloneLink.href = '#'
-    L.DomEvent.on(cloneLink, 'click', L.DomEvent.stop).on(
-      cloneLink,
-      'click',
+    const cloneLink = L.DomUtil.createButton(
+      'button umap-clone',
+      advancedButtons,
+      L._('Clone'),
       function () {
         const datalayer = this.clone()
         datalayer.edit()
@@ -1312,10 +1302,13 @@ L.U.DataLayer = L.Evented.extend({
       this
     )
     if (this.umap_id) {
-      const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
-      download.textContent = L._('Download')
-      download.href = this._dataUrl()
-      download.target = '_blank'
+      const download = L.DomUtil.createLink(
+        'button umap-download',
+        advancedButtons,
+        L._('Download'),
+        this._dataUrl(),
+        '_blank'
+      )
     }
     this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
   },
@@ -1343,16 +1336,14 @@ L.U.DataLayer = L.Evented.extend({
       const date = new Date(parseInt(data.at, 10))
       const content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)`
       const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
-      const a = L.DomUtil.create('a', '', el)
-      L.DomUtil.add('span', '', el, content)
-      a.href = '#'
-      a.title = L._('Restore this version')
-      L.DomEvent.on(a, 'click', L.DomEvent.stop).on(
-        a,
-        'click',
+      const a = L.DomUtil.createButton(
+        '',
+        el,
+        L._('Restore this version'),
         () => this.restore(data.name),
         this
       )
+      L.DomUtil.add('span', '', el, content)
     }
 
     const versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), {
diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js
index 7e277503..1687e142 100644
--- a/umap/static/umap/js/umap.permissions.js
+++ b/umap/static/umap/js/umap.permissions.js
@@ -116,12 +116,10 @@ L.U.MapPermissions = L.Class.extend({
         L._('Advanced actions')
       )
       const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
-      const download = L.DomUtil.create('a', 'button', advancedButtons)
-      download.href = '#'
-      download.textContent = L._('Attach the map to my account')
-      L.DomEvent.on(download, 'click', L.DomEvent.stop).on(
-        download,
-        'click',
+      const download = L.DomUtil.createButton(
+        'button',
+        advancedButtons,
+        L._('Attach the map to my account'),
         this.attach,
         this
       )
@@ -188,15 +186,17 @@ L.U.MapPermissions = L.Class.extend({
   addOwnerLink: function (element, container) {
     if (this.options.owner && this.options.owner.name && this.options.owner.url) {
       const ownerContainer = L.DomUtil.add(
-          element,
-          'umap-map-owner',
-          container,
-          ` ${L._('by')} `
-        ),
-        owner = L.DomUtil.create('a')
-      owner.href = this.options.owner.url
-      owner.textContent = this.options.owner.name
-      ownerContainer.appendChild(owner)
+        element,
+        'umap-map-owner',
+        container,
+        ` ${L._('by')} `
+      )
+      L.DomUtil.createLink(
+        '',
+        ownerContainer,
+        this.options.owner.name,
+        this.options.owner.url
+      )
     }
   },
 
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 9fd96b3c..9487890c 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -107,7 +107,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
       properties
     )
     content = L.Util.greedyTemplate(template, properties)
-    content = L.Util.toHTML(content, {target: target})
+    content = L.Util.toHTML(content, { target: target })
     container.innerHTML = content
     return container
   },
diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js
index 28bb6403..abe99542 100644
--- a/umap/static/umap/js/umap.ui.js
+++ b/umap/static/umap/js/umap.ui.js
@@ -93,17 +93,16 @@ L.U.UI = L.Evented.extend({
       if (timeoutID) window.clearTimeout(timeoutID)
       this.popAlert()
     }
-    const closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert)
-    closeLink.href = '#'
-    L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    const label = L.DomUtil.create('span', '', closeLink)
-    label.title = label.textContent = L._('Close')
-    L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(
-      closeLink,
-      'click',
+    const closeButton = L.DomUtil.createButton(
+      'umap-close-link',
+      this._alert,
+      '',
       close,
       this
     )
+    L.DomUtil.add('i', 'umap-close-icon', closeButton)
+    const label = L.DomUtil.create('span', '', closeButton)
+    label.title = label.textContent = L._('Close')
     L.DomUtil.add('div', '', this._alert, e.content)
     if (e.actions) {
       let action, el, input
@@ -116,18 +115,13 @@ L.U.UI = L.Evented.extend({
             this._alert
           )
         }
-        el = L.DomUtil.element('a', { className: 'umap-action' }, this._alert)
-        el.href = '#'
-        el.textContent = action.label
-        L.DomEvent.on(el, 'click', L.DomEvent.stop)
-        if (action.callback) {
-          L.DomEvent.on(
-            el,
-            'click',
-            action.callback,
-            action.callbackContext || this.map
-          )
-        }
+        el = L.DomUtil.createButton(
+          { className: 'umap-action' },
+          this._alert,
+          action.label,
+          action.callback,
+          action.callbackContext || this.map
+        )
         L.DomEvent.on(el, 'click', close, this)
       }
     }