From 6eecc94cd5d44f86ad42046256705ff472fd08db Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 27 Mar 2026 20:51:51 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Fix=20duplicated=20a11y=20IDs=20in=20Record=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes accessibility issues where the Dialog for confirming record deletion had hardcoded IDs ("simple-title", "simple-content"). When multiple `Record` components are rendered (e.g., in a loop inside `Records.svelte`), this caused duplicate ID violations and mismatched `aria-labelledby` / `aria-describedby` associations for screen readers.

By generating a unique ID per component instance via `onMount`, we ensure each Dialog remains accessible and correctly associates its title and content without causing SSR hydration mismatches.

Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
 src/components/Record.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Record.svelte b/src/components/Record.svelte
index 913b7901..4d1c149f 100644
--- a/src/components/Record.svelte
+++ b/src/components/Record.svelte
@@ -6,6 +6,7 @@
 	import Textfield from '@smui/textfield';
 	import Icon from 'src/components/Icon.svelte';
 
+	import { onMount } from 'svelte';
 	import type { RecordRepository } from '@metanames/sdk';
 	import { alertMessage, refresh, walletConnected } from '$lib/stores/main';
 	import { alertTransactionAndFetchResult, getRecordClassFrom, getValidator } from '$lib';
@@ -18,6 +19,11 @@
 
 	let recordValue = String(value);
 	let dialogOpen = false;
+	let dialogId = '';
+
+	onMount(() => {
+		dialogId = Math.random().toString(36).substring(2, 9);
+	});
 
 	$: label = klass.toString();
 	$: recordClass = getRecordClassFrom(klass);
@@ -55,11 +61,11 @@
 <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>
 				<Label>No</Label>