🎨 Palette: Improve LoadingButton UX and Accessibility

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-10-24 - Async Button State Accessibility
+**Learning:** Async buttons with visual-only state changes (spinner, icons) are inaccessible to screen readers without explicit `aria-live` announcements. Success states that persist indefinitely can be confusing and block retry actions.
+**Action:** Always include a visually hidden `span` with `role="status"` and `aria-live="polite"` to announce state changes ("Loading", "Success", "Error"). Implement auto-reset for success states on buttons.

src/components/DomainPayment.svelte

@@ -102,7 +102,11 @@
 			<h4>{domainName}</h4>
 
 			<div class="years">
-				<IconButton on:click={() => addYears(-1)} disabled={years === 1 || feesApproved} aria-label="remove-year">
+				<IconButton
+					on:click={() => addYears(-1)}
+					disabled={years === 1 || feesApproved}
+					aria-label="remove-year"
+				>
 					<Icon icon="remove" />
 				</IconButton>
 				<span>{years} {yearsLabel}</span>
@@ -111,7 +115,7 @@
 				</IconButton>
 			</div>
 
-	 		<div class="coin">
+			<div class="coin">
 				<p class="title text-center">Payment token</p>
 				<div class="row centered">
 					<Select bind:value={$selectedCoin} label="Select Token" variant="outlined">

src/components/LoadingButton.svelte

@@ -4,10 +4,12 @@
 	import Button, { Label } from '@smui/button';
 	import Icon from 'src/components/Icon.svelte';
 	import CircularProgress from '@smui/circular-progress';
+	import { onDestroy } from 'svelte';
 
 	let className = '';
 	export { className as class };
 	export let onClick: () => Promise<void>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let onError: (error: any) => Promise<void> = async (error) => {
 		let message;
 		if (error && error instanceof Error) message = error.message;
@@ -24,33 +26,49 @@
 
 	let loading: boolean | undefined;
 	let hasError = false;
+	let resetTimeout: ReturnType<typeof setTimeout>;
+
+	onDestroy(() => {
+		clearTimeout(resetTimeout);
+	});
 
 	async function handleClick() {
 		if (loading) return;
 
+		clearTimeout(resetTimeout);
+
+		hasError = false;
 		loading = true;
 
 		try {
 			await onClick();
+			resetTimeout = setTimeout(() => {
+				loading = undefined;
+			}, 3000);
 		} catch (error) {
 			hasError = true;
 			await onError(error);
 		}
 
 		loading = false;
 	}
+
+	$: statusText = loading ? 'Loading' : hasError ? 'Error' : loading === false ? 'Success' : '';
 </script>
 
 <Button class={className} disabled={isDisabled} on:click={handleClick} {variant}>
-	<Label><slot /></Label>
+	<Label>
+		<slot />
+		<span class="sr-only" role="status" aria-live="polite">{statusText}</span>
+	</Label>
 	{#if loading}
-		<div class="loading">
+		<div class="loading" role="progressbar" aria-label="Loading">
 			<CircularProgress style="height: 20px; width: 20px;" indeterminate />
 		</div>
 	{:else if hasError}
 		<Icon icon="error" align="right" />
 	{:else if loading === false}
-		<Icon icon="done" align="right"/>
+		<Icon icon="done" align="right" />
 	{/if}
 </Button>
 
@@ -62,4 +80,16 @@
 
 		margin-left: 1rem;
 	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

src/components/Record.svelte

@@ -28,7 +28,7 @@
 	$: errors = invalid ? validator.getErrors() : [];
 	$: disabled = !edit;
 	$: validator = getValidator(klass);
-	$: maxLength = 'maxLength' in validator.rules ? validator.rules['maxLength'] as number : 64
+	$: maxLength = 'maxLength' in validator.rules ? (validator.rules['maxLength'] as number) : 64;
 
 	let edit = false;
 
@@ -99,10 +99,18 @@
 		</div>
 	{:else if editMode}
 		<div class="actions">
-			<IconButton on:click={() => toggleEdit()} disabled={!$walletConnected} aria-label="edit-record">
+			<IconButton
+				on:click={() => toggleEdit()}
+				disabled={!$walletConnected}
+				aria-label="edit-record"
+			>
 				<Icon icon="edit" />
 			</IconButton>
-			<IconButton on:click={() => (dialogOpen = true)} disabled={!$walletConnected} aria-label="delete-record">
+			<IconButton
+				on:click={() => (dialogOpen = true)}
+				disabled={!$walletConnected}
+				aria-label="delete-record"
+			>
 				<Icon icon="delete" />
 			</IconButton>
 		</div>

src/lib/sdk.ts

@@ -22,4 +22,4 @@ export const profileRecords = [
 	RecordClassEnum.Price
 ].map((v) => RecordClassEnum[v]);
 
-export const getValidator = (klass: string) => getRecordValidator(getRecordClassFrom(klass))
+export const getValidator = (klass: string) => getRecordValidator(getRecordClassFrom(klass));

src/lib/server/index.ts

@@ -57,5 +57,4 @@ export const getStats = async (): Promise<DomainStats> => {
 	};
 };
 
-
 export const apiError = (message: string, status = 400) => json({ error: message }, { status });

src/lib/types.ts

@@ -42,8 +42,8 @@ export interface DomainPaymentParams {
 }
 
 export interface DomainFeesResponse {
-	feesLabel: number
-	fees: string
-	symbol: string
-	address: string
+	feesLabel: number;
+	fees: string;
+	symbol: string;
+	address: string;
 }

src/lib/url.ts

@@ -8,12 +8,11 @@ export const explorerAddressUrl = (address: string) => {
 	if (address.startsWith('00'))
 		// Account
 		url += `/accounts/${address}/assets`;
-	else
-		// Contract
-		url += `/contracts/${address}`;
+	// Contract
+	else url += `/contracts/${address}`;
 
-	return url
-}
+	return url;
+};
 
 export const bridgeUrl = `${config.browserUrl}/bridge`;
 

