summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwebchick2013-11-05 17:17:50 (GMT)
committerwebchick2013-11-05 17:17:50 (GMT)
commita72877411d57cb6ffcfd928c8a0a1746e7c976fc (patch)
tree953e8e4df66d8ddd4c07d729f850a12db3cc39a2
parentb65f61fdf9aae4aa9e3f1e799b205d8579fbbc5e (diff)
Issue #1964880 by MiroslavBanov, jessebeach, falcon03, rteijeiro: Convert the Overlay close button from an anchor element to a button element.
-rw-r--r--core/modules/overlay/css/overlay-child.css4
-rw-r--r--core/modules/overlay/overlay-parent.js14
-rw-r--r--core/modules/overlay/templates/overlay.html.twig2
3 files changed, 12 insertions, 8 deletions
diff --git a/core/modules/overlay/css/overlay-child.css b/core/modules/overlay/css/overlay-child.css
index b40e3af..6efd7be 100644
--- a/core/modules/overlay/css/overlay-child.css
+++ b/core/modules/overlay/css/overlay-child.css
@@ -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.
diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js
index ae1d5b8..0e5fcf0 100644
--- a/core/modules/overlay/overlay-parent.js
+++ b/core/modules/overlay/overlay-parent.js
@@ -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.
diff --git a/core/modules/overlay/templates/overlay.html.twig b/core/modules/overlay/templates/overlay.html.twig
index 732bc33..57605cd 100644
--- a/core/modules/overlay/templates/overlay.html.twig
+++ b/core/modules/overlay/templates/overlay.html.twig
@@ -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>