Andreas Reinhold / reiniandClaude Opus 5
79ca9a28b4
Plan step 38 review: the frame's structural rule that kept a section's own <h2> for screen readers (Tailwind's [&>section>h2]:sr-only before, a showcase.css rule during the rewrite) was removed as dead weight once every section had a real heading, so each page drew its title twice, the <h1> and an identical headline under it. The <h2>s are md-visually-hidden again, the frame's comment says why, and the section page test asserts it. The Layout section's description said "window size classes"; M3's term is breakpoints. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
44 lines
2.3 KiB
PHP
44 lines
2.3 KiB
PHP
{{-- One section of the showcase on a page of its own, with the way on to the next. The page's
|
|
heading names the section, so the section's own <h2> is `md-visually-hidden`: there for a
|
|
screen reader's outline of the <section>, not drawn a second time under the <h1>. --}}
|
|
|
|
@extends('livewire-material::showcase.layout')
|
|
|
|
@php
|
|
$keys = array_keys($sections);
|
|
$at = array_search($section, $keys, true);
|
|
$previous = $keys[$at - 1] ?? null;
|
|
$next = $keys[$at + 1] ?? null;
|
|
@endphp
|
|
|
|
@section('content')
|
|
<x-livewire-material::pane width="wide" data-md-showcase-page>
|
|
<x-livewire-material::stack gap="space300">
|
|
<x-livewire-material::stack as="header" gap="space50">
|
|
<p class="md-type-label-lg md-ink-variant">{{ $sections[$section]['group'] }}</p>
|
|
<h1 class="md-type-headline-lg">{{ $sections[$section]['title'] }}</h1>
|
|
</x-livewire-material::stack>
|
|
|
|
<x-livewire-material::stack gap="space800">
|
|
@include('livewire-material::showcase.sections.'.$section)
|
|
|
|
<x-livewire-material::stack gap="space300">
|
|
<x-livewire-material::divider decorative />
|
|
|
|
<x-livewire-material::row as="nav" aria-label="Sections" justify="between" wrap gap="space200">
|
|
@if ($previous)
|
|
<x-livewire-material::button variant="text" icon="arrow_back" :label="$sections[$previous]['title']" :link="route('livewire-material.section', $previous)" data-test="previous-section" />
|
|
@else
|
|
<x-livewire-material::button variant="text" icon="arrow_back" label="Overview" :link="route('livewire-material.showcase')" data-test="previous-section" />
|
|
@endif
|
|
|
|
@if ($next)
|
|
<x-livewire-material::button variant="tonal" icon-right="arrow_forward" :label="$sections[$next]['title']" :link="route('livewire-material.section', $next)" data-test="next-section" />
|
|
@endif
|
|
</x-livewire-material::row>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::pane>
|
|
@endsection
|