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.

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.

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.

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>