From 259109800408f067da74dd74ea862b302c1c3ae8 Mon Sep 17 00:00:00 2001
From: Andrei Oprea <andrei.br92@gmail.com>
Date: Mon, 20 May 2019 15:04:45 +0000
Subject: [PATCH] Bug 1548782 - Improve hover state and accessibility for
 Bookmark Panel message r=r1cky

Differential Revision: https://phabricator.services.mozilla.com/D31797

--HG--
extra : moz-landing-system : lando
---
 .../components/newtab/lib/BookmarkPanelHub.jsm |  3 ++-
 .../shared/places/editBookmarkPanel.inc.css    | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/browser/components/newtab/lib/BookmarkPanelHub.jsm b/browser/components/newtab/lib/BookmarkPanelHub.jsm
index 25c0fa0bb5ff..98de50ccdc8f 100644
--- a/browser/components/newtab/lib/BookmarkPanelHub.jsm
+++ b/browser/components/newtab/lib/BookmarkPanelHub.jsm
@@ -127,9 +127,10 @@ class _BookmarkPanelHub {
       });
       recommendation.style.color = message.color;
       recommendation.style.background = `-moz-linear-gradient(-45deg, ${message.background_color_1} 0%, ${message.background_color_2} 70%)`;
-      const close = createElement("a");
+      const close = createElement("button");
       close.setAttribute("id", "cfrClose");
       close.setAttribute("aria-label", "close");
+      close.style.color = message.color;
       this._l10n.setAttributes(close, message.close_button.tooltiptext);
       close.addEventListener("click", e => {
         this.sendUserEventTelemetry("DISMISS", win);
diff --git a/browser/themes/shared/places/editBookmarkPanel.inc.css b/browser/themes/shared/places/editBookmarkPanel.inc.css
index cb8024c0557e..8609f4f4f4ef 100644
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -99,13 +99,20 @@
   text-align: start;
 }
 
+#editBookmarkPanelRecommendationCta:hover {
+  text-decoration: underline;
+}
+
 #editBookmarkPanelRecommendation #cfrClose {
   position: absolute;
-  padding: 3px 2px;
-  inset-inline-end: 16px;
+  padding: 10px;
+  inset-inline-end: 8px;
   top: 15px;
   width: 12px;
   height: 12px;
+  border: none;
+  border-radius: var(--toolbarbutton-border-radius);
+  background-color: transparent;
   background-image: url(chrome://browser/skin/stop.svg);
   background-size: 12px;
   background-repeat: no-repeat;
@@ -113,10 +120,17 @@
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
+  cursor: pointer;
 }
 
 #editBookmarkPanelRecommendation #cfrClose:hover {
   fill-opacity: 1;
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+#editBookmarkPanelRecommendation #cfrClose:active,
+#editBookmarkPanelRecommendation #cfrClose:focus {
+  box-shadow: var(--focus-ring-box-shadow);
 }
 
 html|div#editBookmarkPanelFaviconContainer {