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

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);

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 {