Skip to content

Commit 077dd9c

Browse files
esokulluesokullu
committed
Fix hero keyboard navigation scope
1 parent dbef606 commit 077dd9c

17 files changed

Lines changed: 46 additions & 16 deletions

File tree

‎test/run.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6212,6 +6212,20 @@ test('logo metadata and generated icon assets use the correct canonical artwork
62126212
}
62136213
});
62146214

6215+
test('hero scene arrow keys include the focused dot navigation in their scope', () => {
6216+
const template = fs.readFileSync(path.join(ROOT, 'web/build/template.html'), 'utf8');
6217+
assert.match(
6218+
template,
6219+
/const focusScope = stage\.closest\('\.hero-visual'\) \|\| stage;/,
6220+
'hero keyboard navigation should scope focus to the stage and its sibling dot navigation',
6221+
);
6222+
assert.match(
6223+
template,
6224+
/if \(!hovering && !focusScope\.contains\(active\)\) return;/,
6225+
'focused scene dots should be allowed to use Left/Right navigation without pointer hover',
6226+
);
6227+
});
6228+
62156229
test('sidepanel awaits onboarding completion persistence before hiding', () => {
62166230
for (const [label, panelRel] of [
62176231
['chrome', 'src/chrome/src/ui/sidepanel.js'],

‎web/ar/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>تنبيه أمان مهم</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>تنبيه أمان مهم</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/build/template.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2825,6 +2825,7 @@ <h4>{{t:safety.heading}}</h4>
28252825
const stack = document.getElementById('mockup-stack');
28262826
if (!stack) return;
28272827
const stage = stack.closest('.mockup-stage') || stack;
2828+
const focusScope = stage.closest('.hero-visual') || stage;
28282829
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
28292830
const dots = document.querySelectorAll('.scene-nav .scene-dot');
28302831
const arrows = document.querySelectorAll('.scene-arrow');
@@ -2907,7 +2908,7 @@ <h4>{{t:safety.heading}}</h4>
29072908
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
29082909
active.tagName === 'SELECT' || active.isContentEditable);
29092910
if (typing) return;
2910-
if (!hovering && !stage.contains(active)) return;
2911+
if (!hovering && !focusScope.contains(active)) return;
29112912
// Physical Left/Right always matches the visual prev/next placement,
29122913
// which itself flips for RTL via CSS logical properties.
29132914
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/es/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>Aviso de seguridad importante</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>Aviso de seguridad importante</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/fr/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>Avertissement important</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>Avertissement important</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/he/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>הודעת אבטחה חשובה</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>הודעת אבטחה חשובה</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/id/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>Pemberitahuan Keamanan Penting</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>Pemberitahuan Keamanan Penting</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>Important Safety Notice</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>Important Safety Notice</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/ja/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>重要な安全に関する注意</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>重要な安全に関する注意</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

‎web/ko/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3063,6 +3063,7 @@ <h4>중요한 안전 안내</h4>
30633063
const stack = document.getElementById('mockup-stack');
30643064
if (!stack) return;
30653065
const stage = stack.closest('.mockup-stage') || stack;
3066+
const focusScope = stage.closest('.hero-visual') || stage;
30663067
const scenes = stack.querySelectorAll(':scope > .browser-mockup');
30673068
const dots = document.querySelectorAll('.scene-nav .scene-dot');
30683069
const arrows = document.querySelectorAll('.scene-arrow');
@@ -3145,7 +3146,7 @@ <h4>중요한 안전 안내</h4>
31453146
const typing = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
31463147
active.tagName === 'SELECT' || active.isContentEditable);
31473148
if (typing) return;
3148-
if (!hovering && !stage.contains(active)) return;
3149+
if (!hovering && !focusScope.contains(active)) return;
31493150
// Physical Left/Right always matches the visual prev/next placement,
31503151
// which itself flips for RTL via CSS logical properties.
31513152
const visualStep = e.key === 'ArrowLeft' ? -1 : 1;

0 commit comments

Comments
 (0)