Add universal focus styles for all focusable elements

Author: angelikatyborska

assets/css/_html.css

@@ -15,6 +15,7 @@
 @import 'icons.css';
 @import 'layout.css';
 @import 'sidebar.css';
+@import 'focus.css';
 @import 'content/general.css';
 @import 'content/admonition.css';
 @import 'content/summary.css';

assets/css/content/footer.css

@@ -19,7 +19,6 @@
   border: 0;
   cursor: pointer;
   font-style: italic;
-  outline: none;
   padding: 0 4px;
 }
 

assets/css/copy-button.css

@@ -22,7 +22,7 @@ pre:hover .copy-button {
   color: currentColor;
 }
 
-pre .copy-button:hover, .copy-button:focus-visible {
+pre .copy-button:hover, pre .copy-button:focus-visible {
   opacity: 1;
 }
 

assets/css/focus.css

@@ -0,0 +1,38 @@
+/* extra button selectors necessary to overwrite normalize.css */
+*:focus,
+button:focus,
+[type="button"]:focus,
+[type="reset"]:focus,
+[type="submit"]:focus {
+  outline: 2px solid var(--main);
+  /* negative offset to make outline visible when overflow hidden */
+  outline-offset: -2px;
+}
+
+*:focus:not(:focus-visible),
+button:focus:not(:focus-visible),
+[type="button"]:focus:not(:focus-visible),
+[type="reset"]:focus:not(:focus-visible),
+[type="submit"]:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+/* inputs you can type into don't need an extra focus style
+because they have a visible cursor */
+input[type="text"],
+input[type="number"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+textarea {
+  outline: 0;
+}

assets/css/quick-switch.css

@@ -23,10 +23,6 @@
   transition: all .12s ease-out;
 }
 
-#quick-switch-modal-body #quick-switch-input:focus {
-  outline: none;
-}
-
 #quick-switch-modal-body #quick-switch-results {
   margin: 0;
 }

assets/css/settings.css

@@ -18,7 +18,6 @@
   transition: border-color 150ms;
 }
 #settings-modal-content .input:focus {
-  outline: none;
   border-color: var(--main);
 }
 #settings-modal-content .input::placeholder {
@@ -104,7 +103,3 @@
 #settings-modal-content .settings-select option {
   color: initial;
 }
-
-#settings-modal-content .settings-select:focus {
-  outline: none;
-}

assets/css/sidebar.css

@@ -92,10 +92,6 @@
   color: initial;
 }
 
-.sidebar .sidebar-projectVersionsDropdown:focus {
-  outline: none;
-}
-
 .sidebar .sidebar-projectVersion form::after {
   position: absolute;
   left: 0;
@@ -193,10 +189,6 @@
   opacity: .7;
 }
 
-.sidebar .sidebar-search .search-close-button:is(:focus, :hover) {
-  outline: none;
-}
-
 .sidebar .sidebar-search .search-input {
   background-color: var(--sidebarSearch);
   border: none;
@@ -212,10 +204,6 @@
   opacity: 0.3;
 }
 
-.sidebar .sidebar-search .search-input:is(:focus, :hover) {
-  outline: none;
-}
-
 .sidebar .sidebar-search .ri-search-2-line {
   font-weight: bold;
 }
@@ -444,10 +432,6 @@
   color: var(--sidebarHover);
 }
 
-.sidebar-button:is(:active, :hover, :focus) {
-  outline: none;
-}
-
 .sidebar-button {
   color: var(--sidebarAccentMain);
 }