diff --git a/edit/moz-section-widget.js b/edit/moz-section-widget.js
index d53d4257..e1f79a12 100644
--- a/edit/moz-section-widget.js
+++ b/edit/moz-section-widget.js
@@ -202,7 +202,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
color: ${fore};
}
${C_CONTAINER} input,
- ${C_CONTAINER} button:not(.fake),
+ ${C_CONTAINER} button,
${C_CONTAINER} select {
background: rgba(255, 255, 255, ${
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
diff --git a/edit/regexp-tester.js b/edit/regexp-tester.js
index 328e2be8..d0e0cee5 100644
--- a/edit/regexp-tester.js
+++ b/edit/regexp-tester.js
@@ -96,12 +96,12 @@ const regexpTester = (() => {
: GET_FAVICON_URL + new URL(url).hostname;
const icon = $create('img', {src: faviconUrl});
if (match.text.length === url.length) {
- full.push($create('button.fake', [
+ full.push($create('a', {tabIndex: 0}, [
icon,
url,
]));
} else {
- partial.push($create('button.fake', [
+ partial.push($create('a', {tabIndex: 0}, [
icon,
url.substr(0, match.pos),
$create('mark', match.text),
diff --git a/global.css b/global.css
index 0bb117f6..5cf9f3a2 100644
--- a/global.css
+++ b/global.css
@@ -21,7 +21,7 @@ body:lang(zh-HK) {
font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
}
-button:not(.fake) {
+button {
-webkit-appearance: none;
-moz-appearance: none;
user-select: none;
@@ -41,12 +41,12 @@ button:not(.fake) {
transition: background-color .25s, border-color .25s;
}
-button:not(.fake):not(:disabled):hover {
+button:not(:disabled):hover {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
}
-button:not(.fake):active {
+button:active {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
@@ -54,20 +54,8 @@ button:not(.fake):active {
background-size: 100% 100%;
}
-.fake { /* must be a single simple selector so its specificity loses to anything declared afterwards */
- all: unset;
- cursor: pointer;
- box-sizing: border-box;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-.fake[hidden] {
- display: none;
-}
-
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(.fake):not(:disabled):hover {
+#message-box-buttons button:not(:disabled):hover {
background-color: hsl(0, 0%, 90%);
border-color: hsl(0, 0%, 50%);
}
@@ -316,12 +304,12 @@ input[type="number"][data-focused-via-click]:focus {
}
/* Firefox cannot handle fractions in font-size */
- .firefox button:not(.fake):not(.install) {
+ .firefox button:not(.install) {
line-height: 13px;
padding: 3px 7px;
}
- .firefox.moz-appearance-bug button:not(.fake):not(.install) {
+ .firefox.moz-appearance-bug button:not(.install) {
padding: 2px 4px;
}
}
diff --git a/js/dlg/config-dialog.js b/js/dlg/config-dialog.js
index 2a84a73f..c1054299 100644
--- a/js/dlg/config-dialog.js
+++ b/js/dlg/config-dialog.js
@@ -215,7 +215,7 @@ async function configDialog(style) {
function buildConfigForm() {
let resetter =
- $create('button.fake.config-reset-icon', [
+ $create('a.config-reset-icon', {tabIndex: 0}, [
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
$create('SVG:title', t('genericResetLabel')),
$create('SVG:polygon', {
@@ -230,8 +230,9 @@ async function configDialog(style) {
case 'color':
children = [
$create('.colorview-swatch.config-value', [
- va.input = $create('button.fake.color-swatch', {
+ va.input = $create('a.color-swatch', {
va,
+ tabIndex: 0,
onclick: showColorpicker,
}),
]),
diff --git a/js/dom.js b/js/dom.js
index e3ab43f1..ada2f408 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -423,6 +423,7 @@ async function waitForSheet({
}
// set language for a) CSS :lang pseudo and b) hyphenation
document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage());
+ document.on('keypress', clickDummyLinkOnEnter);
document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
Promise.resolve().then(async () => {
@@ -490,6 +491,14 @@ async function waitForSheet({
}
}
+ function clickDummyLinkOnEnter(e) {
+ if (getEventKeyName(e) === 'Enter') {
+ const a = e.target.closest('a');
+ const isDummy = a && !a.href && a.tabIndex === 0;
+ if (isDummy) a.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+ }
+ }
+
function keepFocusRingOnTabbing(event) {
if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
focusAccessibility.lastFocusedViaClick = false;
diff --git a/manage.html b/manage.html
index 6b541781..f22b5e47 100644
--- a/manage.html
+++ b/manage.html
@@ -53,18 +53,18 @@
-
-
+