open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code cosmetics

Browse Source
This commit is contained in:
tophf 2018-09-06 19:08:56 +03:00
parent c57fef7b1e
commit 373fe5f510
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/dom.js
View File

@ -313,20 +313,30 @@ function initCollapsibles({bindClickOn = 'h2'} = {}) {
} }
} }
// Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
function focusAccessibility() { function focusAccessibility() {
// Makes the focus outline appear on keyboard tabbing, but not on mouse clicks. // last event's focusedViaClick
// Since we don't want full layout recalc, we modify only the closest focusable element, focusAccessibility.lastFocusedViaClick = false;
// which we try to find in DOM for this many parentElement jumps: // tags of focusable elements;
const focusables = focusAccessibility.ELEMENTS = // to avoid a full layout recalc we modify the closest one
['a', 'button', 'input', 'textarea', 'label', 'select', 'summary']; focusAccessibility.ELEMENTS = [
'a',
'button',
'input',
'textarea',
'label',
'select',
'summary',
];
// try to find a focusable parent for this many parentElement jumps:
const GIVE_UP_DEPTH = 4; const GIVE_UP_DEPTH = 4;
addEventListener('mousedown', suppressOutlineOnClick, {passive: true}); addEventListener('mousedown', suppressOutlineOnClick, {passive: true});
addEventListener('keydown', keepOutlineOnTab, {passive: true}); addEventListener('keydown', keepOutlineOnTab, {passive: true});
function suppressOutlineOnClick({target}) { function suppressOutlineOnClick({target}) {
for (let el = target, i = 0; el && i++ < GIVE_UP_DEPTH; el = el.parentElement) { for (let el = target, i = 0; el && i++ < GIVE_UP_DEPTH; el = el.parentElement) {
if (focusables.includes(el.localName)) { if (focusAccessibility.ELEMENTS.includes(el.localName)) {
if (el.dataset.focusedViaClick === undefined) { if (el.dataset.focusedViaClick === undefined) {
el.dataset.focusedViaClick = ''; el.dataset.focusedViaClick = '';
focusAccessibility.lastFocusedViaClick = true; focusAccessibility.lastFocusedViaClick = true;
@ -345,7 +355,7 @@ function focusAccessibility() {
return; return;
} }
let el = document.activeElement; let el = document.activeElement;
if (!el || !focusables.includes(el.localName)) { if (!el || !focusAccessibility.ELEMENTS.includes(el.localName)) {
return; return;
} }
if (el.dataset.focusedViaClick !== undefined) { if (el.dataset.focusedViaClick !== undefined) {