Andreas Reinhold / reiniandClaude Fable 5.1
c8357cfd4d
M3 § Chips, Accessibility asks that a row which overflows horizontally carry a visible affordance; `<x-chip-set scroll>` faded its edges and left it there (plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). Where the pointer is fine, and so there is no swipe to reach for, a button now sits over each fading edge and scrolls the row by most of its width. They are pointer affordances only — no tab stops, since the arrow keys already walk every chip — and the row's scroll padding grows on a fine pointer so a chip the keyboard reaches clears the buttons as well as the fade. The scroller became a ref, because the buttons stand outside it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
96 lines
4.7 KiB
PHP
96 lines
4.7 KiB
PHP
{{-- A set of M3 chips: a row that wraps, 8px apart, named for screen readers as a group.
|
|
|
|
<x-chip-set label="File types" hint="Show only these" error-field="kinds">
|
|
<x-chip type="filter" label="Photos" value="photos" wire:model.live="kinds" />
|
|
<x-chip type="filter" label="Documents" value="documents" wire:model.live="kinds" />
|
|
</x-chip-set>
|
|
|
|
`label` is shown above the row and names the group; without it, pass `aria-label`. `hint`
|
|
sits under it, and a validation message for `error-field` (the property the chips bind, and
|
|
its items: `kinds` and `kinds.*`) replaces the hint.
|
|
|
|
`scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a narrow
|
|
screen. M3's chips accessibility page asks that a row which overflows say so, so the edge it
|
|
can still scroll towards fades (resources/js/chips.js) and, where the pointer is fine and
|
|
there is no swipe to reach for, a button sits over each fading edge and scrolls the row by
|
|
most of its width. The buttons are pointer affordances only — `tabindex="-1"` and
|
|
`aria-hidden`, because the arrow keys already walk every chip and scroll each one clear of
|
|
the fade. Removing a focused input chip moves focus within the set.
|
|
|
|
The set is one tab stop and the arrow keys move between the chips inside it, with Home and End
|
|
at the ends — M3's chip keyboard table. Backspace and Delete still remove a focused input
|
|
chip. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'errorField' => null,
|
|
'scroll' => false,
|
|
])
|
|
|
|
@php
|
|
$key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
$messages = filled($errorField) && isset($errors)
|
|
? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorField), $errors->get($errorField.'.*')])))
|
|
: [];
|
|
$describedBy = $messages !== [] || filled($hint) ? "material-chip-set-{$key}-hint" : null;
|
|
@endphp
|
|
|
|
<div
|
|
role="group"
|
|
@if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
|
|
@if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
|
|
{{ $attributes->class('min-w-0') }}
|
|
>
|
|
@if (filled($label))
|
|
<p id="material-chip-set-{{ $key }}-label" class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</p>
|
|
@endif
|
|
|
|
@if ($scroll)
|
|
<div x-data="materialChipSet" class="relative">
|
|
<div
|
|
data-chip-set
|
|
x-ref="row"
|
|
x-on:keydown="key($event)"
|
|
x-on:focusin="rove($event.target)"
|
|
wire:ignore.self
|
|
class="peer -mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 pointer-fine:scroll-px-10 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
|
|
>
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
{{-- After the row, so each button can ask whether the row can still scroll its way. --}}
|
|
@foreach (['start' => 'chevron_left', 'end' => 'chevron_right'] as $edge => $glyph)
|
|
<button
|
|
type="button"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
data-chip-scroll="{{ $edge }}"
|
|
x-on:click="nudge('{{ $edge }}')"
|
|
@class([
|
|
'absolute inset-y-0 my-auto hidden size-8 place-items-center rounded-corner-full bg-surface-container-high text-on-surface-variant shadow-elevation-1',
|
|
'start-0 peer-data-scroll-start:pointer-fine:grid' => $edge === 'start',
|
|
'end-0 peer-data-scroll-end:pointer-fine:grid' => $edge === 'end',
|
|
])
|
|
>
|
|
<x-livewire-material::icon :name="$glyph" class="size-4.5 rtl:-scale-x-100" optical="20" />
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div data-chip-set x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)" class="flex flex-wrap gap-2">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $describedBy }}">
|
|
@foreach ($messages as $message)
|
|
<p class="mt-1 type-body-sm text-error">{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@elseif (filled($hint))
|
|
<p id="{{ $describedBy }}" class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
|
|
@endif
|
|
</div>
|