Update tabbable and focus-trap dependencies in focus plugin (#4737)

* Update `tabbable` and `focus-trap` dependencies in focus plugin

Update `tabbable` from ^5.3.3 to ^6.4.0 and `focus-trap` from ^6.9.4 to ^8.0.0.

These packages only support their most recently published version, so staying
on older versions means no security patches. This addresses concerns raised
in governmental security audits.

Breaking changes in these packages (IE support dropped, displayCheck defaults)
do not affect Alpine's usage patterns.

* Add tests for radio buttons, inert attribute, and dynamic elements

These tests cover scenarios related to the tabbable/focus-trap upgrade:

- x-trap works with radio button groups
- $focus.focusables excludes elements with inert attribute (new feature)
- x-trap handles dynamically added focusable elements

* Review fixes: restore lockfile name field to 'alpine'

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Caleb Porzio <calebporzio@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

package-lock.json

@@ -14,7 +14,7 @@
     "module": "dist/module.esm.js",
     "unpkg": "dist/cdn.min.js",
     "dependencies": {
-        "focus-trap": "^6.9.4",
-        "tabbable": "^5.3.3"
+        "focus-trap": "^8.0.0",
+        "tabbable": "^6.4.0"
     }
 }

packages/focus/package.json

@@ -397,3 +397,67 @@ test('can disable x-trap autofocus with .noautofocus modifier',
         get('#2').should(haveFocus())
     }
 )
+
+test('x-trap works with radio button groups',
+    [html`
+        <div x-data="{ open: false }">
+            <input type="text" id="outside">
+            <button id="open" @click="open = true">open</button>
+            <div x-trap="open">
+                <input type="radio" name="choice" id="radio1" value="1" checked>
+                <input type="radio" name="choice" id="radio2" value="2">
+                <input type="radio" name="choice" id="radio3" value="3">
+                <button @click="open = false" id="close">close</button>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('#outside').focus()
+        get('#outside').should(haveFocus())
+        get('#open').click()
+        // Focus should be inside the trap (on the checked radio)
+        get('#radio1').should(haveFocus())
+        // Close and verify focus returns outside the trap
+        get('#close').click()
+        get('#open').should(haveFocus())
+    },
+)
+
+test('$focus.focusables excludes elements with inert attribute',
+    [html`
+        <div x-data>
+            <h1 x-text="$focus.within($refs.container).focusables().length"></h1>
+            <div x-ref="container">
+                <button>1</button>
+                <button inert>2</button>
+                <button>3</button>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('h1').should(haveText('2'))
+    },
+)
+
+test('x-trap handles dynamically added focusable elements',
+    [html`
+        <div x-data="{ open: false }">
+            <button id="open" @click="open = true">open</button>
+            <div x-trap="open" x-ref="trap">
+                <button id="first">first</button>
+                <button id="last" @click="$refs.trap.insertAdjacentHTML('beforeend', '<button id=dynamic>dynamic</button>')">add element</button>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('#open').click()
+        get('#first').should(haveFocus())
+        cy.focused().tab()
+        get('#last').should(haveFocus())
+        get('#last').click()
+        cy.focused().tab()
+        get('#dynamic').should(haveFocus())
+        cy.focused().tab()
+        get('#first').should(haveFocus())
+    },
+)