fix(forms): focus password fields before visibility toggles

Render password inputs and textareas before their visibility toggle buttons so tab navigation reaches the editable field first.
This commit is contained in:
Andras Bacsai committed 2026-06-02 17:09:14 +02:00
1 parent 40294bc3b3
commit a3c80c9778
4 files changed
+63 -45

No files matched your search

@@ -21,6 +21,12 @@ it('renders password input with Alpine-managed visibility state', function () {
->not->toContain('changePasswordFieldType');
});
it('renders password input before visibility toggle in tab order', function () {
$html = Blade::render('<x-forms.input type="password" id="secret" />');
expect(strpos($html, '<input'))->toBeLessThan(strpos($html, 'aria-label="Toggle password visibility"'));
});
it('renders password textarea with Alpine-managed visibility state', function () {
$html = Blade::render('<x-forms.textarea type="password" id="secret" />');
@@ -31,6 +37,12 @@ it('renders password textarea with Alpine-managed visibility state', function ()
->not->toContain('changePasswordFieldType');
});
it('renders password textarea input before visibility toggle in tab order', function () {
$html = Blade::render('<x-forms.textarea type="password" id="secret" />');
expect(strpos($html, '<input'))->toBeLessThan(strpos($html, 'aria-label="Toggle password visibility"'));
});
it('renders textarea without monospace classes by default', function () {
$html = Blade::render('<x-forms.textarea id="notes" />');
@@ -53,3 +65,9 @@ it('resets password visibility on success event for env-var-input', function ()
->toContain("x-on:click=\"type = type === 'password' ? 'text' : 'password'\"")
->toContain('x-bind:type="type"');
});
it('renders env var password input before visibility toggle in tab order', function () {
$html = Blade::render('<x-forms.env-var-input type="password" id="secret" />');
expect(strpos($html, '<input'))->toBeLessThan(strpos($html, 'aria-label="Toggle password visibility"'));
});