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>
This commit is contained in:
Falke Design
2021-11-25 18:50:18 +01:00
committed by GitHub
parent c6c82f07c5
commit 1180e7e8c2
2 changed files with 5 additions and 4 deletions

5
dist/leaflet.css vendored
View File

@ -526,13 +526,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
width: 18px; width: 18px;
height: 14px; height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif; font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3; color: #757575;
text-decoration: none; text-decoration: none;
font-weight: bold;
background: transparent; background: transparent;
} }
.leaflet-container a.leaflet-popup-close-button:hover { .leaflet-container a.leaflet-popup-close-button:hover {
color: #999; color: #585858;
} }
.leaflet-popup-scrolled { .leaflet-popup-scrolled {
overflow: auto; overflow: auto;

View File

@ -190,8 +190,10 @@ export var Popup = DivOverlay.extend({
if (this.options.closeButton) { if (this.options.closeButton) {
var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container); 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.href = '#close';
closeButton.innerHTML = '&#215;'; closeButton.innerHTML = '<span aria-hidden="true">&#215;</span>';
DomEvent.on(closeButton, 'click', this._close, this); DomEvent.on(closeButton, 'click', this._close, this);
} }