A11y improvements

src/demos.md

@@ -191,6 +191,7 @@ let iconType: "none" | "left" | "full" = $state("none");
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -200,7 +201,7 @@ let iconType: "none" | "left" | "full" = $state("none");
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
@@ -346,42 +347,44 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  {#snippet leading()}
-    {#if type == "label"}
-      <div class="box-wrapper">
-        <Checkbox><input type="checkbox" /></Checkbox>
-      </div>
-    {:else}
-      <Icon icon={iconCircle} />
-    {/if}
-  {/snippet}
-  <ListItem
-    {leading}
-    {headline}
-    {supporting}
-    lines={+lines}
-    {...type == "label"
-      ? { label: true }
-      : type == "button"
-        ? { onclick: () => {} }
-        : type == "a"
-          ? { href: "https://example.com" }
-          : {}}
-  />
-  <Divider />
-  <ListItem
-    {leading}
-    {headline}
-    {supporting}
-    lines={+lines}
-    {...type == "label"
-      ? { label: true }
-      : type == "button"
-        ? { onclick: () => {} }
-        : type == "a"
-          ? { href: "https://example.com" }
-          : {}}
-  />
+  <div style="display: flex; flex-direction: column" role="list">
+    {#snippet leading()}
+      {#if type == "label"}
+        <div class="box-wrapper">
+          <Checkbox><input type="checkbox" /></Checkbox>
+        </div>
+      {:else}
+        <Icon icon={iconCircle} />
+      {/if}
+    {/snippet}
+    <ListItem
+      {leading}
+      {headline}
+      {supporting}
+      lines={+lines}
+      {...type == "label"
+        ? { label: true }
+        : type == "button"
+          ? { onclick: () => {} }
+          : type == "a"
+            ? { href: "https://example.com" }
+            : {}}
+    />
+    <Divider />
+    <ListItem
+      {leading}
+      {headline}
+      {supporting}
+      lines={+lines}
+      {...type == "label"
+        ? { label: true }
+        : type == "button"
+          ? { onclick: () => {} }
+          : type == "a"
+            ? { href: "https://example.com" }
+            : {}}
+    />
+  </div>
 {/snippet}
 
 <style>
@@ -401,7 +404,7 @@ let supporting = $derived(
 Minimal demo:
 
 ```svelte
-<Menu>
+<Menu aria-label="Template Menu">
   <MenuItem icon={iconCircle}>Undo</MenuItem>
   <MenuItem icon={iconSquare}>Redo</MenuItem>
   <MenuItem icon={iconTriangle}>Cut</MenuItem>
@@ -425,7 +428,7 @@ let icons = $state(false);
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
@@ -635,12 +638,12 @@ let selected = $state(false);
 Minimal demo:
 
 ```svelte
-<LinearProgress percent={60} />
-<LinearProgressEstimate sToHalfway={2} />
-<WavyLinearProgress percent={60} />
-<WavyLinearProgressEstimate sToHalfway={2} />
-<CircularProgress percent={60} />
-<CircularProgressEstimate sToHalfway={2} />
+<LinearProgress percent={60} aria-label="Loading episodes" />
+<LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<WavyLinearProgress percent={60} aria-label="Loading episodes" />
+<WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<CircularProgress percent={60} aria-label="Loading episodes" />
+<CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -682,21 +685,38 @@ let percent = $state(10);
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : undefined} />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : undefined}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : undefined} thickness={thick ? 8 : undefined} />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : undefined}
+      thickness={thick ? 8 : undefined}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : undefined} />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : undefined}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : undefined} />
+    <LinearProgress {percent} height={thick ? 8 : undefined} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
     <WavyLinearProgress
+
       {percent}
+
       height={thick ? 14 : undefined}
+
       thickness={thick ? 8 : undefined}
+
+      aria-label="WavyLinearProgress"
     />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : undefined} />
