$focus: Add 'onlyTabbables' modifier

packages/docs/src/en/plugins/focus.md

@@ -311,6 +311,8 @@ This plugin offers many smaller utilities for managing focus within a page. Thes
 | `focus(el)`   | Focus the passed element (handling annoyances internally: using nextTick, etc.) |
 | `focusable(el)`   | Detect whether or not an element is focusable |
 | `focusables()`   | Get all "focusable" elements within the current element |
+| `tabbables()`   | Get all "tabbable" elements within the current element |
+| `onlyTabbables()` | Specifies that any focus "action" should only act on `focusable` elements. (next, previous, within, etc.) |
 | `focused()`   | Get the currently focused element on the page |
 | `lastFocused()`   | Get the last focused element on the page |
 | `within(el)`   | Specify an element to scope the `$focus` magic to (the current element by default) |

packages/focus/src/index.js

@@ -1,5 +1,5 @@
 import { createFocusTrap } from 'focus-trap'
-import { focusable, isFocusable } from 'tabbable'
+import { focusable, tabbable, isFocusable, isTabbable } from 'tabbable'
 
 export default function (Alpine) {
     let lastFocused
@@ -16,14 +16,19 @@ export default function (Alpine) {
         return {
             __noscroll: false,
             __wrapAround: false,
+            __tabbableOnly: false,
             within(el) { within = el; return this },
             withoutScrolling() { this.__noscroll = true; return this },
             noscroll() { this.__noscroll = true; return this },
             withWrapAround() { this.__wrapAround = true; return this },
             wrap() { return this.withWrapAround() },
+            onlyTabbables() { this.__tabbableOnly = true; return this },
             focusable(el) {
                 return isFocusable(el)
             },
+            tabbable(el) {
+                return isTabbable(el)
+            },
             previouslyFocused() {
                 return lastFocused
             },
@@ -38,7 +43,14 @@ export default function (Alpine) {
 
                 return focusable(within, { displayCheck: 'none' })
             },
-            all() { return this.focusables() },
+            tabbables() {
+                if (Array.isArray(within)) return within
+
+                return tabbable(within, { displayCheck: 'none' })
+            },
+            all() {
+                return this.__tabbableOnly ? this.tabbables() : this.focusables()
+            },
             isFirst(el) {
                 let els = this.all()
 

tests/cypress/integration/plugins/focus.spec.js

@@ -200,6 +200,19 @@ test('$focus.focusable',
     },
 )
 
+test('$focus.tabbables.focusable',
+    [html`
+        <div x-data>
+            <button id="1" tabindex="-1" x-text="$focus.tabbable($el)"></button>
+            <button id="2" x-text="$focus.tabbable($el)"></button>
+        </div>
+    `],
+    ({ get }) => {
+        get('#1').should(haveText('false'))
+        get('#2').should(haveText('true'))
+    },
+)
+
 test('$focus.focusables',
     [html`
         <div x-data>
@@ -294,6 +307,38 @@ test('$focus.prev',
     },
 )
 
+test('$focus.onlyTabbables.next',
+    [html`
+        <div x-data>
+            <div x-ref="first">
+                <button id="1" @click="$focus.onlyTabbables().within($refs.first).next(); $nextTick(() => $el.textContent = $focus.focused().textContent)">1</button>
+                <button tabindex="-1">2</button>
+                <button>3</button>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('#1').click()
+        get('#1').should(haveText('3'))
+    },
+)
+
+test('$focus.onlyTabbables.prev',
+    [html`
+        <div x-data>
+            <div x-ref="first">
+                <button>3</button>
+                <button tabindex="-1">2</button>
+                <button id="1" @click="$focus.onlyTabbables().within($refs.first).prev(); $nextTick(() => $el.textContent = $focus.focused().textContent)">1</button>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('#1').click()
+        get('#1').should(haveText('3'))
+    },
+)
+
 test('$focus.wrap',
     [html`
         <div x-data>