A11y improvements

src/demos.md

@@ -173,6 +173,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
@@ -182,7 +183,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>
@@ -328,7 +329,7 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
@@ -389,7 +390,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>
@@ -413,7 +414,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>
@@ -628,12 +629,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:
@@ -673,17 +674,34 @@ let percent = $state(10);
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -699,7 +717,7 @@ let percent = $state(10);
 Minimal demo:
 
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -719,7 +737,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

@@ -34,6 +34,8 @@
     if (open) dialog.showModal();
     else dialog.close();
   });
+
+  const id = $props.id();
 </script>
 
 <dialog
@@ -61,12 +63,13 @@
         ? "closerequest"
         : "any")}
   role="alertdialog"
+  aria-labelledby="{id}headline"
   {...extra}
 >
   {#if icon}
     <Icon {icon} size={24} />
   {/if}
-  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
+  <h2 class="headline m3-font-headline-small" class:center={icon} id="{id}headline">{headline}</h2>
   <div class="content m3-font-body-medium">
     {@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,13 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset m3-font-label-large" {disabled} {onclick}>
+<button
+  type="button"
+  class="item focus-inset m3-font-label-large"
+  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,11 +1,12 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     size = 48,
     thickness = 4,
-  }: { percent: number; size?: number; thickness?: number } & HTMLAttributes<SVGElement> = $props();
+    ...extra
+  }: { percent: number; size?: number; thickness?: number } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -18,6 +19,8 @@
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
   role="progressbar"
+  aria-valuenow={percent}
+  {...extra}
 >
   <circle
     cx={size / 2}

src/lib/forms/CircularProgressEstimate.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
   let {
     sToHalfway = 1,
     size = 48,
     thickness = 2,
+    ...extra
   }: {
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-  } = $props();
+  } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -23,6 +26,7 @@
   role="progressbar"
   style:--speed="{sToHalfway * 8}s"
   style:--circumference={circumference}
+  {...extra}
 >
   <circle
     cx={size / 2}

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,5 +1,11 @@
 <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();
   /*
   Easing calculated with
   // 1) define the original mapping f(y)=time-%, capped at 100% for y=1
@@ -72,6 +78,7 @@
   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,20 @@
 <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} class:container class:center>
+<svg width={size} height={size} 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);
 
@@ -37,7 +44,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"

src/lib/forms/WavyLinearProgressEstimate.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import { linear, trackOpacity } from "./_wavy";
 
   let {
     sToHalfway = 1,
     width = 600,
     height = 10,
     thickness = 4,
-  }: { sToHalfway?: number; width?: number; height?: number; thickness?: number } = $props();
+    ...extra
+  }: {
+    sToHalfway?: number;
+    width?: number;
+    height?: number;
+    thickness?: number;
+  } & LabelledAria = $props();
 
   let top = $derived(thickness * 0.5);
   let bottom = $derived(height - thickness * 0.5);
@@ -51,7 +58,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"