fix: Reveal hover-only controls on keyboard focus

The section anchors, the code-block copy button and the nav menu toggle are all
`visibility: hidden` until their container is hovered, so a keyboard user tabs
onto a control that is not drawn and cannot see where focus is. Pairing each
reveal with focus is what makes the focus rings on those three reachable
without a mouse.

Author: lfrancke

ui/src/css/doc.css

@@ -132,12 +132,20 @@
   content: "\00a7";
 }
 
+/* A focusable control that only appears on hover is invisible to anyone
+ * tabbing to it, so every reveal below pairs hover with focus. */
 .doc h1:hover .anchor,
 .doc h2:hover .anchor,
 .doc h3:hover .anchor,
 .doc h4:hover .anchor,
 .doc h5:hover .anchor,
-.doc h6:hover .anchor {
+.doc h6:hover .anchor,
+.doc h1 .anchor:focus-visible,
+.doc h2 .anchor:focus-visible,
+.doc h3 .anchor:focus-visible,
+.doc h4 .anchor:focus-visible,
+.doc h5 .anchor:focus-visible,
+.doc h6 .anchor:focus-visible {
   visibility: visible;
 }
 
@@ -853,7 +861,8 @@
   z-index: 1;
 }
 
-.doc .listingblock:hover .source-toolbox {
+.doc .listingblock:hover .source-toolbox,
+.doc .listingblock:focus-within .source-toolbox {
   visibility: visible;
 }
 

ui/src/css/header.css

@@ -193,7 +193,7 @@ body {
   color: var(--navbar-menu-font-color-hover);
 }
 
-/* font: inherit is required, not tidiness: .svg-icon sizes the magnifier in em,
+/* font: inherit is required: .svg-icon sizes the magnifier in em,
  * so the UA button font would shrink it from 16px to 13px. */
 #search-button {
   background: none;

ui/src/css/nav.css

@@ -137,7 +137,8 @@
   background-image: url(../img/octicons-16.svg#view-fold);
 }
 
-.nav-panel-menu.is-active:hover .nav-menu-toggle {
+.nav-panel-menu.is-active:hover .nav-menu-toggle,
+.nav-panel-menu.is-active:focus-within .nav-menu-toggle {
   visibility: visible;
 }