Skip to content

Commit

Permalink
fix(theme): Use aria-label alonside title (#568)
Browse files Browse the repository at this point in the history 
Tested this on macOS with VoiceOver, and it does not pick up the title as the text of the button. Kind of makes sense, since title and aria-label are not the same. This will make sure that the buttons and links are labeled properly.
  • Loading branch information
@sorin-davidoi @Michael-F-Bryan
sorin-davidoi authored and Michael-F-Bryan committed Jan 27, 2018
1 parent 348c5d0 commit 674e58e
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 8 deletions.
8 changes: 7 additions & 1 deletion src/theme/book.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ function playpen_text(playpen) {

var buttons = document.createElement('div');
buttons.className = 'buttons';
buttons.innerHTML = "<i class=\"fa fa-expand\" title=\"Show hidden lines\"></i>";
buttons.innerHTML = "<button class=\"fa fa-expand\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";

// add expand button
pre_block.prepend(buttons);
Expand All @@ -184,6 +184,7 @@ function playpen_text(playpen) {
e.target.classList.remove('fa-expand');
e.target.classList.add('fa-compress');
e.target.title = 'Hide lines';
e.target.setAttribute('aria-label', e.target.title);

Array.from(lines).forEach(function (line) {
line.classList.remove('hidden');
Expand All @@ -195,6 +196,7 @@ function playpen_text(playpen) {
e.target.classList.remove('fa-compress');
e.target.classList.add('fa-expand');
e.target.title = 'Show hidden lines';
e.target.setAttribute('aria-label', e.target.title);

Array.from(lines).forEach(function (line) {
line.classList.remove('unhidden');
Expand All @@ -217,6 +219,7 @@ function playpen_text(playpen) {
var clipButton = document.createElement('button');
clipButton.className = 'fa fa-copy clip-button';
clipButton.title = 'Copy to clipboard';
clipButton.setAttribute('aria-label', clipButton.title);
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';

buttons.prepend(clipButton);
Expand All @@ -237,11 +240,13 @@ function playpen_text(playpen) {
runCodeButton.className = 'fa fa-play play-button';
runCodeButton.hidden = true;
runCodeButton.title = 'Run this code';
runCodeButton.setAttribute('aria-label', runCodeButton.title);

var copyCodeClipboardButton = document.createElement('button');
copyCodeClipboardButton.className = 'fa fa-copy clip-button';
copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
copyCodeClipboardButton.title = 'Copy to clipboard';
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);

buttons.prepend(runCodeButton);
buttons.prepend(copyCodeClipboardButton);
Expand All @@ -255,6 +260,7 @@ function playpen_text(playpen) {
var undoChangesButton = document.createElement('button');
undoChangesButton.className = 'fa fa-history reset-button';
undoChangesButton.title = 'Undo changes';
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);

buttons.prepend(undoChangesButton);

Expand Down
14 changes: 7 additions & 7 deletions src/theme/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@
<div id="menu-bar" class="menu-bar">
<div id="menu-bar-sticky-container">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="submenu">
Expand All @@ -107,7 +107,7 @@
<h1 class="menu-title">{{ book_title }}</h1>

<div class="right-buttons">
<a href="print.html" title="Print this book">
<a href="print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
Expand All @@ -131,13 +131,13 @@
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
{{#previous}}
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-keyshortcuts="Left">
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}

{{#next}}
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-keyshortcuts="Right">
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
Expand All @@ -149,13 +149,13 @@

<nav class="nav-wide-wrapper" aria-label="Page navigation">
{{#previous}}
<a href="{{link}}" class="nav-chapters previous" title="Previous chapter" aria-keyshortcuts="Left">
<a href="{{link}}" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}

{{#next}}
<a href="{{link}}" class="nav-chapters next" title="Next chapter" aria-keyshortcuts="Right">
<a href="{{link}}" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
Expand Down

0 comments on commit 674e58e

Please sign in to comment.