rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix intrusive auto-focus on cookie banner initial load

Browse Source 
Only focus the banner on user-initiated re-opens (hidden -> banner),
not on the initial page load (loading -> banner). Also use
preventScroll to avoid jarring scroll jumps on programmatic focus.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-24 18:55:34 +04:00
parent 351cd49162
commit 56a32fe162
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/cookie-banner/src/components/banner.ts
View File

@@ -25,9 +25,9 @@ const REQUIRED_BUTTONS = [
export class ProboBanner extends ProboElement { export class ProboBanner extends ProboElement {
private root: ProboRootElement | null = null; private root: ProboRootElement | null = null;
private onStateChange = (e: Event): void => { private onStateChange = (e: Event): void => {
const { state } = (e as CustomEvent).detail; const { state, prev } = (e as CustomEvent).detail;
this.hidden = state !== "banner"; this.hidden = state !== "banner";
if (state === "banner") { if (state === "banner" && prev !== "loading") {
this.focusFirst(); this.focusFirst();
} }
}; };

2
packages/cookie-banner/src/components/base.ts
View File

@@ -26,7 +26,7 @@ export class ProboElement extends HTMLElement {
protected focusFirst(): void { protected focusFirst(): void {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const el = this.querySelector<HTMLElement>(FOCUSABLE); const el = this.querySelector<HTMLElement>(FOCUSABLE);
el?.focus(); el?.focus({ preventScroll: true });
}); });
} }