Skip to content

Toolbar buttons don't show outline when focussed (a11y) #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sathomas wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Toolbar buttons don't show outline when focussed (a11y) #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d6b52e
(issue #13) enable outline for focused buttons
sathomas Jun 16, 2015
0ab4260
(issue #13) disable redundant tabindex
sathomas Jun 16, 2015
f327a89
(issue #13) add title to extra buttons
sathomas Jul 10, 2015
70e1855
(issue #13) match focus styles
sathomas Jul 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions static/css/pad.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ li[data-key=showusers] > a #online_count {
display: none;
}

.buttonicon:focus {
border: none !important;
}

/* Restyle the toolbar */
.toolbar {
background: transparent;
Expand Down Expand Up @@ -144,13 +148,16 @@ li[data-key=showusers] > a #online_count {
width: 25px;
}

.toolbar ul li a:hover .buttonicon {
.toolbar ul li a:hover .buttonicon,
.toolbar ul li a .buttonicon:focus {
color: #999;
Copy link

@nicolaasmatthijs nicolaasmatthijs Jun 25, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use the same outline style as the one used for the main application (thin dotted, offset -2px)? When I tab through the toolbar without voiceover enable, I don't see an outline at all.

}

Copy link

@nicolaasmatthijs nicolaasmatthijs Jun 25, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would also be good if the focus style of the toolbar buttons was the same as the hover style

.toolbar ul li a .buttonicon:focus {
border: 0;
outline: none;
.toolbar ul li a .buttonicon:focus,
.toolbar ul li select:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

/* Additional icons added by OAE */
Expand Down
7 changes: 5 additions & 2 deletions static/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ exports.postAceInit = function (hook_name, args, cb) {
$('.buttonicon-showusers').removeClass('buttonicon-showusers').addClass('buttonicon-oae buttonicon-user');

// Add extra buttons to the toolbar *after* the style select
$('ul.menu_left').append('<li data-type="button" data-key="colorcheck"><a class="grouped-left" data-l10n-id="pad.settings.colorcheck" title="Toggle authorship colors"><button class="buttonicon buttonicon-oae buttonicon-clearauthorship"></button></a></li>');
$('ul.menu_left').append('<li data-type="button" data-key="download"><a target="_blank" href="' + window.location.pathname + '/export/pdf" class="grouped-right" data-l10n-id="pad.importExport.exportpdf" title="Download"><button class="buttonicon buttonicon-oae buttonicon-download"></button></a></li>');
$('ul.menu_left').append('<li data-type="button" data-key="colorcheck"><a class="grouped-left" data-l10n-id="pad.settings.colorcheck" title="Toggle authorship colors"><button class="buttonicon buttonicon-oae buttonicon-clearauthorship" title="Toggle authorship colors"></button></a></li>');
$('ul.menu_left').append('<li data-type="button" data-key="download"><a target="_blank" href="' + window.location.pathname + '/export/pdf" class="grouped-right" data-l10n-id="pad.importExport.exportpdf" title="Download"><button class="buttonicon buttonicon-oae buttonicon-download" title="Download"></button></a></li>');

// Show the toolbar
$('.toolbar').animate({
Expand All @@ -27,6 +27,9 @@ exports.postAceInit = function (hook_name, args, cb) {
$('#editorcontainerbox').animate({
'top': '55px',
}, 500);

Copy link

@nicolaasmatthijs nicolaasmatthijs Jun 25, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When focussing on the "Toggle autorship colors" and "Download" buttons, voiceover is not reading the text of the buttons. It just announces "button" with the fontawesome character.

// Disable tabbing to download link since there's a button within it
$('.toolbar [data-key="download"] a').attr('tabindex','-1');

// Enable the spellchecker
$('iframe[name="ace_outer"]').contents().find('iframe').contents().find('#innerdocbody').attr('spellcheck', 'true');
Expand Down