Stop drawing each section's title twice on its page

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

resources/views/showcase/section.blade.php

@@ -1,6 +1,6 @@
 {{-- 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 heading is only for a screen reader
-     (`data-md-showcase-sections`'s own rule in resources/css/showcase.css). --}}
+     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')
 
@@ -19,7 +19,7 @@
                 <h1 class="md-type-headline-lg">{{ $sections[$section]['title'] }}</h1>
             </x-livewire-material::stack>
 
-            <x-livewire-material::stack gap="space800" data-md-showcase-sections>
+            <x-livewire-material::stack gap="space800">
                 @include('livewire-material::showcase.sections.'.$section)
 
                 <x-livewire-material::stack gap="space300">

resources/views/showcase/sections/bars.blade.php

@@ -168,7 +168,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="bars" gap="space300">
-    <h2 class="md-type-headline-md">App bars, toolbars and tabs</h2>
+    <h2 class="md-visually-hidden">App bars, toolbars and tabs</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-app-bar&gt;</code>, <code>&lt;x-toolbar&gt;</code>, <code>&lt;x-tabs&gt;</code>, <code>&lt;x-tab&gt;</code>, <code>&lt;x-section-nav&gt;</code>, <code>&lt;x-account-menu&gt;</code> and <code>&lt;x-theme-toggle&gt;</code>.

resources/views/showcase/sections/buttons.blade.php

@@ -173,7 +173,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="buttons" gap="space300">
-    <h2 class="md-type-headline-md">Buttons</h2>
+    <h2 class="md-visually-hidden">Buttons</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-button&gt;</code>: label buttons, icon buttons and toggles in M3 Expressive's five sizes.

resources/views/showcase/sections/carousel.blade.php

@@ -92,7 +92,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="carousel" gap="space300">
-    <h2 class="md-type-headline-md">Carousel</h2>
+    <h2 class="md-visually-hidden">Carousel</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll.

resources/views/showcase/sections/chips.blade.php

@@ -68,7 +68,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="chips" gap="space300">
-    <h2 class="md-type-headline-md">Chips</h2>
+    <h2 class="md-visually-hidden">Chips</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-chip&gt;</code> — assist, filter, input and suggestion — and <code>&lt;x-chip-set&gt;</code>.

resources/views/showcase/sections/colour.blade.php

@@ -29,7 +29,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="colour" gap="space300">
-    <h2 class="md-type-headline-md">Colour</h2>
+    <h2 class="md-visually-hidden">Colour</h2>
 
     <p class="md-type-body-md md-ink-variant">
         Every role as a <code>--md-sys-color-*</code> token, generated by

resources/views/showcase/sections/communication.blade.php

@@ -106,7 +106,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="communication" gap="space300">
-    <h2 class="md-type-headline-md">Communication</h2>
+    <h2 class="md-visually-hidden">Communication</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-badge&gt;</code>, <code>&lt;x-toast&gt;</code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),

resources/views/showcase/sections/containment.blade.php

@@ -246,7 +246,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="containment" gap="space300">
-    <h2 class="md-type-headline-md">Containment</h2>
+    <h2 class="md-visually-hidden">Containment</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-card&gt;</code>, <code>&lt;x-list&gt;</code> and <code>&lt;x-list-item&gt;</code>, <code>&lt;x-divider&gt;</code>, <code>&lt;x-collapse&gt;</code>,

resources/views/showcase/sections/data.blade.php

@@ -44,7 +44,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="data" gap="space300">
-    <h2 class="md-type-headline-md">Data</h2>
+    <h2 class="md-visually-hidden">Data</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators.

resources/views/showcase/sections/elevation.blade.php

@@ -1,5 +1,5 @@
 <x-livewire-material::stack as="section" id="elevation" gap="space300">
-    <h2 class="md-type-headline-md">Elevation</h2>
+    <h2 class="md-visually-hidden">Elevation</h2>
 
     <p class="md-type-body-md md-ink-variant">
         Five shadow levels as <code>--md-sys-elevation-*</code>, for what floats over content.

resources/views/showcase/sections/fields.blade.php

@@ -222,7 +222,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="fields" gap="space300">
-    <h2 class="md-type-headline-md">Text fields and selection</h2>
+    <h2 class="md-visually-hidden">Text fields and selection</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-input&gt;</code>, <code>&lt;x-password&gt;</code>, <code>&lt;x-textarea&gt;</code>, <code>&lt;x-select&gt;</code>, <code>&lt;x-file&gt;</code>

resources/views/showcase/sections/icons.blade.php

@@ -18,7 +18,7 @@
     }"
     x-intersect.once="load()"
 >
-    <h2 class="md-type-headline-md">Icons</h2>
+    <h2 class="md-visually-hidden">Icons</h2>
 
     <p class="md-type-body-md md-ink-variant">
         Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,

resources/views/showcase/sections/layout.blade.php

@@ -31,7 +31,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="layout" gap="space300">
-    <h2 class="md-type-headline-md">Layout</h2>
+    <h2 class="md-visually-hidden">Layout</h2>
 
     <p class="md-type-body-md md-ink-variant">
         Widths are M3's breakpoints and nothing else: compact below 600px, then medium 600, expanded 840, large 1200

resources/views/showcase/sections/menus.blade.php

@@ -140,7 +140,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="menus" gap="space300">
-    <h2 class="md-type-headline-md">Menus</h2>
+    <h2 class="md-visually-hidden">Menus</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.

resources/views/showcase/sections/motion.blade.php

@@ -1,5 +1,5 @@
 <x-livewire-material::stack as="section" id="motion" gap="space300" x-data="{ moved: false, figure: 1204 }">
-    <h2 class="md-type-headline-md">Motion</h2>
+    <h2 class="md-visually-hidden">Motion</h2>
 
     <p class="md-type-body-md md-ink-variant">
         M3 Expressive's springs as <code>--md-sys-motion-spatial-*</code> and <code>--md-sys-motion-effects-*</code>, each with its

resources/views/showcase/sections/navigation.blade.php

@@ -160,7 +160,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="navigation" gap="space300">
-    <h2 class="md-type-headline-md">Navigation</h2>
+    <h2 class="md-visually-hidden">Navigation</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-navigation-bar&gt;</code> and <code>&lt;x-navigation-bar-item&gt;</code>, <code>&lt;x-navigation-rail&gt;</code>, <code>&lt;x-navigation-rail-item&gt;</code> and <code>&lt;x-navigation-rail-section&gt;</code>,

resources/views/showcase/sections/pages.blade.php

@@ -1,5 +1,5 @@
 <x-livewire-material::stack as="section" id="pages" gap="space300">
-    <h2 class="md-type-headline-md">Pages</h2>
+    <h2 class="md-visually-hidden">Pages</h2>
 
     <p class="md-type-body-md md-ink-variant">
         The error pages, raised for real so an app's own <code>resources/views/errors</code> still wins, and the Markdown mail theme

resources/views/showcase/sections/pickers.blade.php

@@ -73,7 +73,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="pickers" gap="space300">
-    <h2 class="md-type-headline-md">Date pickers</h2>
+    <h2 class="md-visually-hidden">Date pickers</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-datepicker&gt;</code> — docked, modal and modal input; single dates and ranges. Month and weekday names, the first day of the week and the typed format follow the application's locale; <code>week-start</code> and <code>format</code> set the last two for someone who chose their own.

resources/views/showcase/sections/progress.blade.php

@@ -48,7 +48,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="progress" gap="space300">
-    <h2 class="md-type-headline-md">Progress</h2>
+    <h2 class="md-visually-hidden">Progress</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-progress&gt;</code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.

resources/views/showcase/sections/shape.blade.php

@@ -3,7 +3,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="shape" gap="space300">
-    <h2 class="md-type-headline-md">Shape</h2>
+    <h2 class="md-visually-hidden">Shape</h2>
 
     <p class="md-type-body-md md-ink-variant">
         The corner scale as a <code>--md-sys-shape-corner-*</code> token, and M3 Expressive's shapes as <code>&lt;x-shape name="…" /&gt;</code>.

resources/views/showcase/sections/sliders.blade.php

@@ -55,7 +55,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="sliders" gap="space300">
-    <h2 class="md-type-headline-md">Sliders</h2>
+    <h2 class="md-visually-hidden">Sliders</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.

resources/views/showcase/sections/timepickers.blade.php

@@ -32,7 +32,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="timepickers" gap="space300">
-    <h2 class="md-type-headline-md">Time pickers</h2>
+    <h2 class="md-visually-hidden">Time pickers</h2>
 
     <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-timepicker&gt;</code> — M3's dial and input time picker in a modal dialog, opened from a text field.

resources/views/showcase/sections/type.blade.php

@@ -19,7 +19,7 @@
 @endphp
 
 <x-livewire-material::stack as="section" id="type" gap="space300">
-    <h2 class="md-type-headline-md">Type</h2>
+    <h2 class="md-visually-hidden">Type</h2>
 
     <p class="md-type-body-md md-ink-variant">
         M3's typescale in Google Sans Flex, each style regular and emphasized: <code>md-type-title-lg</code>, <code>md-type-emphasized-title-lg</code>.