improvement: outline keyboard-focused elements

This improves keyboard usage experience (accessibility, a11y)

For the most part this does not affect items
that are focused with mouse instead of keyboard
(apart from "advanced" login fields, and maybe some other places),
all thanks to `:focus-visible` selector
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible

Composer, message search, settings, contact search are not affected
for pointer device users.

For reference, here are some commits that had to do with
`outline` and `:focus`.
They don't appear to be paying much attention
to keyboard-accessibility:
- b740c60
- b5fb8a0
- 0c7949c
- 11bda12
- 9307958

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 - New keyboard shortcuts (experimental setting): Telegram-style Ctrl+Up/Down to select the message to reply to #3965
 - More shortcuts to switch between chats: `Ctrl + PageDown`, `Ctrl + PageUp`, `Ctrl + Tab`, `Ctrl + Shift + Tab` #3984
+- Better keyboard accessibility: make more elements focusable, add outline them #4005
 
 ### Changed
 - reword advanced setting "Disable Background Sync For All Accounts" -> "Only Synchronize the Currently Selected Account" #3960

scss/_global.scss

@@ -71,6 +71,12 @@ a {
 
 $unread-badge-size: 21px;
 
+// Let's not add `:not(:focus-visible)` since the blinking cursor
+// might be enough, (or it might not, we'll see).
+input:focus {
+  outline: none;
+}
+
 input[type='text'],
 input[type='search'],
 textarea {
@@ -80,15 +86,8 @@ textarea {
   }
 }
 
-input:focus {
-  outline: 0 !important;
-}
-
 //yellow/blue border fix
-button:focus {
-  outline: none;
-}
-button:focus {
+button:focus:not(:focus-visible) {
   outline: none;
 }
 

scss/composer/_composer.scss

@@ -77,15 +77,15 @@
         background: none;
         cursor: pointer;
       }
-      &:focus {
+      &:focus:not(:focus-visible) {
         outline: none;
       }
     }
 
     .emoji-button {
       height: 40px;
       padding: 0px 3px;
-      &:focus {
+      &:focus:not(:focus-visible) {
         outline: none;
       }
       &:hover {
@@ -111,7 +111,7 @@
       border-radius: 180px;
       cursor: pointer;
 
-      &:focus {
+      &:focus:not(:focus-visible) {
         outline: none;
       }
 
@@ -127,7 +127,7 @@
         background-size: contain;
         vertical-align: middle;
 
-        &:focus {
+        &:focus:not(:focus-visible) {
           outline: none;
         }
       }
@@ -150,6 +150,8 @@
         color: var(--composerPlaceholderText);
       }
 
+      // Let's not add `:not(:focus-visible)` since the blinking cursor
+      // might be enough, (or it might not, we'll see).
       &:focus {
         outline: none;
       }

scss/manifest.scss

@@ -5,6 +5,10 @@
 @import '../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css';
 @import '../node_modules/@blueprintjs/core/lib/css/blueprint.css';
 
+// Overwrites for third party node modules.
+// Above our styles, so that our styles take priority by being defined after.
+@import 'overwrites/_bp4-overwrites';
+
 // Global Settings, Variables, and Mixins
 @import 'variables';
 @import 'mixins';
@@ -68,9 +72,6 @@
 @import 'misc/_keyboard_hint_box.scss';
 @import 'misc/_search-input.scss';
 
-// Overwrites for third party node modules
-@import 'overwrites/_bp4-overwrites';
-
 // ConnectivityToast
 @import '_connectivity-toast';
 

scss/overwrites/_bp4-overwrites.scss

@@ -156,7 +156,8 @@
 .bp4-control input:focus ~ .bp4-control-indicator,
 input[type='text']:active,
 input[type='text']:focus {
-  outline: unset;
+  outline: revert;
+  outline-offset: revert;
 }
 
 .bp4-spinner-animation {

src/renderer/components/AccountListSidebar/styles.module.scss

@@ -162,7 +162,6 @@
   border: 0;
   height: 42px;
   margin: 0;
-  outline: 0;
   padding: 0;
   width: 42px;
 

src/renderer/components/ImageSelector/styles.module.scss

@@ -16,7 +16,6 @@
   height: 35px;
   justify-content: center;
   margin: 0;
-  outline: 0;
   padding: 0;
   position: absolute;
   right: 0;

src/renderer/components/QrReader/styles.module.scss

@@ -29,7 +29,6 @@
   filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
   height: 35px;
   margin: 15px;
-  outline: 0;
   padding: 5px;
   position: absolute;
   right: 5px;