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

Finish the keyboards, and say a state once

Browse Source 
Shift+M and Shift+Y reach the month and year dropdowns, which is M3's
date picker keyboard table; Home and End go to the ends of an open
combobox list, and stay the field's own caret keys when it is closed. The
password reveal drops aria-pressed and keeps only its flipping label, so
a screen reader hears the state once rather than twice and inverted. The
radio's `inline` now says that M3 cautions against a row and wants an
option chosen on load.

Plan step 20, findings IN-22, IN-23, IN-28 and IN-29.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:13:00 +02:00
co-authored by Claude Fable 5.1
parent 856b6f476b
commit 0074f9bd5c
10 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/choices.blade.php
+14 -2
View File
@@ -7,8 +7,10 @@
you are free" is seven filter chips, not a dropdown opened seven times. `single` makes them
choice chips, one on at a time.
- **`searchable`**, for a list too long to lay out — four hundred time zones. A text field
that filters as you type, with the matches in M3's menu under it: the arrow keys move,
Enter chooses, Escape puts the field back. One value only. The list is a popover in the top
that filters as you type, with the matches in M3's menu under it: the arrow keys move, Home
and End go to the ends of the open list (with it closed they are the field's own and move the
caret), Enter chooses, Escape puts the field back — WAI-ARIA's combobox keyboard, since M3
has no combobox. One value only. The list is a popover in the top
layer, placed by CSS anchor positioning, so a card's clipping never cuts it off. `icon`,
`variant` and `placeholder` are the field's.
@@ -104,6 +106,14 @@
this.active = (this.active + step + this.filtered.length) % this.filtered.length;
this.$nextTick(() => this.reveal());
},
// The APG combobox puts Home and End at the ends of the open popup. With the popup
// closed they are the text field's own, and move the caret.
jump(event, last) {
if (! this.open || this.filtered.length === 0) return;
event.preventDefault();
this.active = last ? this.filtered.length - 1 : 0;
this.$nextTick(() => this.reveal());
},
choose(option) {
if (! option || option.disabled) return;
this.value = option.value;
@@ -139,6 +149,8 @@
x-on:input="open = true; active = 0"
x-on:keydown.arrow-down.prevent="move(1)"
x-on:keydown.arrow-up.prevent="move(-1)"
x-on:keydown.home="jump($event, false)"
x-on:keydown.end="jump($event, true)"
x-on:keydown.enter.prevent="choose(filtered[active])"
x-on:keydown.escape="close()"
x-on:keydown.tab="close()"