Fix intrusive auto-focus on cookie banner initial load

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>

packages/cookie-banner/src/components/banner.ts

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

packages/cookie-banner/src/components/base.ts

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