Docs: accessibility and IE fixes for SVG-based top navigation (#22848)

* Add explicit aria-label attributes to <svg> based links

As some browser/AT combinations don't seem to fully support grabbing the
`<title>` from inside the `<svg>` as the link text/name to announce
(e.g. Firefox+NVDA)

* Add <title> to Bootstrap logo <svg>

* Add <title> to menu <svg>

* Add explicit focusable="false" to <svg> icons

Due to a bug/"feature" in IE, `<svg>` elements are usually separately
focusable, which then results in links with `<svg>` icons being
essentially focused twice (once for the link, and once for the `<svg>`
inside, which is then also non-interactive)

_includes/docs-navbar.html

@@ -1,5 +1,5 @@
 <header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
-  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
     {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
   </a>
 
@@ -43,17 +43,17 @@
     </li>
 
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" aria-label="GitHub">
         {% include icons/github.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" aria-label="Twitter">
         {% include icons/twitter.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" aria-label="Slack">
         {% include icons/slack.svg class="navbar-nav-svg" %}
       </a>
     </li>