Handle keyboard focus properly in on dropdowns + checkboxes

Resolves #2556

Author: Gerrit0

CHANGELOG.md

@@ -52,6 +52,7 @@
 -   Links added with the `navigationLinks` option are now moved into the pull out navigation on mobile displays, #2548.
 -   `@license` and `@import` comments will be ignored at the top of files, #2552.
 -   Fixed issue in documentation validation where constructor signatures where improperly considered not documented, #2553.
+-   Keyboard focus is now visible on dropdowns and checkboxes in the default theme, #2556.
 -   The color theme label in the default theme now has an accessible name, #2557.
 -   Fixed issue where search results could not be navigated while Windows Narrator was on, #2563.
 -   `charset` is now correctly cased in `<meta>` tag generated by the default theme, #2568.

static/style.css

@@ -10,6 +10,7 @@
     --light-color-text: #222;
     --light-color-text-aside: #6e6e6e;
     --light-color-link: #1f70c2;
+    --light-color-focus-outline: #3584e4;
 
     --light-color-ts-keyword: #056bd6;
     --light-color-ts-project: #b111c9;
@@ -51,6 +52,7 @@
     --dark-color-text: #f5f5f5;
     --dark-color-text-aside: #dddddd;
     --dark-color-link: #00aff4;
+    --dark-color-focus-outline: #4c97f2;
 
     --dark-color-ts-keyword: #3399ff;
     --dark-color-ts-project: #e358ff;
@@ -94,6 +96,7 @@
         --color-text: var(--light-color-text);
         --color-text-aside: var(--light-color-text-aside);
         --color-link: var(--light-color-link);
+        --color-focus-outline: var(--light-color-focus-outline);
 
         --color-ts-keyword: var(--light-color-ts-keyword);
         --color-ts-module: var(--light-color-ts-module);
@@ -137,6 +140,7 @@
         --color-text: var(--dark-color-text);
         --color-text-aside: var(--dark-color-text-aside);
         --color-link: var(--dark-color-link);
+        --color-focus-outline: var(--dark-color-focus-outline);
 
         --color-ts-keyword: var(--dark-color-ts-keyword);
         --color-ts-module: var(--dark-color-ts-module);
@@ -187,6 +191,7 @@ body {
     --color-text: var(--light-color-text);
     --color-text-aside: var(--light-color-text-aside);
     --color-link: var(--light-color-link);
+    --color-focus-outline: var(--light-color-focus-outline);
 
     --color-ts-keyword: var(--light-color-ts-keyword);
     --color-ts-module: var(--light-color-ts-module);
@@ -228,6 +233,7 @@ body {
     --color-text: var(--dark-color-text);
     --color-text-aside: var(--dark-color-text-aside);
     --color-link: var(--dark-color-link);
+    --color-focus-outline: var(--dark-color-focus-outline);
 
     --color-ts-keyword: var(--dark-color-ts-keyword);
     --color-ts-module: var(--dark-color-ts-module);
@@ -258,6 +264,11 @@ body {
     --color-scheme: var(--dark-color-scheme);
 }
 
+*:focus-visible,
+.tsd-accordion-summary:focus-visible svg {
+    outline: 2px solid var(--color-focus-outline);
+}
+
 .always-visible,
 .always-visible .tsd-signatures {
     display: inherit !important;
@@ -604,11 +615,8 @@ dl.tsd-comment-tag-group p {
     Don't remove unless you know what you're doing. */
     opacity: 0.99;
 }
-.tsd-filter-input input[type="checkbox"]:focus + svg {
-    transform: scale(0.95);
-}
-.tsd-filter-input input[type="checkbox"]:focus:not(:focus-visible) + svg {
-    transform: scale(1);
+.tsd-filter-input input[type="checkbox"]:focus-visible + svg {
+    outline: 2px solid var(--color-focus-outline);
 }
 .tsd-checkbox-background {
     fill: var(--color-accent);