diff --git a/loleaflet/css/jquery-ui-lightness.css b/loleaflet/css/jquery-ui-lightness.css index 7cd43e869..b5732cfce 100644 --- a/loleaflet/css/jquery-ui-lightness.css +++ b/loleaflet/css/jquery-ui-lightness.css @@ -875,7 +875,8 @@ button.ui-button::-moz-focus-inner { } /* Component containers ----------------------------------*/ -.ui-widget { +.ui-widget, +[data-title]:after { font-family: var(--jquery-ui-font); font-size: 1.1em; } @@ -912,17 +913,20 @@ button.ui-button::-moz-focus-inner { /*Tooltips ----------------------------------*/ -.ui-tooltip { +.ui-tooltip, +[data-title]:after { padding: 7px 9px; position: absolute; z-index: 9999; max-width: 300px; background: #2a2a2a; } -body .ui-tooltip { +body .ui-tooltip, +[data-title]:after { border-width: 2px; } -.ui-tooltip-content { +.ui-tooltip-content, +[data-title]:after { font-size: 0.8em; color: #fff; background: #2a2a2a; @@ -1285,24 +1289,28 @@ a.ui-button:active, ----------------------------------*/ /* Corner radius */ +[data-title]:after, .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } +[data-title]:after, .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } +[data-title]:after, .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } +[data-title]:after, .ui-corner-all, .ui-corner-bottom, .ui-corner-right, @@ -1316,7 +1324,8 @@ a.ui-button:active, opacity: .5; filter: Alpha(Opacity=50); /* support: IE8 */ } -.ui-widget-shadow { +.ui-widget-shadow, +[data-title]:after { -webkit-box-shadow: 0px 0px 4px 2px rgb(217, 217, 217); box-shadow: 0px 0px 4px 2px rgb(217, 217, 217); } diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css index d32fda7bd..7a924762a 100644 --- a/loleaflet/css/loleaflet.css +++ b/loleaflet/css/loleaflet.css @@ -494,6 +494,26 @@ body { padding: 0; vertical-align: top; } +/*Tooltips +----------------------------------*/ +[data-title]:hover:after { + opacity: 1; + transition: all 0.1s ease 0.5s; + visibility: visible; +} +[data-title]:after { + content: attr(data-title); + font-size: 1em !important; + bottom: -1.6em; + left: 100%; + white-space: nowrap; + opacity: 0; + border-color: #2a2a2a; + visibility: hidden; +} +[data-title] { + position: relative; +} .loleaflet-annotation-caption { font-weight: bold; diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js index 017281b74..938fc4901 100644 --- a/loleaflet/src/layer/marker/Annotation.js +++ b/loleaflet/src/layer/marker/Annotation.js @@ -241,13 +241,17 @@ L.Annotation = L.Layer.extend({ var acceptButton = this._acceptButton = L.DomUtil.create('button', 'loleaflet-redline-accept-button', tdAccept); var tdReject = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr); var rejectButton = this._rejectButton = L.DomUtil.create('button', 'loleaflet-redline-reject-button', tdReject); + var acceptButtonTooltipText = _('Accept change'); + var rejectButtonTooltipText = _('Reject change'); - acceptButton.title = _('Accept change'); + acceptButton.dataset.title = acceptButtonTooltipText; + acceptButton.setAttribute('aria-label', acceptButtonTooltipText); L.DomEvent.on(acceptButton, click, function() { this._map.fire('RedlineAccept', {id: this._data.id}); }, this); - rejectButton.title = _('Reject change'); + rejectButton.dataset.title = rejectButtonTooltipText; + rejectButton.setAttribute('aria-label', rejectButtonTooltipText); L.DomEvent.on(rejectButton, click, function() { this._map.fire('RedlineReject', {id: this._data.id}); }, this); @@ -256,7 +260,9 @@ L.Annotation = L.Layer.extend({ if (this.options.noMenu !== true && this._map.isPermissionEditForComments()) { var tdMenu = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr); var divMenu = this._menu = L.DomUtil.create(tagDiv, this._data.trackchange ? 'loleaflet-annotation-menu-redline' : 'loleaflet-annotation-menu', tdMenu); - divMenu.title = _('Open menu'); + var divMenuTooltipText = _('Open menu'); + divMenu.dataset.title = divMenuTooltipText; + divMenu.setAttribute('aria-label', divMenuTooltipText); divMenu.annotation = this; } if (this._data.trackchange) {