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

allow focus outline on click in text/search input or textarea

Browse Source
This commit is contained in:
tophf 2020-10-12 14:25:22 +03:00
parent e843660f12
commit 0dbdeffdb8
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/dom.js
View File

@ -355,20 +355,23 @@ function focusAccessibility() {
'a', 'a',
'button', 'button',
'input', 'input',
'textarea',
'label', 'label',
'select', 'select',
'summary', 'summary',
]; ];
// try to find a focusable parent for this many parentElement jumps: // try to find a focusable parent for this many parentElement jumps:
const GIVE_UP_DEPTH = 4; const GIVE_UP_DEPTH = 4;
const isOutlineAllowed = ({localName, type}) =>
!focusAccessibility.ELEMENTS.includes(localName) ||
// allow outline on text/search inputs in addition to textareas
localName === 'input' && (type === 'text' || type === 'search');
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 (focusAccessibility.ELEMENTS.includes(el.localName)) { if (!isOutlineAllowed(el)) {
focusAccessibility.lastFocusedViaClick = true; focusAccessibility.lastFocusedViaClick = true;
if (el.dataset.focusedViaClick === undefined) { if (el.dataset.focusedViaClick === undefined) {
el.dataset.focusedViaClick = ''; el.dataset.focusedViaClick = '';
@ -387,7 +390,7 @@ function focusAccessibility() {
return; return;
} }
let el = document.activeElement; let el = document.activeElement;
if (!el || !focusAccessibility.ELEMENTS.includes(el.localName)) { if (!el || isOutlineAllowed(el)) {
return; return;
} }
if (el.dataset.focusedViaClick !== undefined) { if (el.dataset.focusedViaClick !== undefined) {