From 674e58e747242e6d01654b70c335dd69d076f8c0 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Sat, 27 Jan 2018 11:52:47 +0100 Subject: [PATCH] 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. --- src/theme/book.js | 8 +++++++- src/theme/index.hbs | 14 +++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/theme/book.js b/src/theme/book.js index 5e348fe1..489d994a 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -172,7 +172,7 @@ function playpen_text(playpen) { var buttons = document.createElement('div'); buttons.className = 'buttons'; - buttons.innerHTML = ""; + buttons.innerHTML = ""; // add expand button pre_block.prepend(buttons); @@ -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'); @@ -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'); @@ -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 = ''; buttons.prepend(clipButton); @@ -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 = ''; copyCodeClipboardButton.title = 'Copy to clipboard'; + copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title); buttons.prepend(runCodeButton); buttons.prepend(copyCodeClipboardButton); @@ -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); diff --git a/src/theme/index.hbs b/src/theme/index.hbs index bde62f73..2c15f38e 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -89,10 +89,10 @@