corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1799215 - Screenshots overlay buttons should have focus states. r=cmkm

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D167583
This commit is contained in:
Niklas Baumgardner
2023-01-31 16:20:48 +00:00
parent d8f5708568
commit b7a9cc4439
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
View File

@@ -311,7 +311,7 @@ class AnonymousContentOverlay {
<div class="face"></div> <div class="face"></div>
</div> </div>
<div class="preview-instructions">${instructions.value}</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> </div>
<div id="${this.hoverBoxId}"></div> <div id="${this.hoverBoxId}"></div>

12
browser/components/screenshots/overlay/overlay.css
View File

@@ -64,6 +64,7 @@
width: fit-content; width: fit-content;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
appearance: none;
border-radius: 3px; border-radius: 3px;
border: 1px #9b9b9b solid; border: 1px #9b9b9b solid;
color: #fff; color: #fff;
@@ -73,6 +74,17 @@
padding: 10px 25px; 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) { @media (forced-colors: active), (prefers-contrast) {
:-moz-native-anonymous #screenshots-cancel-button { :-moz-native-anonymous #screenshots-cancel-button {
border-color: ButtonBorder; border-color: ButtonBorder;