+    <CircularProgress {percent} thickness={thick ? 8 : undefined} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -712,7 +732,7 @@ let percent = $state(10);
 Minimal demo:
 
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -732,7 +752,7 @@ let container = $state(false);
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 ```
 

src/lib/buttons/ConnectedButtons.svelte

@@ -4,7 +4,7 @@
   let { round = false, children }: { round?: boolean; children: Snippet } = $props();
 </script>
 
-<div class="m3-container" class:round>
+<div class="m3-container" role="group" class:round>
   {@render children()}
 </div>
 

src/lib/containers/Dialog.svelte

@@ -26,6 +26,8 @@
     if (open) dialog.showModal();
     else dialog.close();
   });
+
+  const id = $props.id();
 </script>
 
 <dialog
@@ -36,12 +38,13 @@
   bind:this={dialog}
   {closedby}
   role="alertdialog"
+  aria-labelledby="{id}headline"
   {...extra}
 >
   {#if icon}
     <Icon {icon} size={24} />
   {/if}
-  <p class="headline" class:center={icon}>{headline}</p>
+  <h2 class="headline" class:center={icon} id="{id}headline">{headline}</h2>
   <div class="content">
     {@render children()}
   </div>

src/lib/containers/Menu.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import type { Snippet } from "svelte";
 
-  let { children }: { children: Snippet } = $props();
+  let { children, ...extra }: { children: Snippet } & LabelledAria = $props();
 </script>
 
-<div class="m3-container">
+<div class="m3-container" role="menu" {...extra}>
   {@render children()}
 </div>
 

src/lib/containers/MenuItem.svelte

@@ -17,7 +17,7 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset" {disabled} {onclick}>
+<button type="button" class="item focus-inset" role="menuitem" {disabled} {onclick}>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>

src/lib/containers/SnackbarItem.svelte

@@ -5,7 +5,7 @@
   let { children, ...extra }: { children: Snippet } & DivAttrs = $props();
 </script>
 
-<div class="m3-container" {...extra}>
+<div class="m3-container" role="status" {...extra}>
   {@render children()}
 </div>
 

src/lib/forms/CircularProgress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import type { HTMLAttributes } from "svelte/elements";
 
   let {
@@ -19,6 +20,7 @@
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
   role="progressbar"
+  aria-valuenow={percent}
   {...extra}
 >
   <circle

src/lib/forms/LinearProgress.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
-  let { percent, height = 4 }: { percent: number; height?: number } = $props();
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
+  let {
+    percent,
+    height = 4,
+    ...extra
+  }: { percent: number; height?: number } & LabelledAria = $props();
 </script>
 
-<div class="m3-container" role="progressbar" style:height="{height / 16}rem">
+<div
+  class="m3-container"
+  role="progressbar"
+  aria-valuenow={percent}
+  style:height="{height / 16}rem"
+  {...extra}
+>
   <div class="percent" style:width="{percent}%"></div>
   <div class="track"></div>
 </div>

src/lib/forms/LinearProgressEstimate.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-  let { sToHalfway = 1, height = 4 }: { sToHalfway?: number; height?: number } = $props();
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
+  let {
+    sToHalfway = 1,
+    height = 4,
+    ...extra
+  }: { sToHalfway?: number; height?: number } & LabelledAria = $props();
 </script>
 
 <div
   class="m3-container"
   role="progressbar"
   style:height="{height / 16}rem"
   style:--speed="{sToHalfway * 8}s"
+  {...extra}
 >
   <div class="percent"></div>
   <div class="track"></div>

src/lib/forms/LoadingIndicator.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
+  import type { OneOf } from "$lib/misc/typing-utils";
+
   // for more weird loaders check out https://www.npmjs.com/package/kreations
   let {
     size = 48,
     container = false,
     center = true,
+    ...extra
   }: {
     size?: number;
     container?: boolean;
     center?: boolean;
-  } = $props();
+  } & OneOf<{ "aria-label": string; "aria-labelledby": string }> = $props();
 </script>
 
-<svg width={size} height={size} viewBox="0 0 48 48" class:container class:center>
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 48 48"
+  class:container
+  class:center
+  role="progressbar"
+  {...extra}
+>
   <path fill="currentColor">
     <animate
       attributeName="d"

src/lib/forms/WavyLinearProgress.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { linear, trackOpacity } from "./_wavy";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     width = 600,
     height = 10,
     thickness = 4,
     percent,
-  }: { width?: number; height?: number; thickness?: number; percent: number } = $props();
+    ...extra
+  }: {
+    width?: number;
+    height?: number;
+    thickness?: number;
+    percent: number;
+  } & LabelledAria = $props();
 
   let time = $state(0);
 
@@ -35,7 +42,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...extra}>
   <path fill="none" stroke="var(--m3c-primary)" stroke-width={thickness} stroke-linecap="round">
     <animate
       attributeName="d"