@bytebrand/fe-ui-core-autobahn 1.0.158 → 1.0.159

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.158",
-  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
-  "main": "index.ts",
-  "license": "UNLICENSED",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.159",
+  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/ui/Modal.tsx

@@ -136,7 +136,10 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
 
-    // focus the dialog surface, not its first control: a header icon would take the :focus-visible ring on open.
+    // move focus to the first control in the body/footer (an input, a link, a button) so forms are
+    // ready to type into and browser autofill can offer itself; the head row (close + headerAction
+    // icons) is skipped so a header icon never takes the :focus-visible ring on open. Falls back to
+    // the surface itself when the body has nothing focusable.
     // { preventScroll: true }: this runs at the very first animation frame of the mobile
     // sheet's own mmodal-sheet-up entrance (md3.css) — at that instant the surface's actual
     // computed transform is still the keyframe's `from` state (translateY(100%), pushed
@@ -148,7 +151,12 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     // skips that native auto-scroll entirely, so the CSS animation alone moves the sheet
     // (same fix as fe-main's BaseModal.tsx, which hit this same glitch first).
     const surface = surfaceRef.current;
-    if (surface) surface.focus({ preventScroll: true });
+    if (surface) {
+      const first = Array.prototype.slice
+        .call(surface.querySelectorAll<HTMLElement>(FOCUSABLE))
+        .find((el: HTMLElement) => !el.closest('.mmodal-head'));
+      (first || surface).focus({ preventScroll: true });
+    }
 
     return () => {
       document.body.style.overflow = prevOverflow;