Skip to content
This repository was archived by the owner on Sep 10, 2022. It is now read-only.

Commit a13e7d6

Browse files
addyosmaniaddyosmani
committed
a11y: align with Material spec site
Can now tab into the menu and tab around items. This doesn’t yet support proper arrow navigation with the keyboard but is better than what we had before.
1 parent f3ac903 commit a13e7d6

File tree

2 files changed

+9
-9
lines changed

2 files changed

+9
-9
lines changed

‎server/layouts/app-shell.handlebars

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ limitations under the License.
3535

3636
<!-- Header element -->
3737
<header class="header">
38-
<button tabindex="-1" class="header__menu js-toggle-menu">
38+
<button role="tab" class="header__menu js-toggle-menu">
3939
Toggle nav menu
4040
</button>
4141

@@ -52,10 +52,10 @@ limitations under the License.
5252
<h1 class="side-nav__title">App shell</h1>
5353
</div>
5454

55-
<div class="side-nav__body">
56-
<a tabindex="-1" class="side-nav__blog-post" href="/">Index</a>
57-
<a tabindex="-1" class="side-nav__blog-post" href="/url-1">URL 1</a>
58-
<a tabindex="-1" class="side-nav__blog-post" href="/url-2">URL 2</a>
55+
<div class="side-nav__body" tabindex="0">
56+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/">Index</a>
57+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-1">URL 1</a>
58+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-2">URL 2</a>
5959
</div>
6060

6161
<div class="side-nav__version">Version @VERSION@</div>

‎server/layouts/default.handlebars

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ limitations under the License.
3434
<body>
3535

3636
<header class="header">
37-
<button tabindex="-1" class="header__menu js-toggle-menu">
37+
<button role="tab" class="header__menu js-toggle-menu">
3838
Toggle nav menu
3939
</button>
4040

@@ -52,9 +52,9 @@ limitations under the License.
5252
</div>
5353

5454
<div class="side-nav__body">
55-
<a tabindex="-1" class="side-nav__blog-post" href="/">Index</a>
56-
<a tabindex="-1" class="side-nav__blog-post" href="/url-1">URL 1</a>
57-
<a tabindex="-1" class="side-nav__blog-post" href="/url-2">URL 2</a>
55+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/">Index</a>
56+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-1">URL 1</a>
57+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-2">URL 2</a>
5858
</div>
5959

6060
<div class="side-nav__version">Version @VERSION@</div>

0 commit comments

Comments
 (0)