From 816d5bd2e3268aac543ecfe534290879ee59da1d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 17 Jun 2017 15:07:49 +0200
Subject: 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 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to '_includes/docs-navbar.html')

diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html
index 0b2401d4d..89960f0ac 100644
--- a/_includes/docs-navbar.html
+++ b/_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>
-- 
cgit v1.2.3