style(ui): format surface keyboard component and tests

This commit is contained in:
Sameh Khamis committed 2026-09-12 18:45:30 -07:00
1 parent e1ffb9c572
commit bd6ba07878
3 files changed
+55 -14

No files matched your search

+3 -1
View File
@@ -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"
] ]
+7 -2
View File
@@ -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];
+45 -11
View File
@@ -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', () => {