From b7a9cc4439443f37f996619e691949d2da06fd9d Mon Sep 17 00:00:00 2001
From: Niklas Baumgardner <nbaumgardner@mozilla.com>
Date: Tue, 31 Jan 2023 16:20:48 +0000
Subject: [PATCH] Bug 1799215 - Screenshots overlay buttons should have focus
 states. r=cmkm

Differential Revision: https://phabricator.services.mozilla.com/D167583
---
 .../screenshots/ScreenshotsOverlayChild.sys.mjs      |  2 +-
 browser/components/screenshots/overlay/overlay.css   | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
index 18c2227d2b54..d15d4cd802c3 100644
--- a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
+++ b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
@@ -311,7 +311,7 @@ class AnonymousContentOverlay {
               <div class="face"></div>
             </div>
             <div class="preview-instructions">${instructions.value}</div>
-            <div class="cancel-shot" id="screenshots-cancel-button">${cancel.value}</div>
+            <button class="cancel-shot" id="screenshots-cancel-button">${cancel.value}</button>
           </div>
         </div>
         <div id="${this.hoverBoxId}"></div>
diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
index 0c03e18ce7e4..47ee3b9b41bb 100644
--- a/browser/components/screenshots/overlay/overlay.css
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -64,6 +64,7 @@
   width: fit-content;
   cursor: pointer;
   outline: none;
+  appearance: none;
   border-radius: 3px;
   border: 1px #9b9b9b solid;
   color: #fff;
@@ -73,6 +74,17 @@
   padding: 10px 25px;
 }
 
+:-moz-native-anonymous #screenshots-cancel-button:hover {
+  background-color: #fff;
+  color: #000;
+}
+
+:-moz-native-anonymous .screenshots-button:focus-visible,
+:-moz-native-anonymous #screenshots-cancel-button:focus-visible {
+  outline: 2px solid #00ddff;
+  outline-offset: 2px;
+}
+
 @media (forced-colors: active), (prefers-contrast) {
   :-moz-native-anonymous #screenshots-cancel-button {
     border-color: ButtonBorder;