From 3f1266c1114f2259a36e4355473e2d72679fdd8d Mon Sep 17 00:00:00 2001 From: "Mr. 42" Date: Tue, 24 Mar 2026 20:22:58 +0000 Subject: [PATCH 1/2] Add `tabIndex()` method to `Button` widget --- CHANGELOG.md | 2 +- src/Button.php | 22 ++++++++++++++++++++++ tests/ButtonTest.php | 14 ++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dd03be60..2ae17fd6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## 1.1.1 under development -- no changes in this release. +- Enh #305: Add `tabIndex()` method to `Button` widget (@Mister-42) ## 1.1.0 March 06, 2026 diff --git a/src/Button.php b/src/Button.php index 6683f621..095f88c9 100644 --- a/src/Button.php +++ b/src/Button.php @@ -472,6 +472,28 @@ public function size(?ButtonSize $size): self return $this->addClass($size?->value); } + /** + * The `tabindex` attribute indicates that its element can be focused, and where it participates in sequential + * keyboard navigation (usually with the Tab key, hence the name). + * + * It accepts an integer as a value, with different results depending on the integer's value: + * + * - A negative value (usually `tabindex="-1"`) means that the element is not reachable via sequential keyboard + * navigation, but could be focused with Javascript or visually. It's mostly useful to create accessible widgets + * with JavaScript. + * - `tabindex="0"` means that the element should be focusable in sequential keyboard navigation, but its order is + * defined by the document's source order. + * - A positive value means the element should be focusable in sequential keyboard navigation, with its order + * defined by the value of the number. That is, `tabindex="4"` is focused before `tabindex="5"`, but after + * `tabindex="3"`. + * + * @link https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex + */ + public function tabIndex(?int $value): self + { + return $this->attribute('tabindex', $value); + } + /** * Sets the toggle behavior by the `data-bs-toggle` attribute, enabling interactive functionality such as `button`, * `dropdown`, `modal`, and `tooltip`. diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index 2844053c..ef19e537 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -726,4 +726,18 @@ public function testVariant(?ButtonVariant $buttonVariant, string $expected): vo ->render(), ); } + + public function testTabIndex(): void + { + Assert::equalsWithoutLE( + <<Send + HTML, + Button::widget() + ->id(false) + ->label('Send') + ->tabIndex(42) + ->render(), + ); + } } From 728b47d754927d942039c0ca833b29815993d1fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B2=D0=B0=D0=BD?= <68641750+Mister-42@users.noreply.github.com> Date: Wed, 25 Mar 2026 21:16:04 +0100 Subject: [PATCH 2/2] Update src/Button.php Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/Button.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button.php b/src/Button.php index 095f88c9..bc8c3ffe 100644 --- a/src/Button.php +++ b/src/Button.php @@ -479,7 +479,7 @@ public function size(?ButtonSize $size): self * It accepts an integer as a value, with different results depending on the integer's value: * * - A negative value (usually `tabindex="-1"`) means that the element is not reachable via sequential keyboard - * navigation, but could be focused with Javascript or visually. It's mostly useful to create accessible widgets + * navigation, but could be focused with JavaScript or visually. It's mostly useful to create accessible widgets * with JavaScript. * - `tabindex="0"` means that the element should be focusable in sequential keyboard navigation, but its order is * defined by the document's source order.