src/routes/+layout.svelte

@@ -201,5 +201,4 @@
 		align-items: center;
 		height: 100%;
 	}
-
 </style>

src/routes/api/register/[name]/fees/[coin]/+server.ts

@@ -4,14 +4,17 @@ import { json } from '@sveltejs/kit';
 import type { DomainFeesResponse } from 'src/lib/types';
 
 export async function GET({ params: { name, coin } }) {
-  return handleError(async () => {
-    const validCoins = metaNamesSdk.config.byoc.map(byoc => byoc.symbol.toString())
-    if (!(validCoins.includes(coin))) return apiError('Invalid coin');
+	return handleError(async () => {
+		const validCoins = metaNamesSdk.config.byoc.map((byoc) => byoc.symbol.toString());
+		if (!validCoins.includes(coin)) return apiError('Invalid coin');
 
-    const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name)
-    const domainFees = await metaNamesSdk.domainRepository.calculateMintFees(normalizedDomain, coin as BYOCSymbol);
-    const fees = { ...domainFees, fees: domainFees.fees.toString() }
+		const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name);
+		const domainFees = await metaNamesSdk.domainRepository.calculateMintFees(
+			normalizedDomain,
+			coin as BYOCSymbol
+		);
+		const fees = { ...domainFees, fees: domainFees.fees.toString() };
 
-    return json(fees);
-  });
+		return json(fees);
+	});
 }

src/routes/profile/+page.svelte

@@ -74,7 +74,6 @@
 </div>
 
 <style lang="scss">
-
 	.domains {
 		margin-top: 1.5rem;
 		margin-bottom: 0;

src/styles/mixins.scss

@@ -1,4 +1,4 @@
-@use "sass:string";
+@use 'sass:string';
 
 $amounts: (0, 1, 2, 3, 4);
 $types: (top, bottom, left, right);

src/theme/dark/_smui-theme.scss

@@ -5,7 +5,7 @@ $text-color: #d5ccff;
 @use '@material/theme/color-palette';
 @use '@material/theme/index' as theme with (
 	$primary: #6849fe,
-	$secondary: #D0C7FF,
+	$secondary: #d0c7ff,
 	$surface: color.adjust(color-palette.$grey-900, $blue: +4),
 	$background: #363535,
 	$error: color-palette.$red-700