feat: add title and aria-label attributes to btn-icon components (#3619)

JamesN-dev · endigo9740 · web-flow · commit df1eef4c92b0 · 2025-08-09T12:14:15.000-05:00
Co-authored-by: Chris Simmons &lt;gundamx9740@gmail.com&gt;
diff --git a/.changeset/shaggy-jokes-start.md b/.changeset/shaggy-jokes-start.md
@@ -0,0 +1,6 @@
+---
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feature: Added `aria-label` and `title` props for icon buttons implemented within the Svelte and React Toast components.
diff --git a/packages/skeleton-react/src/components/Toast/Toast.tsx b/packages/skeleton-react/src/components/Toast/Toast.tsx
@@ -46,7 +46,13 @@ export function Toast(props: ToastProps) {
 				</div>
 				{api.closable && (
 					// Dismiss Button
-					<button className={`${props.btnDismissBase} ${props.btnDismissClasses}`} onClick={api.dismiss} data-testid="toast-dismiss">
+					<button
+						className={`${props.btnDismissBase} ${props.btnDismissClasses}`}
+						title={props.btnDismissTitle}
+						aria-label={props.btnDismissAriaLabel}
+						onClick={api.dismiss}
+						data-testid="toast-dismiss"
+					>
 						&times;
 					</button>
 				)}
diff --git a/packages/skeleton-react/src/components/Toast/Toaster.tsx b/packages/skeleton-react/src/components/Toast/Toaster.tsx
@@ -27,6 +27,8 @@ export function Toaster({
 	// Dismiss Button
 	btnDismissBase = 'btn-icon hover:preset-tonal',
 	btnDismissClasses = '',
+	btnDismissTitle = 'Dismiss',
+	btnDismissAriaLabel = 'Dismiss',
 	// State
 	stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
 	stateSuccess = 'preset-filled-success-500',
@@ -57,6 +59,8 @@ export function Toaster({
 					descriptionClasses={descriptionClasses}
 					btnDismissBase={btnDismissBase}
 					btnDismissClasses={btnDismissClasses}
+					btnDismissTitle={btnDismissTitle}
+					btnDismissAriaLabel={btnDismissAriaLabel}
 					stateInfo={stateInfo}
 					stateError={stateError}
 					stateWarning={stateWarning}
diff --git a/packages/skeleton-react/src/components/Toast/types.ts b/packages/skeleton-react/src/components/Toast/types.ts
@@ -38,6 +38,10 @@ export interface ToasterProps {
 	btnDismissBase?: string;
 	/** Provide arbitrary classes for the dismiss button. */
 	btnDismissClasses?: string;
+	/** Provide the title attribute for the dismiss button. */
+	btnDismissTitle?: string;
+	/** Provide the aria-label attribute for the dismiss button. */
+	btnDismissAriaLabel?: string;
 
 	// State ---
 	/** Provide base classes for info toasts. */
diff --git a/packages/skeleton-svelte/src/components/Toast/Toast.svelte b/packages/skeleton-svelte/src/components/Toast/Toast.svelte
@@ -40,8 +40,12 @@
 	</div>
 	{#if api.closable}
 		<!-- Dismiss Button -->
-		<button class="{props.btnDismissBase} {props.btnDismissClasses}" {...api.getCloseTriggerProps()} data-testid="toast-dismiss"
-			>&times;</button
+		<button
+			class="{props.btnDismissBase} {props.btnDismissClasses}"
+			title={props.btnDismissTitle}
+			aria-label={props.btnDismissAriaLabel}
+			{...api.getCloseTriggerProps()}
+			data-testid="toast-dismiss">&times;</button
 		>
 	{/if}
 </div>
diff --git a/packages/skeleton-svelte/src/components/Toast/Toaster.svelte b/packages/skeleton-svelte/src/components/Toast/Toaster.svelte
@@ -25,6 +25,8 @@
 		// Dismiss Button
 		btnDismissBase = 'btn-icon hover:preset-tonal',
 		btnDismissClasses = '',
+		btnDismissTitle = 'Dismiss',
+		btnDismissAriaLabel = 'Dismiss',
 		// State
 		stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
 		stateSuccess = 'preset-filled-success-500',
@@ -56,6 +58,8 @@
 			{descriptionClasses}
 			{btnDismissBase}
 			{btnDismissClasses}
+			{btnDismissTitle}
+			{btnDismissAriaLabel}
 			{stateInfo}
 			{stateError}
 			{stateWarning}
diff --git a/packages/skeleton-svelte/src/components/Toast/types.ts b/packages/skeleton-svelte/src/components/Toast/types.ts
@@ -39,6 +39,10 @@ export interface ToasterProps extends toast.StoreProps {
 	btnDismissBase?: string;
 	/** Provide arbitrary classes for the dismiss button. */
 	btnDismissClasses?: string;
+	/** Provide the title attribute for the dismiss button. */
+	btnDismissTitle?: string;
+	/** Provide the aria-label attribute for the dismiss button. */
+	btnDismissAriaLabel?: string;
 
 	// State ---
 	/** Provide base classes for info toasts. */
diff --git a/playgrounds/skeleton-react/src/app/components/app-bar/page.tsx b/playgrounds/skeleton-react/src/app/components/app-bar/page.tsx
@@ -137,7 +137,7 @@ export default function Page() {
 			<AppBar>
 				<AppBar.Toolbar>
 					<AppBar.ToolbarLead>
-						<button type="button" className="btn-icon preset-filled-primary-500">
+						<button type="button" className="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu">
 							<Skull size={22} />
 						</button>
 						<button type="button" className="btn preset-filled">
@@ -149,7 +149,7 @@ export default function Page() {
 						<button type="button" className="btn preset-filled">
 							Skeleton
 						</button>
-						<button type="button" className="btn-icon preset-filled-primary-500">
+						<button type="button" className="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu">
 							<Skull size={22} />
 						</button>
 					</AppBar.ToolbarTrail>
diff --git a/playgrounds/skeleton-svelte/src/routes/components/app-bars/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/app-bars/+page.svelte
@@ -120,13 +120,13 @@
 <button type="button" class="btn preset-filled">Button before the AppBar</button>
 <AppBar>
 	{#snippet lead()}
-		<button type="button" class="btn-icon preset-filled-primary-500"><Skull size={22} /></button>
+		<button type="button" class="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu"><Skull size={22} /></button>
 		<button type="button" class="btn preset-filled">Skeleton</button>
 	{/snippet}
 	Skeleton
 	{#snippet trail()}
 		<button type="button" class="btn preset-filled">Skeleton</button>
-		<button type="button" class="btn-icon preset-filled-primary-500"><Skull size={22} /></button>
+		<button type="button" class="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu"><Skull size={22} /></button>
 	{/snippet}
 </AppBar>
 <button type="button" class="btn preset-filled">Button after the AppBar</button>
@@ -135,13 +135,13 @@
 <div dir="rtl">
 	<AppBar>
 		{#snippet lead()}
-			<button type="button" class="btn-icon preset-filled-primary-500"><Skull size={22} /></button>
+			<button type="button" class="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu"><Skull size={22} /></button>
 			<button type="button" class="btn preset-filled">lead</button>
 		{/snippet}
 		skeleton
 		{#snippet trail()}
 			<button type="button" class="btn preset-filled">trail</button>
-			<button type="button" class="btn-icon preset-filled-primary-500"><Skull size={22} /></button>
+			<button type="button" class="btn-icon preset-filled-primary-500" title="Menu" aria-label="Menu"><Skull size={22} /></button>
 		{/snippet}
 		{#snippet headline()}
 			<h1 class="h1">مرحبا بك</h1>
diff --git a/playgrounds/skeleton-svelte/src/routes/components/popover/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/popover/+page.svelte
@@ -44,7 +44,7 @@
 			{#snippet content()}
 				<header class="flex justify-between">
 					<p class="font-bold text-xl">Popover</p>
-					<button class="btn-icon" onclick={popoverClose}>
+					<button class="btn-icon" onclick={popoverClose} title="Close" aria-label="Close">
 						<IconX />
 					</button>
 				</header>
diff --git a/sites/skeleton.dev/src/components/homepage/HomeCompGrid.svelte b/sites/skeleton.dev/src/components/homepage/HomeCompGrid.svelte
@@ -239,7 +239,7 @@
 					<h2 class="h3">Revenue</h2>
 					<p class="text-xs opacity-60">Posted April 1-13</p>
 				</div>
-				<button type="button" class="btn-icon rounded-full preset-tonal">
+				<button type="button" class="btn-icon rounded-full preset-tonal" title="Expand revenue details" aria-label="Expand revenue details">
 					<IconArrowUpRight class="size-4" />
 				</button>
 			</header>
@@ -378,7 +378,12 @@
 		<!-- 14 -->
 		<div class={`${cardClasses} col-span-2 row-span-2 col-start-3 row-start-7`}>
 			<div class="h-full grid grid-cols-[auto_2fr_0.5fr] items-center gap-2 px-5">
-				<button type="button" class="btn-icon btn-icon-lg rounded-full preset-filled-primary-500 scale-150">
+				<button
+					type="button"
+					class="btn-icon btn-icon-lg rounded-full preset-filled-primary-500 scale-150"
+					title="Play music"
+					aria-label="Play music"
+				>
 					<IconPlay class="size-6 fill-current stroke-none" />
 				</button>
 				<div class="grid grid-cols-[auto_1fr_auto] gap-5 items-center px-10">
diff --git a/sites/skeleton.dev/src/examples/components/popover/ExamplePopover.svelte b/sites/skeleton.dev/src/examples/components/popover/ExamplePopover.svelte
@@ -22,7 +22,7 @@
 	{#snippet content()}
 		<header class="flex justify-between">
 			<p class="font-bold text-xl">Popover Example</p>
-			<button class="btn-icon hover:preset-tonal" onclick={popoverClose}><IconX /></button>
+			<button class="btn-icon hover:preset-tonal" onclick={popoverClose} title="Close" aria-label="Close"><IconX /></button>
 		</header>
 		<article>
 			<p class="opacity-60">
diff --git a/sites/skeleton.dev/src/examples/components/popover/ExamplePopover.tsx b/sites/skeleton.dev/src/examples/components/popover/ExamplePopover.tsx
@@ -61,7 +61,7 @@ export const Page: React.FC = () => {
 						<div className="space-y-4">
 							<header className="flex justify-between">
 								<p className="font-bold text-xl">Popover Example</p>
-								<button className="btn-icon hover:preset-tonal" onClick={() => setIsOpen(false)}>
+								<button className="btn-icon hover:preset-tonal" onClick={() => setIsOpen(false)} title="Close" aria-label="Close">
 									<IconX />
 								</button>
 							</header>
diff --git a/sites/skeleton.dev/src/examples/guides/cookbook/stepper/Example.svelte b/sites/skeleton.dev/src/examples/guides/cookbook/stepper/Example.svelte
@@ -49,7 +49,8 @@
 					<button
 						class="btn-icon btn-icon-sm rounded-full {isCurrentStep(i) ? 'preset-filled-primary-500' : 'preset-filled-surface-200-800'}"
 						onclick={() => setStep(i)}
-						title={step.label}
+						title="Go to {step.label}"
+						aria-label="Go to {step.label}"
 					>
 						<span class="font-bold">{i + 1}</span>
 					</button>
diff --git a/sites/themes.skeleton.dev/src/lib/components/common/Lightswitch/Lightswitch.svelte b/sites/themes.skeleton.dev/src/lib/components/common/Lightswitch/Lightswitch.svelte
@@ -14,7 +14,7 @@
 	}
 </script>
 
-<button class="btn-icon hover:preset-tonal" onclick={toggleDarkMode}>
+<button class="btn-icon hover:preset-tonal" onclick={toggleDarkMode} title="Toggle dark mode." aria-label="Toggle dark mode.">
 	{#if darkMode}
 		<IconSun size={20} />
 	{:else}
diff --git a/sites/themes.skeleton.dev/src/lib/components/generator/Controls/Controls.svelte b/sites/themes.skeleton.dev/src/lib/components/generator/Controls/Controls.svelte
@@ -51,35 +51,39 @@
 			<hr class="hr" />
 			<!-- Controls: Colors -->
 			<Accordion.Item value="colors" {...accordionItemProps}>
-				{#snippet lead()}<span class="btn-icon preset-tonal"><IconColors size={20} /></span>{/snippet}
+				{#snippet lead()}<span class="btn-icon preset-tonal" title="Color Palette" aria-label="Color Palette"><IconColors size={20} /></span
+					>{/snippet}
 				{#snippet control()}<span class="h4">Color Palette</span>{/snippet}
 				{#snippet panel()}<ControlsColors />{/snippet}
 			</Accordion.Item>
 			<hr class="hr" />
 			<!-- Controls: Backgrounds -->
 			<Accordion.Item value="backgrounds" {...accordionItemProps}>
-				{#snippet lead()}<span class="btn-icon preset-tonal"><IconBackgrounds size={20} /></span>{/snippet}
+				{#snippet lead()}<span class="btn-icon preset-tonal" title="Backgrounds" aria-label="Backgrounds"
+						><IconBackgrounds size={20} /></span
+					>{/snippet}
 				{#snippet control()}<span class="h4">Backgrounds</span>{/snippet}
 				{#snippet panel()}<ControlsBackgrounds />{/snippet}
 			</Accordion.Item>
 			<hr class="hr" />
 			<!-- Controls: Spacing -->
 			<Accordion.Item value="spacing" {...accordionItemProps}>
-				{#snippet lead()}<span class="btn-icon preset-tonal"><IconSpacing size={20} /></span>{/snippet}
+				{#snippet lead()}<span class="btn-icon preset-tonal" title="Spacing" aria-label="Spacing"><IconSpacing size={20} /></span>{/snippet}
 				{#snippet control()}<span class="h4">Spacing</span>{/snippet}
 				{#snippet panel()}<ControlsSpacing />{/snippet}
 			</Accordion.Item>
 			<hr class="hr" />
 			<!-- Controls: Edges -->
 			<Accordion.Item value="edges" {...accordionItemProps}>
-				{#snippet lead()}<span class="btn-icon preset-tonal"><IconEdges size={20} /></span>{/snippet}
+				{#snippet lead()}<span class="btn-icon preset-tonal" title="Edges" aria-label="Edges"><IconEdges size={20} /></span>{/snippet}
 				{#snippet control()}<span class="h4">Edges</span>{/snippet}
 				{#snippet panel()}<ControlsEdges />{/snippet}
 			</Accordion.Item>
 			<hr class="hr" />
 			<!-- Controls: Typography -->
 			<Accordion.Item value="typography" {...accordionItemProps}>
-				{#snippet lead()}<span class="btn-icon preset-tonal"><IconTypography size={20} /></span>{/snippet}
+				{#snippet lead()}<span class="btn-icon preset-tonal" title="Typography" aria-label="Typography"><IconTypography size={20} /></span
+					>{/snippet}
 				{#snippet control()}<span class="h4">Typography</span>{/snippet}
 				{#snippet panel()}<ControlsTypography />{/snippet}
 			</Accordion.Item>
