From a72877411d57cb6ffcfd928c8a0a1746e7c976fc Mon Sep 17 00:00:00 2001
From: webchick <webchick@24967.no-reply.drupal.org>
Date: Tue, 5 Nov 2013 09:17:50 -0800
Subject: [PATCH] Issue #1964880 by MiroslavBanov, jessebeach, falcon03,
rteijeiro: Convert the Overlay close button from an anchor element to a
button element.
---
core/modules/overlay/css/overlay-child.css | 4 ++++
core/modules/overlay/overlay-parent.js | 14 +++++++-------
core/modules/overlay/templates/overlay.html.twig | 2 +-
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 b40e3af97ddf..6efd7be13402 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 ae1d5b8f468d..0e5fcf06404e 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 732bc33737ad..57605cd55675 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>
--
GitLab