@@ -13,8 +15,10 @@
diff --git a/lib/gui/css/desktop.css b/lib/gui/css/desktop.css
index 8450f62a..d04d6540 100644
--- a/lib/gui/css/desktop.css
+++ b/lib/gui/css/desktop.css
@@ -47,12 +47,6 @@ body {
-webkit-overflow-scrolling: touch;
}
-/* Prevent blue outline */
-input:focus,
-button:focus {
- outline: none !important;
-}
-
/* Titles don't have margins on desktop apps */
h1, h2, h3, h4, h5, h6 {
margin: 0;
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index c26d8fee..9a400032 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6132,33 +6132,30 @@ body {
.button-no-hover, .button[disabled], [disabled].progress-button, .progress-button[active="true"] {
pointer-events: none; }
-.button-default,
-.button-default:focus {
+.button-default {
background-color: #ececec;
- color: #b3b3b3;
- outline: none; }
+ color: #b3b3b3; }
+.button-default:focus,
.button-default:hover {
background-color: lightgray;
color: #b3b3b3; }
-.button-primary, .progress-button,
-.button-primary:focus,
-.progress-button:focus {
+.button-primary, .progress-button {
background-color: #5793db;
- color: #fff;
- outline: none; }
+ color: #fff; }
-.button-primary:hover, .progress-button:hover {
+.button-primary:focus, .progress-button:focus,
+.button-primary:hover,
+.progress-button:hover {
background-color: #2d78d2;
color: #fff; }
-.button-danger,
-.button-danger:focus {
+.button-danger {
background-color: #d9534f;
- color: #fff;
- outline: none; }
+ color: #fff; }
+.button-danger:focus,
.button-danger:hover {
background-color: #c9302c;
color: #fff; }
@@ -6741,3 +6738,12 @@ body {
.section-header > .button, .section-header > .progress-button {
padding-left: 3px;
padding-right: 3px; }
+
+@keyframes focus-highlight {
+ from {
+ outline: 2px solid #ff912f; }
+ to {
+ outline: none; } }
+
+[tabindex]:focus {
+ animation: focus-highlight 10s steps(2, end) forwards; }
diff --git a/lib/gui/index.html b/lib/gui/index.html
index 1c80db98..7dd88d0a 100644
--- a/lib/gui/index.html
+++ b/lib/gui/index.html
@@ -20,16 +20,24 @@
@@ -37,23 +45,28 @@
diff --git a/lib/gui/os/open-external/directives/open-external.js b/lib/gui/os/open-external/directives/open-external.js
index c56329f9..7149be98 100644
--- a/lib/gui/os/open-external/directives/open-external.js
+++ b/lib/gui/os/open-external/directives/open-external.js
@@ -16,6 +16,8 @@
'use strict'
+const _ = require('lodash')
+
/**
* @summary OsOpenExternal directive
* @function
@@ -43,6 +45,17 @@ module.exports = (OSOpenExternalService) => {
element.on('click', () => {
OSOpenExternalService.open(attributes.osOpenExternal)
})
+
+ const ENTER_KEY = 13
+ const SPACE_KEY = 32
+ element.on('keypress', (event) => {
+ if (_.includes([ ENTER_KEY, SPACE_KEY ], event.keyCode)) {
+ // Don't spam the user with several tabs if the key is being held
+ if (!event.repeat) {
+ OSOpenExternalService.open(attributes.osOpenExternal)
+ }
+ }
+ })
}
}
}
diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html
index 24908deb..71b2cce9 100644
--- a/lib/gui/pages/main/templates/main.tpl.html
+++ b/lib/gui/pages/main/templates/main.tpl.html
@@ -10,6 +10,7 @@
@@ -51,6 +53,7 @@