chore: use our contexmenu class for inplace toolbar

And remove Leaflet.Toolbar dependency.
This also teach ContextMenu how to display icons instead of
text and how to render in horizontal orientation instead of
vertical.

scripts/vendorsjs.sh

@@ -16,7 +16,6 @@ mkdir -p umap/static/umap/vendors/markercluster/ && cp -r node_modules/leaflet.m
 mkdir -p umap/static/umap/vendors/markercluster/ && cp -r node_modules/leaflet.markercluster/dist/MarkerCluster.* umap/static/umap/vendors/markercluster/
 mkdir -p umap/static/umap/vendors/heat/ && cp -r node_modules/leaflet.heat/dist/leaflet-heat.js umap/static/umap/vendors/heat/
 mkdir -p umap/static/umap/vendors/fullscreen/ && cp -r node_modules/leaflet-fullscreen/dist/** umap/static/umap/vendors/fullscreen/
-mkdir -p umap/static/umap/vendors/toolbar/ && cp -r node_modules/leaflet-toolbar/dist/leaflet.toolbar.* umap/static/umap/vendors/toolbar/
 mkdir -p umap/static/umap/vendors/measurable/ && cp -r node_modules/leaflet-measurable/Leaflet.Measurable.* umap/static/umap/vendors/measurable/
 mkdir -p umap/static/umap/vendors/photon/ && cp -r node_modules/leaflet.photon/leaflet.photon.js umap/static/umap/vendors/photon/
 mkdir -p umap/static/umap/vendors/csv2geojson/ && cp -r node_modules/csv2geojson/csv2geojson.js umap/static/umap/vendors/csv2geojson/

umap/static/umap/css/contextmenu.css

@@ -1,12 +1,20 @@
 .umap-contextmenu {
     background-color: var(--background-color);
-    padding: calc(var(--box-padding) / 2) var(--box-padding);
+    padding: calc(var(--box-padding) / 2) calc(var(--box-padding) / 2);
     position: fixed;
     z-index: var(--zindex-contextmenu);
     border-radius: var(--border-radius);
     box-shadow: var(--block-shadow);
+    display: flex;
+    flex-direction: column;
 }
-.umap-contextmenu li + li {
+.umap-contextmenu-rows {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+}
+.umap-contextmenu:not(.umap-contextmenu-rows) li + li {
     margin-top: var(--text-margin);
 }
 

umap/static/umap/css/icon.css

@@ -68,12 +68,21 @@ html[dir="rtl"] .icon {
 .icon-close {
     background-position: var(--tile) 0px;
 }
+.icon-continue-line {
+    background-position: calc(var(--tile) * 4) 0;
+}
 .icon-copy {
     background-position: calc(var(--tile) * 2) calc(var(--tile) * 4);
 }
 .icon-delete {
     background-position: calc(var(--tile) * 5) calc(var(--tile) * 2);
 }
+.icon-delete-shape {
+    background-position: calc(var(--tile) * 4) calc(var(--tile) * 3);
+}
+.icon-delete-vertex {
+    background-position: calc(var(--tile) * 5) calc(var(--tile) * 4);
+}
 .readonly .icon-delete,
 .off .icon-delete {
     background-position: calc(var(--tile) * 5) calc(var(--tile) * 5);
@@ -98,6 +107,9 @@ html[dir="rtl"] .icon {
 .off .icon-edit {
     background-position: calc(var(--tile) * 2) calc(var(--tile) * 3);
 }
+.icon-extract-shape {
+    background-position: calc(var(--tile) * 5) 0;
+}
 .icon-filters {
     background-position: 0px var(--tile);
 }
@@ -107,6 +119,9 @@ html[dir="rtl"] .icon {
 .icon-help {
     background-position: 0 0;
 }
+.icon-hole {
+    background-position: calc(var(--tile) * 3) calc(var(--tile) * 4);
+}
 .icon-key {
     background-position: calc(var(--tile) * 6) calc(var(--tile) * 5);
 }
@@ -165,6 +180,9 @@ html[dir="rtl"] .icon {
 .icon-share {
     background-position: 0px calc(var(--tile) * 5);
 }
+.icon-split-line {
+    background-position: calc(var(--tile) * 5) var(--tile);
+}
 .icon-star {
     background-position: var(--tile) calc(var(--tile) * 7);
 }

umap/static/umap/js/modules/data/features.js

@@ -270,6 +270,10 @@ class Feature {
     if (!this.ui.isOnScreen(this._umap._leafletMap.getBounds())) this.zoomTo(event)
   }
 
+  toggleEditing() {
+    this.edit()
+  }
+
   getAdvancedEditActions(container) {
     const button = Utils.loadTemplate(`
       <button class="button" type="button">
@@ -508,8 +512,19 @@ class Feature {
     })
   }
 
-  getInplaceToolbarActions() {
-    return [U.ToggleEditAction, U.DeleteFeatureAction]
+  getInplaceEditMenu() {
+    return [
+      {
+        action: () => this.toggleEditing(),
+        title: translate('Toggle edit mode (⇧+Click)'),
+        icon: 'icon-edit',
+      },
+      {
+        action: () => this.confirmDelete(),
+        title: translate('Delete this feature'),
+        icon: 'icon-delete',
+      },
+    ]
   }
 
   isFiltered() {
@@ -785,7 +800,7 @@ class Path extends Feature {
     }
   }
 
-  _toggleEditing(event) {
+  toggleEditing(event) {
     if (this._umap.editEnabled) {
       if (this.ui.editEnabled()) {
         this.endEdit()
@@ -795,7 +810,7 @@ class Path extends Feature {
       }
     }
     // FIXME: disable when disabling global edit
-    L.DomEvent.stop(event)
+    // L.DomEvent.stop(event)
   }
 
   getShapeOptions() {
@@ -846,15 +861,33 @@ class Path extends Feature {
     return other
   }
 
-  getInplaceToolbarActions(event) {
-    const items = super.getInplaceToolbarActions(event)
+  getInplaceEditMenu(event) {
+    const items = super.getInplaceEditMenu()
     if (this.isMulti()) {
-      items.push(U.DeleteShapeAction)
-      items.push(U.ExtractShapeFromMultiAction)
+      items.push({
+        action: () => this.ui.enableEdit().deleteShapeAt(event.latlng),
+        title: translate('Delete this shape'),
+        icon: 'icon-delete-shape',
+      })
+      items.push({
+        action: () => this.ui.isolateShape(event.latlng),
+        title: translate('Extract shape to separate feature'),
+        icon: 'icon-extract-shape',
+      })
     }
     return items
   }
 
+  getInplaceEditVertexMenu(event) {
+    return [
+      {
+        action: () => event.vertex.delete(),
+        title: translate('Delete this vertex (Alt+Click)'),
+        icon: 'icon-delete-vertex',
+      },
+    ]
+  }
+
   zoomTo({ easing, callback }) {
     // Use bounds instead of centroid for paths.
     easing = easing || this._umap.getProperty('easing')
@@ -1077,6 +1110,25 @@ export class LineString extends Path {
     const [gain, loss] = this.ui.getElevation()
     return Object.assign({ gain, loss }, super.extendedProperties())
   }
+
+  getInplaceEditVertexMenu(event) {
+    const items = super.getInplaceEditVertexMenu(event)
+    const index = event.vertex.getIndex()
+    if (index === 0 || index === event.vertex.getLastIndex()) {
+      items.push({
+        action: () => event.vertex.continue(),
+        title: translate('Continue line'),
+        icon: 'icon-continue-line',
+      })
+    } else {
+      items.push({
+        action: () => event.vertex.split(),
+        title: translate('Split line'),
+        icon: 'icon-split-line',
+      })
+    }
+    return items
+  }
 }
 
 export class Polygon extends Path {
@@ -1182,9 +1234,13 @@ export class Polygon extends Path {
     )
   }
 
-  getInplaceToolbarActions(event) {
-    const items = super.getInplaceToolbarActions(event)
-    items.push(U.CreateHoleAction)
+  getInplaceEditMenu(event) {
+    const items = super.getInplaceEditMenu()
+    items.push({
+      action: () => this.ui.startHole(event),
+      title: translate('Start a hole here'),
+      icon: 'icon-hole',
+    })
     return items
   }
 

umap/static/umap/js/modules/rendering/map.js

@@ -250,7 +250,6 @@ export const LeafletMap = BaseMap.extend({
       DomEvent.on(document.body, 'dataload', (event) =>
         this.fire('dataload', event.detail)
       )
-      this.on('click', this.closeInplaceToolbar)
     }
 
     this.on('baselayerchange', (e) => {
@@ -284,11 +283,6 @@ export const LeafletMap = BaseMap.extend({
     this.handleLimitBounds()
   },
 
-  closeInplaceToolbar: function () {
-    const toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
-    if (toolbar) toolbar.remove()
-  },
-
   latLng: (a, b, c) => {
     // manage geojson case and call original method
     if (!(a instanceof L.LatLng) && a.coordinates) {

umap/static/umap/js/modules/rendering/ui.js

@@ -64,11 +64,10 @@ const FeatureMixin = {
           else this.feature.edit(event)
         }
       } else if (!this._map.editTools?.drawing()) {
-        new L.Toolbar.Popup(event.latlng, {
-          className: 'leaflet-inplace-toolbar',
-          anchor: this.getPopupToolbarAnchor(),
-          actions: this.feature.getInplaceToolbarActions(event),
-        }).addTo(this._map, this.feature, event.latlng)
+        this._map._umap.editContextmenu.open(
+          event.originalEvent,
+          this.feature.getInplaceEditMenu(event)
+        )
       }
     }
     DomEvent.stop(event)
@@ -105,8 +104,6 @@ const FeatureMixin = {
     this.feature.pullGeometry(false)
     this.feature.onCommit()
   },
-
-  getPopupToolbarAnchor: () => [0, 0],
 }
 
 const PointMixin = {
@@ -248,10 +245,6 @@ export const LeafletMarker = Marker.extend({
     this._redraw()
     this._resetZIndex()
   },
-
-  getPopupToolbarAnchor: function () {
-    return this.options.icon.options.popupAnchor
-  },
 })
 
 const PathMixin = {
@@ -341,13 +334,11 @@ const PathMixin = {
     this.resetTooltip()
   },
 
-  getVertexActions: () => [U.DeleteVertexAction],
-
   onVertexRawClick: function (event) {
-    new L.Toolbar.Popup(event.latlng, {
-      className: 'leaflet-inplace-toolbar',
-      actions: this.getVertexActions(event),
-    }).addTo(this._map, this, event.latlng, event.vertex)
+    this._map._umap.editContextmenu.open(
+      event.originalEvent,
+      this.feature.getInplaceEditVertexMenu(event)
+    )
   },
 
   isolateShape: function (atLatLng) {
@@ -383,17 +374,6 @@ export const LeafletPolyline = Polyline.extend({
 
   getClass: () => LeafletPolyline,
 
-  getVertexActions: function (event) {
-    const actions = PathMixin.getVertexActions.call(this, event)
-    const index = event.vertex.getIndex()
-    if (index === 0 || index === event.vertex.getLastIndex()) {
-      actions.push(U.ContinueLineAction)
-    } else {
-      actions.push(U.SplitLineAction)
-    }
-    return actions
-  },
-
   getMeasure: function (shape) {
     let shapes
     if (shape) {

umap/static/umap/js/modules/ui/contextmenu.js

@@ -10,6 +10,9 @@ export default class ContextMenu extends Positioned {
     if (options.className) {
       this.container.classList.add(options.className)
     }
+    if (options.orientation === 'rows') {
+      this.container.classList.add('umap-contextmenu-rows')
+    }
     this.container.addEventListener('focusout', (event) => {
       if (!this.container.contains(event.relatedTarget)) this.close()
     })
@@ -37,10 +40,14 @@ export default class ContextMenu extends Positioned {
         )
         this.container.appendChild(li)
       } else {
+        let content = item.label || ''
+        if (item.icon) {
+          content = `<i class="icon icon-16 ${item.icon}"></i>${content}`
+        }
         const li = loadTemplate(
-          `<li class="${item.className || ''}"><button tabindex="0" class="flat">${item.label}</button></li>`
+          `<li class="${item.className || ''}"><button tabindex="0" class="flat" title="${item.title || ''}">${content}</button></li>`
         )
-        li.addEventListener('click', () => {
+        li.firstChild.addEventListener('click', () => {
           this.close()
           item.action()
         })

umap/static/umap/js/modules/umap.js

@@ -120,6 +120,7 @@ export default class Umap extends ServerStored {
     )
     this.tooltip = new Tooltip(this._leafletMap._controlContainer)
     this.contextmenu = new ContextMenu()
+    this.editContextmenu = new ContextMenu({ className: 'dark', orientation: 'rows' })
     this.server = new ServerRequest()
     this.request = new Request()
     this.facets = new Facets(this)
@@ -1299,7 +1300,6 @@ export default class Umap extends ServerStored {
     this.editPanel.close()
     this.fullPanel.close()
     this.sync.stop()
-    this._leafletMap.closeInplaceToolbar()
   }
 
   fire(name) {

umap/static/umap/js/umap.controls.js

@@ -1,186 +1,3 @@
-U.BaseFeatureAction = L.ToolbarAction.extend({
-  initialize: function (map, feature, latlng) {
-    this.map = map
-    this.feature = feature
-    this.latlng = latlng
-    L.ToolbarAction.prototype.initialize.call(this)
-    this.postInit()
-  },
-
-  postInit: () => {},
-
-  hideToolbar: function () {
-    this.map.removeLayer(this.toolbar)
-  },
-
-  addHooks: function () {
-    this.onClick({ latlng: this.latlng })
-    this.hideToolbar()
-  },
-})
-
-U.CreateHoleAction = U.BaseFeatureAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-new-hole',
-      tooltip: L._('Start a hole here'),
-    },
-  },
-
-  onClick: function (event) {
-    this.feature.ui.startHole(event)
-  },
-})
-
-U.ToggleEditAction = U.BaseFeatureAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-toggle-edit',
-      tooltip: L._('Toggle edit mode (⇧+Click)'),
-    },
-  },
-
-  onClick: function (event) {
-    if (this.feature._toggleEditing) {
-      this.feature._toggleEditing(event) // Path
-    } else {
-      this.feature.edit(event) // Marker
-    }
-  },
-})
-
-U.DeleteFeatureAction = U.BaseFeatureAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-delete-all',
-      tooltip: L._('Delete this feature'),
-    },
-  },
-
-  postInit: function () {
-    if (!this.feature.isMulti())
-      this.options.toolbarIcon.className = 'umap-delete-one-of-one'
-  },
-
-  onClick: function (e) {
-    this.feature.confirmDelete(e)
-  },
-})
-
-U.DeleteShapeAction = U.BaseFeatureAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-delete-one-of-multi',
-      tooltip: L._('Delete this shape'),
-    },
-  },
-
-  onClick: function (e) {
-    this.feature.ui.enableEdit().deleteShapeAt(e.latlng)
-  },
-})
-
-U.ExtractShapeFromMultiAction = U.BaseFeatureAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-extract-shape-from-multi',
-      tooltip: L._('Extract shape to separate feature'),
-    },
-  },
-
-  onClick: function (e) {
-    this.feature.ui.isolateShape(e.latlng)
-  },
-})
-
-U.BaseVertexAction = U.BaseFeatureAction.extend({
-  initialize: function (map, feature, latlng, vertex) {
-    this.vertex = vertex
-    U.BaseFeatureAction.prototype.initialize.call(this, map, feature, latlng)
-  },
-})
-
-U.DeleteVertexAction = U.BaseVertexAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-delete-vertex',
-      tooltip: L._('Delete this vertex (Alt+Click)'),
-    },
-  },
-
-  onClick: function () {
-    this.vertex.delete()
-  },
-})
-
-U.SplitLineAction = U.BaseVertexAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-split-line',
-      tooltip: L._('Split line'),
-    },
-  },
-
-  onClick: function () {
-    this.vertex.split()
-  },
-})
-
-U.ContinueLineAction = U.BaseVertexAction.extend({
-  options: {
-    toolbarIcon: {
-      className: 'umap-continue-line',
-      tooltip: L._('Continue line'),
-    },
-  },
-
-  onClick: function () {
-    this.vertex.continue()
-  },
-})
-
-// Leaflet.Toolbar doesn't allow twice same toolbar class…
-U.SettingsToolbar = L.Toolbar.Control.extend({})
-U.DrawToolbar = L.Toolbar.Control.extend({
-  initialize: function (options) {
-    L.Toolbar.Control.prototype.initialize.call(this, options)
-    this.map = this.options.map
-    this.map.on('seteditedfeature', this.redraw, this)
-  },
-
-  appendToContainer: function (container) {
-    this.options.actions = []
-    if (this.map._umap.properties.enableMarkerDraw) {
-      this.options.actions.push(U.DrawMarkerAction)
-    }
-    if (this.map._umap.properties.enablePolylineDraw) {
-      this.options.actions.push(U.DrawPolylineAction)
-      if (
-        this.map._umap.editedFeature &&
-        this.map._umap.editedFeature instanceof U.LineString
-      ) {
-        this.options.actions.push(U.AddPolylineShapeAction)
-      }
-    }
-    if (this.map._umap.properties.enablePolygonDraw) {
-      this.options.actions.push(U.DrawPolygonAction)
-      if (
-        this.map._umap.editedFeature &&
-        this.map._umap.editedFeature instanceof U.Polygon
-      ) {
-        this.options.actions.push(U.AddPolygonShapeAction)
-      }
-    }
-    L.Toolbar.Control.prototype.appendToContainer.call(this, container)
-  },
-
-  redraw: function () {
-    const container = this._control.getContainer()
-    container.innerHTML = ''
-    this.appendToContainer(container)
-  },
-})
-
 U.EditControl = L.Control.extend({
   options: {
     position: 'topright',

umap/static/umap/map.css

@@ -475,9 +475,6 @@ ul.photon-autocomplete {
 .layer-edit {
     background-position: -50px -49px;
 }
-.umap-toggle-edit {
-    background-position: -44px -48px;
-}
 .readonly .layer-edit,
 .off .layer-edit {
     background-position: -50px -73px;
@@ -486,28 +483,6 @@ ul.photon-autocomplete {
 .off .layer-delete {
     background-position: -122px -121px;
 }
-.umap-new-hole {
-    background-position: -71px -94px;
-}
-.umap-delete-one-of-multi {
-    background-position: -97px -70px;
-}
-.umap-delete-all,
-.umap-delete-one-of-one {
-    background-position: -119px -48px;
-}
-.umap-delete-vertex {
-    background-position: -119px -94px;
-}
-.umap-continue-line {
-    background-position: -96px 1px;
-}
-.umap-split-line {
-    background-position: -119px -22px;
-}
-.umap-extract-shape-from-multi{
-    background-position: -119px 2px;
-}
 .umap-browser .feature-title {
     width: inherit;
     cursor: inherit;

umap/static/umap/vendors/toolbar/leaflet.toolbar.css

@@ -1 +0,0 @@
-.leaflet-toolbar-0{list-style:none;padding-left:0;box-shadow:0 1px 5px rgba(0,0,0,.65)}.leaflet-toolbar-0>li{position:relative}.leaflet-toolbar-0>li>.leaflet-toolbar-icon{display:block;width:26px;height:26px;line-height:26px;margin-right:0;padding-right:0;border-right:0;text-align:center;text-decoration:none;background-color:#fff}.leaflet-toolbar-0>li>.leaflet-toolbar-icon:hover{background-color:#f4f4f4}.leaflet-toolbar-0 .leaflet-toolbar-1{display:none;list-style:none}.leaflet-toolbar-tip-container{margin:0 auto;height:12px;position:relative;overflow:hidden}.leaflet-toolbar-tip{width:12px;height:12px;margin:-6px auto 0;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.65);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-control-toolbar>li>.leaflet-toolbar-icon{border-bottom:1px solid #ccc}.leaflet-control-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-control-toolbar>li:last-child>.leaflet-toolbar-icon{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom-width:0}.leaflet-control-toolbar .leaflet-toolbar-1{margin:0;padding:0;position:absolute;left:26px;top:0;white-space:nowrap;height:26px}.leaflet-control-toolbar .leaflet-toolbar-1>li{display:inline-block}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{display:block;background-color:#919187;border-left:1px solid #aaa;color:#fff;font:11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;line-height:26px;text-decoration:none;padding-left:10px;padding-right:10px;height:26px}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon:hover{background-color:#a0a098}.leaflet-popup-toolbar{position:relative}.leaflet-popup-toolbar>li{float:left}.leaflet-popup-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-bottom-left-radius:4px}.leaflet-popup-toolbar>li:last-child>.leaflet-toolbar-icon{border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-width:0}.leaflet-popup-toolbar .leaflet-toolbar-1{position:absolute;top:26px;left:0;padding-left:0}.leaflet-popup-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{position:relative;float:left;width:26px;height:26px}

umap/templates/umap/css.html

@@ -12,8 +12,6 @@
       href="{% static 'umap/vendors/editinosm/Leaflet.EditInOSM.css' %}" />
 <link rel="stylesheet"
       href="{% static 'umap/vendors/minimap/Control.MiniMap.min.css' %}" />
-<link rel="stylesheet"
-      href="{% static 'umap/vendors/toolbar/leaflet.toolbar.css' %}" />
 <link rel="stylesheet"
       href="{% static 'umap/vendors/measurable/Leaflet.Measurable.css' %}" />
 <link rel="stylesheet"

umap/templates/umap/js.html

@@ -29,7 +29,6 @@
 <script src="{% static 'umap/vendors/photon/leaflet.photon.js' %}" defer></script>
 <script src="{% static 'umap/vendors/fullscreen/Leaflet.fullscreen.min.js' %}"
         defer></script>
-<script src="{% static 'umap/vendors/toolbar/leaflet.toolbar.js' %}" defer></script>
 <script src="{% static 'umap/vendors/measurable/Leaflet.Measurable.js' %}"
         defer></script>
 <script src="{% static 'umap/vendors/iconlayers/iconLayers.js' %}" defer></script>

umap/tests/integration/test_draw_polygon.py

@@ -180,7 +180,7 @@ def test_can_draw_hole(page, live_server, tilelayer):
 
     # First vertex of the hole will be created here
     map.click(position={"x": 180, "y": 120})
-    page.get_by_role("link", name="Start a hole here").click()
+    page.get_by_role("button", name="Start a hole here").click()
     map.click(position={"x": 180, "y": 180})
     map.click(position={"x": 120, "y": 180})
     map.click(position={"x": 120, "y": 120})
@@ -475,7 +475,7 @@ def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings):
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
     page.locator("path").click()
-    page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    page.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
     expect(page.locator(".umap-tooltip-container")).to_contain_text(
         "Please zoom in to edit the geometry"
     )

umap/tests/integration/test_draw_polyline.py

@@ -329,11 +329,11 @@ def test_can_delete_shape_using_toolbar(live_server, page, tilelayer, settings):
 
     # Now split the line
     map.click(position={"x": 100, "y": 100})
-    page.get_by_role("link", name="Split line").click()
+    page.get_by_role("button", name="Split line").click()
 
     # Delete part of it
     map.click(position={"x": 125, "y": 100})
-    page.get_by_role("link", name="Delete this shape").click()
+    page.get_by_role("button", name="Delete this shape").click()
     data = save_and_get_json(page)
     assert len(data["features"]) == 1
     assert data["features"][0]["geometry"]["type"] == "LineString"

umap/tests/integration/test_edit_marker.py

@@ -78,8 +78,8 @@ def test_marker_style_should_have_precedence(live_server, openmap, page, bootstr
 def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap):
     page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
     page.locator(".leaflet-marker-icon").click()
-    expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible()
-    expect(page.get_by_role("link", name="Delete this feature")).to_be_visible()
+    expect(page.get_by_role("button", name="Toggle edit mode")).to_be_visible()
+    expect(page.get_by_role("button", name="Delete this feature")).to_be_visible()
 
 
 def test_should_update_open_popup_on_edit(live_server, openmap, page, bootstrap):
@@ -115,6 +115,6 @@ def test_should_follow_datalayer_style_when_changing_datalayer(
     expect(marker).to_have_css("background-color", "rgb(0, 139, 139)")
     # Change datalayer
     marker.click()
-    page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    page.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
     page.locator(".umap-field-datalayer select").select_option(label="other datalayer")
     expect(marker).to_have_css("background-color", "rgb(148, 0, 211)")

umap/tests/integration/test_edit_polygon.py

@@ -88,8 +88,8 @@ def test_marker_style_should_have_precedence(live_server, openmap, page, bootstr
 def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap):
     page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
     page.locator("path").click()
-    expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible()
-    expect(page.get_by_role("link", name="Delete this feature")).to_be_visible()
+    expect(page.get_by_role("button", name="Toggle edit mode")).to_be_visible()
+    expect(page.get_by_role("button", name="Delete this feature")).to_be_visible()
 
 
 def test_can_remove_stroke(live_server, openmap, page, bootstrap):
@@ -98,7 +98,7 @@ def test_can_remove_stroke(live_server, openmap, page, bootstrap):
         1
     )
     page.locator("path").click()
-    page.get_by_role("link", name="Toggle edit mode").click()
+    page.get_by_role("button", name="Toggle edit mode").click()
     page.get_by_text("Shape properties").click()
     page.locator(".umap-field-stroke .define").first.click()
     page.locator(".umap-field-stroke .show-on-defined label").first.click()

umap/tests/integration/test_websocket_sync.py

@@ -59,7 +59,7 @@ def test_websocket_connection_can_sync_markers(new_page, asgi_live_server, tilel
     peerA.wait_for_timeout(300)
 
     peerB.locator(".leaflet-marker-icon").first.click()
-    peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
     expect(peerB.locator('input[name="name"]')).to_have_value("Synced name")
 
     a_first_marker = peerA.locator("div:nth-child(4) > div:nth-child(2)").first
@@ -139,7 +139,7 @@ def test_websocket_connection_can_sync_polygons(context, asgi_live_server, tilel
     assert b_polygon_bbox_t1 == a_polygon_bbox_t1
 
     b_polygon.click()
-    peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
 
     edited_vertex = peerB.locator("div:nth-child(6)").first
     edited_vertex.drag_to(b_map_el, target_position={"x": 233, "y": 126})
@@ -153,7 +153,7 @@ def test_websocket_connection_can_sync_polygons(context, asgi_live_server, tilel
 
     # Move the polygon on peer B and check it moved also on peer A
     b_polygon.click()
-    peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
 
     b_polygon.drag_to(b_map_el, target_position={"x": 400, "y": 400})
     peerB.keyboard.press("Escape")
@@ -343,7 +343,7 @@ def test_websocket_connection_can_sync_late_joining_peer(
 
     # Verify marker properties
     peerB.locator(".leaflet-marker-icon").first.click()
-    peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click()
+    peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click()
     expect(peerB.locator('input[name="name"]')).to_have_value("First marker")
 
     # Verify polygon exists (we've already checked the count)