Commit a7287741 authored by webchick's avatar webchick

Issue #1964880 by MiroslavBanov, jessebeach, falcon03, rteijeiro: Convert the...

Issue #1964880 by MiroslavBanov, jessebeach, falcon03, rteijeiro: Convert the Overlay close button from an anchor element to a button element.
parent b65f61fd
......@@ -78,6 +78,7 @@ html[dir="rtl"] {
#overlay-close,
#overlay-close:hover {
background: #ffffff url(../images/close.png) no-repeat;
border: 0;
border-radius: 0 12px 12px 0; /* LTR */
display: block;
height: 26px;
......@@ -91,6 +92,9 @@ html[dir="rtl"] {
[dir="rtl"] #overlay-close:hover {
border-radius: 12px 0 0 12px;
}
#overlay-close:focus, #overlay-close:active{
outline: 1px dotted;
}
/**
* Tabs on the overlay.
......
......@@ -516,6 +516,13 @@ Drupal.overlay.eventhandlerOverrideLink = function (event) {
var $target = $(event.target);
// Close the overlay when the button contains the overlay-close class.
if ($target.is('button') && $target.hasClass('overlay-close')) {
// Clearing the overlay URL fragment will close the overlay.
$.bbq.removeState('overlay');
return;
}
// Only continue if clicked target (or one of its parents) is a link.
if (!$target.is('a')) {
$target = $target.closest('a');
......@@ -529,13 +536,6 @@ Drupal.overlay.eventhandlerOverrideLink = function (event) {
return;
}
// Close the overlay when the link contains the overlay-close class.
if ($target.hasClass('overlay-close')) {
// Clearing the overlay URL fragment will close the overlay.
$.bbq.removeState('overlay');
return;
}
var target = $target[0];
var href = target.href;
// Only handle links that have an href attribute and use the HTTP(S) protocol.
......
......@@ -25,7 +25,7 @@
<h1{{ title_attributes }}>{{ title }}</h1>
</div>
<div id="overlay-close-wrapper">
<a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="visually-hidden">{{ 'Close overlay'|t }}</span></a>
<button id="overlay-close" class="overlay-close" type="button" aria-controls="overlay-content"><span class="visually-hidden">{{ 'Close overlay'|t }}</span></button>
</div>
{% if tabs %}
<h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment