mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-06 11:24:00 +00:00
style(ui): format surface keyboard component and tests
This commit is contained in:
1 parent
e1ffb9c572
commit
bd6ba07878
3 files changed
+55
-14
No files matched your search
@@ -120,5 +120,7 @@
|
|||||||
"src/search/google.js",
|
"src/search/google.js",
|
||||||
"src/keylessGeocoder.js",
|
"src/keylessGeocoder.js",
|
||||||
"src/standalone/placeSearch.js",
|
"src/standalone/placeSearch.js",
|
||||||
"src/ui/panelDisclosure.js"
|
"src/ui/panelDisclosure.js",
|
||||||
|
"src/ui/surfaceKeyboard.js",
|
||||||
|
"src/ui/surfaceKeyboard.test.mjs"
|
||||||
]
|
]
|
||||||
@@ -34,8 +34,13 @@ export function createSurfaceKeyboard({
|
|||||||
}
|
}
|
||||||
if (event.key !== 'Tab') return;
|
if (event.key !== 'Tab') return;
|
||||||
const order = [
|
const order = [
|
||||||
...root.querySelectorAll('button, input, [href], [tabindex]:not([tabindex="-1"])'),
|
...root.querySelectorAll(
|
||||||
].filter((node) => !node.hasAttribute('disabled') && node.getClientRects().length > 0);
|
'button, input, [href], [tabindex]:not([tabindex="-1"])',
|
||||||
|
),
|
||||||
|
].filter(
|
||||||
|
(node) =>
|
||||||
|
!node.hasAttribute('disabled') && node.getClientRects().length > 0,
|
||||||
|
);
|
||||||
if (!order.length) return;
|
if (!order.length) return;
|
||||||
const first = order[0];
|
const first = order[0];
|
||||||
const last = order[order.length - 1];
|
const last = order[order.length - 1];
|
||||||
|
|||||||
@@ -22,9 +22,16 @@ function fixture() {
|
|||||||
hidden: false,
|
hidden: false,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
focusCalls: [],
|
focusCalls: [],
|
||||||
hasAttribute(name) { return name === 'disabled' && this.disabled; },
|
hasAttribute(name) {
|
||||||
getClientRects() { return this.hidden ? [] : [{}]; },
|
return name === 'disabled' && this.disabled;
|
||||||
focus(options) { documentRef.activeElement = this; this.focusCalls.push(options); },
|
},
|
||||||
|
getClientRects() {
|
||||||
|
return this.hidden ? [] : [{}];
|
||||||
|
},
|
||||||
|
focus(options) {
|
||||||
|
documentRef.activeElement = this;
|
||||||
|
this.focusCalls.push(options);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const opener = node();
|
const opener = node();
|
||||||
const fallback = node();
|
const fallback = node();
|
||||||
@@ -39,7 +46,9 @@ function fixture() {
|
|||||||
};
|
};
|
||||||
let visible = true;
|
let visible = true;
|
||||||
let escapes = 0;
|
let escapes = 0;
|
||||||
let onEscape = () => { escapes += 1; };
|
let onEscape = () => {
|
||||||
|
escapes += 1;
|
||||||
|
};
|
||||||
const controller = createSurfaceKeyboard({
|
const controller = createSurfaceKeyboard({
|
||||||
root,
|
root,
|
||||||
isActive: () => visible,
|
isActive: () => visible,
|
||||||
@@ -51,8 +60,12 @@ function fixture() {
|
|||||||
key,
|
key,
|
||||||
defaultPrevented: false,
|
defaultPrevented: false,
|
||||||
stopped: false,
|
stopped: false,
|
||||||
preventDefault() { this.defaultPrevented = true; },
|
preventDefault() {
|
||||||
stopPropagation() { this.stopped = true; },
|
this.defaultPrevented = true;
|
||||||
|
},
|
||||||
|
stopPropagation() {
|
||||||
|
this.stopped = true;
|
||||||
|
},
|
||||||
...extra,
|
...extra,
|
||||||
});
|
});
|
||||||
const send = (key, extra) => {
|
const send = (key, extra) => {
|
||||||
@@ -60,10 +73,27 @@ function fixture() {
|
|||||||
for (const listener of [...listeners]) listener(e);
|
for (const listener of [...listeners]) listener(e);
|
||||||
return e;
|
return e;
|
||||||
};
|
};
|
||||||
return { controller, listeners, documentRef, opener, fallback, first, middle, last, node, event, send,
|
return {
|
||||||
setVisible(value) { visible = value; },
|
controller,
|
||||||
setControls(value) { controls = value; },
|
listeners,
|
||||||
setEscape(value) { onEscape = value; },
|
documentRef,
|
||||||
|
opener,
|
||||||
|
fallback,
|
||||||
|
first,
|
||||||
|
middle,
|
||||||
|
last,
|
||||||
|
node,
|
||||||
|
event,
|
||||||
|
send,
|
||||||
|
setVisible(value) {
|
||||||
|
visible = value;
|
||||||
|
},
|
||||||
|
setControls(value) {
|
||||||
|
controls = value;
|
||||||
|
},
|
||||||
|
setEscape(value) {
|
||||||
|
onEscape = value;
|
||||||
|
},
|
||||||
escapes: () => escapes,
|
escapes: () => escapes,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -97,7 +127,11 @@ test('Tab enters from outside in either direction and wraps only at an edge', ()
|
|||||||
f.opener.focus();
|
f.opener.focus();
|
||||||
f.send('Tab', { shiftKey: true });
|
f.send('Tab', { shiftKey: true });
|
||||||
assert.equal(f.documentRef.activeElement, f.last);
|
assert.equal(f.documentRef.activeElement, f.last);
|
||||||
assert.equal(f.last.focusCalls.at(-1), undefined, 'wrapping permits native scroll into view');
|
assert.equal(
|
||||||
|
f.last.focusCalls.at(-1),
|
||||||
|
undefined,
|
||||||
|
'wrapping permits native scroll into view',
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Tab uses current controls and skips hidden/disabled nodes without changing native middle movement', () => {
|
test('Tab uses current controls and skips hidden/disabled nodes without changing native middle movement', () => {
|
||||||
|
|||||||
Reference in new issue
Block a user