docs: Restore link focus outline in sidebar.

Not having a focus outline is very bad for accessibilty.
Browsers have it by default but we completely disabled it for links in
the sidebar in 9955580251.

Showing the outline when selecting a page in the sidebar can be
distracting, so we hide the outline for the highlighted sidebar link.
Since every focusable element however should have a focus outline, we
make the highlighted link unfocusable by setting tabindex=-1 (which also
makes sense since the link to the current page doesn't do anything
anyway).

Part of #15948.

static/js/portico/help.js

@@ -20,6 +20,7 @@ function registerCodeSection($codeSection) {
 
 function highlight_current_article() {
     $(".help .sidebar a").removeClass("highlighted");
+    $(".help .sidebar a").attr("tabindex", "0");
     const path = window.location.pathname;
 
     if (!path) {
@@ -37,6 +38,7 @@ function highlight_current_article() {
     // Highlight current article link and the heading of the same
     article.closest("ul").css("display", "block");
     article.addClass("highlighted");
+    article.attr("tabindex", "-1");
 }
 
 function render_code_sections() {

static/styles/portico/portico.scss

@@ -254,13 +254,9 @@ html {
                 width: calc(100% + 20px);
                 margin-left: -40px;
                 padding-left: 40px;
-            }
 
-            &:active,
-            &:hover,
-            &:focus,
-            &:visited {
-                outline: none;
+                // Don't show the focus outline for the highlighted page.
+                outline: 0;
             }
         }
     }