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

Mark a section picker's current page as the page, with its badge

Browse Source 
The phone picker of <x-section-nav> drew the current section as a checked
menuitemcheckbox in tertiary-container, which a screen reader announces as a
choice rather than where you are, and it dropped the sections' badges, so an
open support count showed on the tabs but not on a phone. <x-menu-item> gains
current (aria-current="page", the selected shape in secondary-container,
the navigation indicator's colour) and badge (a dot or a count at the end of
the row), and the picker uses both.

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 19:56:54 +02:00
co-authored by Claude Opus 5
parent 65788d0c61
commit 869ccdf447
5 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/MenuTest.php
+14
View File
@@ -53,6 +53,20 @@ it('makes a selectable item a menuitemcheckbox', function () {
->toContain('aria-checked="false"');
});
it('marks the page an item leads to, and carries a badge', function () {
$html = (string) $this->blade('<x-menu-item label="Support" icon="support" link="/admin/support" current badge="3" />');
expect($html)
->toContain('role="menuitem"')
->toContain('aria-current="page"')
->not->toContain('aria-checked')
->toContain('bg-secondary-container text-on-secondary-container')
->toContain('>3<')
->and((string) $this->blade('<x-menu-item label="Users" link="/admin/users" />'))
->not->toContain('aria-current')
->not->toContain('secondary-container');
});
it('links an item, and keeps a disabled one out of reach', function () {
$this->blade('<x-menu-item label="Settings" link="/settings" />')
->assertSee('href="/settings"', false)