Feat: Rework cart drawer line layout and order confirmation page

resources/js/checkout/bbk-cart-controller.js

@@ -9,11 +9,13 @@ import { csrfToken } from './csrf'
 // - handles the in-drawer quantity / remove forms (fetch + method spoofing)
 // - re-emits `bbk-cart:updated` {count, total} after every render so the host
 //   (e.g. the header bag icon) can react
+// - dialog focus handling: focus moves into the panel on open, Tab is kept
+//   inside it, and focus returns to whatever opened it on close
 //
 // Appearance is entirely CSS-driven: open state is the data-bbk-cart-state
 // attribute on the root, nothing here touches styles or class lists.
 export default class extends Controller {
-    static targets = ['panel', 'body', 'error']
+    static targets = ['panel', 'body', 'error', 'heading', 'status']
 
     connect() {
         this.onChanged = this.onChanged.bind(this)
@@ -40,19 +42,31 @@ export default class extends Controller {
     }
 
     onKeydown(event) {
-        if (event.key === 'Escape' && !this.element.hidden) this.close()
+        // Only the drawer instance is a dialog — the checkout page's summary
+        // reuses this controller without a panel.
+        if (!this.hasPanelTarget || this.element.hidden) return
+
+        if (event.key === 'Escape') this.close()
+        if (event.key === 'Tab') this.trapFocus(event)
     }
 
     open() {
         if (!this.element.hidden) return
+        this.returnFocusTo = document.activeElement
         this.element.hidden = false
         // Next frame, so the panel transitions from its off-canvas start.
-        requestAnimationFrame(() => this.element.setAttribute('data-bbk-cart-state', 'open'))
+        requestAnimationFrame(() => {
+            this.element.setAttribute('data-bbk-cart-state', 'open')
+            if (this.hasHeadingTarget) this.headingTarget.focus({ preventScroll: true })
+        })
     }
 
     close() {
         this.element.removeAttribute('data-bbk-cart-state')
 
+        if (this.returnFocusTo?.isConnected) this.returnFocusTo.focus({ preventScroll: true })
+        this.returnFocusTo = null
+
         const panel = this.panelTarget
         const done = () => {
             this.element.hidden = true
@@ -132,6 +146,28 @@ export default class extends Controller {
         }
     }
 
+    // aria-modal hides the page from screen readers but doesn't stop Tab from
+    // walking out of the panel into it — wrap at either end instead.
+    trapFocus(event) {
+        const focusable = [...this.panelTarget.querySelectorAll(
+            'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        )].filter((el) => !el.closest('[hidden], [aria-hidden="true"]'))
+
+        if (!focusable.length) return
+
+        const first = focusable[0]
+        const last = focusable[focusable.length - 1]
+        const active = document.activeElement
+
+        if (event.shiftKey && (active === first || !this.panelTarget.contains(active) || (this.hasHeadingTarget && active === this.headingTarget))) {
+            event.preventDefault()
+            last.focus()
+        } else if (!event.shiftKey && (active === last || !this.panelTarget.contains(active))) {
+            event.preventDefault()
+            first.focus()
+        }
+    }
+
     showError(message) {
         if (!this.hasErrorTarget || !message) return
         this.errorTarget.textContent = message
@@ -144,10 +180,53 @@ export default class extends Controller {
     }
 
     replaceBody(html) {
+        const restore = this.focusSnapshot()
         this.bodyTarget.innerHTML = html
+        restore()
+        this.announce()
         this.emitUpdated(this.bodyTarget.querySelector('[data-bbk-cart-count]'))
     }
 
+    // Swapping the body destroys whatever control had focus (a qty stepper,
+    // a remove button, the coupon field), dropping keyboard/screen-reader
+    // users back at the top of the document. Returns a callback that, after
+    // the swap, re-focuses the equivalent control in the new markup — or the
+    // heading, when that control is gone (e.g. its line was just removed).
+    focusSnapshot() {
+        const active = document.activeElement
+        if (!active || !this.bodyTarget.contains(active)) return () => {}
+
+        let selector = null
+        if (active.id) {
+            selector = `#${CSS.escape(active.id)}`
+        } else {
+            const lineId = active.closest('[data-bbk-line-id]')?.dataset.bbkLineId
+            const dir = active.dataset.bbkCartDirParam
+            const control = ['bbk-cart-qty-input', 'bbk-cart-qty-btn', 'bbk-cart-item-remove']
+                .find((name) => active.classList.contains(name))
+
+            if (lineId && control) {
+                selector = `[data-bbk-line-id="${CSS.escape(lineId)}"] .${control}`
+                    + (dir ? `[data-bbk-cart-dir-param="${CSS.escape(dir)}"]` : '')
+            }
+        }
+
+        return () => {
+            const target = selector && this.bodyTarget.querySelector(selector)
+            if (target) target.focus({ preventScroll: true })
+            else if (this.hasHeadingTarget) this.headingTarget.focus({ preventScroll: true })
+        }
+    }
+
+    // Polite "Cart updated" — cleared first so an identical message is
+    // re-announced on the next update.
+    announce() {
+        if (!this.hasStatusTarget) return
+        const message = this.statusTarget.dataset.bbkCartMessage || ''
+        this.statusTarget.textContent = ''
+        requestAnimationFrame(() => { this.statusTarget.textContent = message })
+    }
+
     emitUpdated(node) {
         if (!node) return