actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(theme): Use aria-label alonside title (#568) 

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.
This commit is contained in:
Sorin Davidoi 2018-01-27 11:52:47 +01:00 committed by Michael Bryan
parent 348c5d07c5
commit 674e58e747
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/theme/book.js
View File

@ -172,7 +172,7 @@ function playpen_text(playpen) {
var buttons = document.createElement('div'); var buttons = document.createElement('div');
buttons.className = 'buttons'; 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 // add expand button
pre_block.prepend(buttons); pre_block.prepend(buttons);
@ -184,6 +184,7 @@ function playpen_text(playpen) {
e.target.classList.remove('fa-expand'); e.target.classList.remove('fa-expand');
e.target.classList.add('fa-compress'); e.target.classList.add('fa-compress');
e.target.title = 'Hide lines'; e.target.title = 'Hide lines';
e.target.setAttribute('aria-label', e.target.title);
Array.from(lines).forEach(function (line) { Array.from(lines).forEach(function (line) {
line.classList.remove('hidden'); line.classList.remove('hidden');
@ -195,6 +196,7 @@ function playpen_text(playpen) {
e.target.classList.remove('fa-compress'); e.target.classList.remove('fa-compress');
e.target.classList.add('fa-expand'); e.target.classList.add('fa-expand');
e.target.title = 'Show hidden lines'; e.target.title = 'Show hidden lines';
e.target.setAttribute('aria-label', e.target.title);
Array.from(lines).forEach(function (line) { Array.from(lines).forEach(function (line) {
line.classList.remove('unhidden'); line.classList.remove('unhidden');
@ -217,6 +219,7 @@ function playpen_text(playpen) {
var clipButton = document.createElement('button'); var clipButton = document.createElement('button');
clipButton.className = 'fa fa-copy clip-button'; clipButton.className = 'fa fa-copy clip-button';
clipButton.title = 'Copy to clipboard'; clipButton.title = 'Copy to clipboard';
clipButton.setAttribute('aria-label', clipButton.title);
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>'; clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
buttons.prepend(clipButton); buttons.prepend(clipButton);
@ -237,11 +240,13 @@ function playpen_text(playpen) {
runCodeButton.className = 'fa fa-play play-button'; runCodeButton.className = 'fa fa-play play-button';
runCodeButton.hidden = true; runCodeButton.hidden = true;
runCodeButton.title = 'Run this code'; runCodeButton.title = 'Run this code';
runCodeButton.setAttribute('aria-label', runCodeButton.title);
var copyCodeClipboardButton = document.createElement('button'); var copyCodeClipboardButton = document.createElement('button');
copyCodeClipboardButton.className = 'fa fa-copy clip-button'; copyCodeClipboardButton.className = 'fa fa-copy clip-button';
copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>'; copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
copyCodeClipboardButton.title = 'Copy to clipboard'; copyCodeClipboardButton.title = 'Copy to clipboard';
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
buttons.prepend(runCodeButton); buttons.prepend(runCodeButton);
buttons.prepend(copyCodeClipboardButton); buttons.prepend(copyCodeClipboardButton);
@ -255,6 +260,7 @@ function playpen_text(playpen) {
var undoChangesButton = document.createElement('button'); var undoChangesButton = document.createElement('button');
undoChangesButton.className = 'fa fa-history reset-button'; undoChangesButton.className = 'fa fa-history reset-button';
undoChangesButton.title = 'Undo changes'; undoChangesButton.title = 'Undo changes';
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
buttons.prepend(undoChangesButton); buttons.prepend(undoChangesButton);

14
src/theme/index.hbs
View File

@ -89,10 +89,10 @@
<div id="menu-bar" class="menu-bar"> <div id="menu-bar" class="menu-bar">
<div id="menu-bar-sticky-container"> <div id="menu-bar-sticky-container">
<div class="left-buttons"> <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> <i class="fa fa-bars"></i>
</button> </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> <i class="fa fa-paint-brush"></i>
</button> </button>
<ul id="theme-list" class="theme-popup" aria-label="submenu"> <ul id="theme-list" class="theme-popup" aria-label="submenu">
@ -107,7 +107,7 @@
<h1 class="menu-title">{{ book_title }}</h1> <h1 class="menu-title">{{ book_title }}</h1>
<div class="right-buttons"> <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> <i id="print-button" class="fa fa-print"></i>
</a> </a>
</div> </div>
@ -131,13 +131,13 @@
<nav class="nav-wrapper" aria-label="Page navigation"> <nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons --> <!-- Mobile navigation buttons -->
{{#previous}} {{#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> <i class="fa fa-angle-left"></i>
</a> </a>
{{/previous}} {{/previous}}
{{#next}} {{#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> <i class="fa fa-angle-right"></i>
</a> </a>
{{/next}} {{/next}}
@ -149,13 +149,13 @@
<nav class="nav-wide-wrapper" aria-label="Page navigation"> <nav class="nav-wide-wrapper" aria-label="Page navigation">
{{#previous}} {{#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> <i class="fa fa-angle-left"></i>
</a> </a>
{{/previous}} {{/previous}}
{{#next}} {{#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> <i class="fa fa-angle-right"></i>
</a> </a>
{{/next}} {{/next}}