diff options
| author | Patrick H. Lauke <[email protected]> | 2017-06-17 15:07:49 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-06-17 15:07:49 +0200 |
| commit | 816d5bd2e3268aac543ecfe534290879ee59da1d (patch) | |
| tree | b5f4c8638b7d1373b78f53ec1fecee92f84f36db /_includes/docs-navbar.html | |
| parent | 9f0929013e0c4e5c21acbb7a7e8298c345ea4cac (diff) | |
| download | bootstrap-816d5bd2e3268aac543ecfe534290879ee59da1d.tar.xz bootstrap-816d5bd2e3268aac543ecfe534290879ee59da1d.zip | |
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)
Diffstat (limited to '_includes/docs-navbar.html')
| -rw-r--r-- | _includes/docs-navbar.html | 8 |
1 files changed, 4 insertions, 4 deletions
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> |