From da1a6a9a7bd9f474a5312f17f6577b074946aae5 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 19 Feb 2026 21:22:02 +0000
Subject: [PATCH] Fix Dialog ARIA attributes and unique IDs in Record component

- Ensure Dialog `aria-labelledby` and `aria-describedby` point to existing elements by generating unique IDs based on `klass`.
- Add `action="close"` to the "No" button in the confirmation dialog to ensure it functions correctly.
- This improves accessibility and fixes broken ARIA references.

Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
 .jules/palette.md            |  1 +
 src/components/Record.svelte | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 00f41cd..9cc85e1 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,4 @@
 ## 2024-10-24 - Accessible Icon Props and Loading Button State
+
 **Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
 **Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.
diff --git a/src/components/Record.svelte b/src/components/Record.svelte
index 913b790..770822d 100644
--- a/src/components/Record.svelte
+++ b/src/components/Record.svelte
@@ -29,6 +29,7 @@
 	$: disabled = !edit;
 	$: validator = getValidator(klass);
 	$: maxLength = 'maxLength' in validator.rules ? (validator.rules['maxLength'] as number) : 64;
+	$: dialogId = klass.toLowerCase().replace(/\s+/g, '-');
 
 	let edit = false;
 
@@ -55,13 +56,15 @@
 <div class="record-container {editMode ? 'edit' : ''}">
 	<Dialog
 		bind:open={dialogOpen}
-		aria-labelledby="confirmation-title"
-		aria-describedby="confirmation-content"
+		aria-labelledby={`confirmation-title-${dialogId}`}
+		aria-describedby={`confirmation-content-${dialogId}`}
 	>
-		<Title id="simple-title">Confirm action</Title>
-		<Content id="simple-content">Do you really want to remove the record?</Content>
+		<Title id={`confirmation-title-${dialogId}`}>Confirm action</Title>
+		<Content id={`confirmation-content-${dialogId}`}
+			>Do you really want to remove the record?</Content
+		>
 		<Actions>
-			<Button>
+			<Button action="close">
 				<Label>No</Label>
 			</Button>
 			<Button on:click={destroy}>