noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep aria-pressed off a selected link button

Browse Source 
ARIA defines aria-pressed for buttons, not links, so a selected <x-button
link> keeps the selected look without announcing itself as a toggle; the
caller marks the page with aria-current.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 21:36:35 +02:00
co-authored by Claude Opus 5
parent e6f4357a2a
commit 433ddb2baa
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/button.blade.php
+5 -3
View File
@@ -13,8 +13,8 @@
With an `icon` and no label it is an icon button: `width` is `narrow`, `default` or `wide`, With an `icon` and no label it is an icon button: `width` is `narrow`, `default` or `wide`,
`variant="text"` is M3's standard icon button, and the tooltip or label names it for screen `variant="text"` is M3's standard icon button, and the tooltip or label names it for screen
readers. `selected` makes it a toggle: `true` or `false` sets `aria-pressed` and M3's readers. `selected` makes it a toggle: `true` or `false` sets `aria-pressed` (not on a `link`,
selected colours, and a selected round button turns square (a selected square icon button which is no toggle — give it `aria-current` instead) and M3's selected colours, and a selected round button turns square (a selected square icon button
turns round). Text buttons are not toggles in M3; a selected one takes the tonal container. turns round). Text buttons are not toggles in M3; a selected one takes the tonal container.
Values from androidx Compose Material 3's tokens (Button*Tokens, *IconButtonTokens, Values from androidx Compose Material 3's tokens (Button*Tokens, *IconButtonTokens,
@@ -191,7 +191,9 @@
'type' => $isLink ? null : $type, 'type' => $isLink ? null : $type,
'disabled' => ! $isLink && $disabled ? true : null, 'disabled' => ! $isLink && $disabled ? true : null,
'aria-label' => $iconOnly && ! $attributes->has('aria-label') ? ($label ?? $tip) : null, 'aria-label' => $iconOnly && ! $attributes->has('aria-label') ? ($label ?? $tip) : null,
'aria-pressed' => $selected === null ? null : ($selected ? 'true' : 'false'), // A link is not a toggle: ARIA defines aria-pressed for buttons only. A selected link keeps
// the selected look; `aria-current` is the caller's to set (`:aria-current="'page'"`).
'aria-pressed' => $selected === null || $isLink ? null : ($selected ? 'true' : 'false'),
'data-icon-button' => $iconOnly ? true : null, 'data-icon-button' => $iconOnly ? true : null,
'wire:loading.attr' => $spinnerTarget ? 'disabled' : null, 'wire:loading.attr' => $spinnerTarget ? 'disabled' : null,
'wire:target' => $spinnerTarget, 'wire:target' => $spinnerTarget,
tests/Feature/Components/ButtonTest.php
+7
View File
@@ -156,3 +156,10 @@ it('submits a form when asked', function () {
$this->blade('<x-button label="Save" type="submit" />') $this->blade('<x-button label="Save" type="submit" />')
->assertSee('type="submit"', false); ->assertSee('type="submit"', false);
}); });
it('keeps aria-pressed off a selected link, which is not a toggle', function () {
expect((string) $this->blade('<x-button label="Plans" link="/plans" :selected="true" />'))
->not->toContain('aria-pressed')
->and((string) $this->blade('<x-button label="Bold" :selected="true" />'))
->toContain('aria-pressed="true"');
});