From 1180e7e8c2b55dca8141ddb405ad85d8994a9d34 Mon Sep 17 00:00:00 2001
From: Falke Design <design.falke@gmail.com>
Date: Thu, 25 Nov 2021 18:50:18 +0100
Subject: [PATCH] Accessibility popup close button (#7794)

* Change color of close button #7539

* Add role=button and aria-label #7399

* Add aria-hidden to `times` / `x` #7472

* remove bold on close button

Co-authored-by: Vladimir Agafonkin <agafonkin@gmail.com>
---
 dist/leaflet.css   | 5 ++---
 src/layer/Popup.js | 4 +++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/dist/leaflet.css b/dist/leaflet.css
index 06945ec4c..5630816cf 100644
--- a/dist/leaflet.css
+++ b/dist/leaflet.css
@@ -526,13 +526,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	width: 18px;
 	height: 14px;
 	font: 16px/14px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
+	color: #757575;
 	text-decoration: none;
-	font-weight: bold;
 	background: transparent;
 	}
 .leaflet-container a.leaflet-popup-close-button:hover {
-	color: #999;
+	color: #585858;
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
diff --git a/src/layer/Popup.js b/src/layer/Popup.js
index e7a1cce9f..aa8d9057d 100644
--- a/src/layer/Popup.js
+++ b/src/layer/Popup.js
@@ -190,8 +190,10 @@ export var Popup = DivOverlay.extend({
 
 		if (this.options.closeButton) {
 			var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container);
+			closeButton.setAttribute('role', 'button'); // overrides the implicit role=link of <a> elements #7399
+			closeButton.setAttribute('aria-label', 'Close popup');
 			closeButton.href = '#close';
-			closeButton.innerHTML = '&#215;';
+			closeButton.innerHTML = '<span aria-hidden="true">&#215;</span>';
 
 			DomEvent.on(closeButton, 'click', this._close, this);
 		}