mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

vpat 44: scaffold keyboard tab selection focus

Browse source 
Do not move focus from the tab onto the editor/input,
during keyboard navigation to not change context per
https://www.w3.org/WAI/WCAG21/Understanding/on-input.

Focus will still shift if tab selection changed on mouse click.
This commit is contained in:
Bogdan Abaev 2024-04-29 11:42:52 -04:00
parent 54382475be
commit 4539ada40a
1 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
chrome/content/scaffold/scaffold.js
View file

@ -59,6 +59,7 @@ var Scaffold = new function () {
var _translatorProvider = null;
var _lastModifiedTime = 0;
var _needRebuildTranslatorSuggestions = true;
var _tabClicked = false;
this.browser = () => _browser;
@ -99,6 +100,11 @@ var Scaffold = new function () {
});
document.getElementById('tabpanels').addEventListener('select', event => Scaffold.handleTabSelect(event));
document.getElementById('tabs').addEventListener('mousedown', (event) => {
// Record if tab selection will happen due to a mouse click vs keyboard nav.
if (event.clientX === 0 && event.clientY === 0) return;
_tabClicked = true;
}, true);
let lastTranslatorID = Zotero.Prefs.get('scaffold.lastTranslatorID');
if (lastTranslatorID) {
@ -861,6 +867,8 @@ var Scaffold = new function () {
case 'import':
case 'code':
case 'tests':
// Keep focus on tab during keyboard navigation
if (!_tabClicked) break;
// the select event's default behavior is to focus the selected tab.
// we don't want to prevent *all* of the event's default behavior,
// but we do want to focus the editor instead of the tab.
@ -871,8 +879,16 @@ var Scaffold = new function () {
_editors[tab].focus();
}, 10);
break;
default:
// With a screen reader active, focus may not shift from selected tab
// to the first focusable input. Explicitly force it if a tab was clicked.
if (!_tabClicked) break;
setTimeout(() => {
Services.focus.moveFocus(window, document.getElementById('tabs').selectedItem, Services.focus.MOVEFOCUS_FORWARD, 0);
}, 10);
}
_tabClicked = false;
let codeTabBroadcaster = document.getElementById('code-tab-only');
if (tab == 'code') {
codeTabBroadcaster.removeAttribute('disabled');