@14ch/svelte-ui 0.0.72 → 0.0.73

package/dist/components/DatepickerCalendar.svelte

@@ -506,6 +506,10 @@
 		return `calendar-date-${date.format('YYYY-MM-DD')}`;
 	};
 
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `datepicker-calendar-${Math.random().toString(36).substring(2, 15)}`;
+	const monthLabelId = $derived(`${id ?? fallbackId}-month-label`);
+
 	const handleMouseEnter = (date: dayjs.Dayjs) => {
 		if (mode !== 'range' || isOutOfRange(date)) return;
 		hoveredDate = date;
@@ -584,6 +588,7 @@
 		</div>
 		<button
 			type="button"
+			id={monthLabelId}
 			class="datepicker-calendar__header__month-label-button"
 			aria-live="polite"
 			aria-atomic="true"
@@ -632,7 +637,7 @@
 			{/each}
 		</div>
 	{:else}
-		<div class="datepicker-calendar__date-selection" role="grid" aria-labelledby="month-label">
+		<div class="datepicker-calendar__date-selection" role="grid" aria-labelledby={monthLabelId}>
 			<div class="datepicker-calendar__day-list" role="row">
 				{#each DAY_ARRAY as day}
 					<div class="datepicker-calendar__day-item" role="columnheader">

package/dist/components/Dialog.svelte

@@ -143,9 +143,19 @@
 
 	const dialogClasses = $derived('');
 
-	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `dialog-${Math.random().toString(36).substring(2, 15)}`;
+	const baseId = $derived(id ?? fallbackId);
+	const titleId = $derived(`${baseId}-dialog-title`);
+	const descriptionId = $derived(`${baseId}-dialog-description`);
+
+	// 名前は 1 つだけ与える。aria-labelledby は aria-label より優先されるため、両方は付けない。
+	// header を差し替えるとタイトル要素が描画されないので、そのときは title を aria-label で渡す
+	const hasTitleElement = $derived(!!title && !header);
+	const ariaLabelValue = $derived(ariaLabel || (title && !hasTitleElement ? title : undefined));
+	const ariaLabelledby = $derived(!ariaLabelValue && hasTitleElement ? titleId : undefined);
 	const ariaDescribedbyValue = $derived(
-		ariaDescribedby || (description ? 'dialog-description' : undefined)
+		ariaDescribedby || (description ? descriptionId : undefined)
 	);
 </script>
 
@@ -158,7 +168,7 @@
 	{onOpen}
 	{onClose}
 	componentType="Dialog"
-	{ariaLabel}
+	ariaLabel={ariaLabelValue}
 	{ariaLabelledby}
 	ariaDescribedby={ariaDescribedbyValue}
 	customClass={dialogClasses}
@@ -171,14 +181,14 @@
 				{#if header}
 					{@render header()}
 				{:else}
-					<div class="dialog__title" id={id ? `${id}-dialog-title` : undefined}>
+					<div class="dialog__title" id={titleId}>
 						{title || ''}
 					</div>
 				{/if}
 			</div>
 		{/if}
 		{#if description}
-			<div class="dialog__description" id={id ? `${id}-dialog-description` : undefined}>
+			<div class="dialog__description" id={descriptionId}>
 				{description}
 			</div>
 		{/if}

package/dist/components/Drawer.svelte

@@ -93,7 +93,7 @@
 		focusFirstOnOpen = false,
 
 		// ARIA/アクセシビリティ
-		ariaLabel = 'Drawer',
+		ariaLabel,
 		ariaDescribedby,
 
 		// イベントハンドラー
@@ -108,17 +108,17 @@
 	// =========================================================================
 	/** Opens the drawer. */
 	export const open = (): void => {
-		modalRef?.open(title || ariaLabel);
+		modalRef?.open(title || ariaLabelValue);
 	};
 
 	/** Closes the drawer. */
 	export const close = (): void => {
-		modalRef?.close(title || ariaLabel);
+		modalRef?.close(title || ariaLabelValue);
 	};
 
 	/** Toggles between open and closed. */
 	export const toggle = (): void => {
-		modalRef?.toggle(title || ariaLabel);
+		modalRef?.toggle(title || ariaLabelValue);
 	};
 
 	/** @internal Completes the close animation. Called automatically. */
@@ -157,9 +157,19 @@
 		['drawer-wrapper', `drawer-wrapper--${position}`].filter(Boolean).join(' ')
 	);
 
-	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `drawer-${Math.random().toString(36).substring(2, 15)}`;
+	const baseId = $derived(id ?? fallbackId);
+	const titleId = $derived(`${baseId}-drawer-title`);
+	const descriptionId = $derived(`${baseId}-drawer-description`);
+
+	// 名前は 1 つだけ与える。aria-labelledby は aria-label より優先されるため、両方は付けない。
+	// header を差し替えるとタイトル要素が描画されないので、そのときは title を aria-label で渡す
+	const hasTitleElement = $derived(!!title && !header);
+	const ariaLabelValue = $derived(ariaLabel ?? (hasTitleElement ? undefined : title || 'Drawer'));
+	const ariaLabelledby = $derived(!ariaLabelValue && hasTitleElement ? titleId : undefined);
 	const ariaDescribedbyValue = $derived(
-		ariaDescribedby || (description ? 'drawer-description' : undefined)
+		ariaDescribedby || (description ? descriptionId : undefined)
 	);
 </script>
 
@@ -172,27 +182,30 @@
 	{onOpen}
 	{onClose}
 	componentType="Drawer"
-	{ariaLabel}
+	ariaLabel={ariaLabelValue}
 	{ariaLabelledby}
 	ariaDescribedby={ariaDescribedbyValue}
 	customClass={drawerClasses}
 	customStyles={drawerStyles()}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}" data-testid="drawer">
+	<div
+		class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}"
+		data-testid="drawer"
+	>
 		{#if header || title}
 			<div class="drawer__header">
 				{#if header}
 					{@render header()}
 				{:else}
-					<div class="drawer__title" id={id ? `${id}-drawer-title` : undefined}>
+					<div class="drawer__title" id={titleId}>
 						{title || ''}
 					</div>
 				{/if}
 			</div>
 		{/if}
 		{#if description}
-			<div class="drawer__description" id={id ? `${id}-drawer-description` : undefined}>
+			<div class="drawer__description" id={descriptionId}>
 				{description}
 			</div>
 		{/if}

package/dist/components/FileUploader.svelte

@@ -305,10 +305,13 @@
 		}
 	}}
 	aria-label={t('fileUploader.uploadFile')}
-	aria-describedby={`${id}-help`}
+	aria-describedby={`${id}-description`}
 >
 	{#if value && value.length > 0}
-		<div class="file-uploader__description file-uploader__description--with-file">
+		<div
+			id={`${id}-description`}
+			class="file-uploader__description file-uploader__description--with-file"
+		>
 			<Icon
 				size={iconSize}
 				filled={iconFilled}
@@ -340,7 +343,7 @@
 			{/each}
 		</ul>
 	{:else}
-		<div class="file-uploader__description">
+		<div id={`${id}-description`} class="file-uploader__description">
 			<Icon
 				size={iconSize}
 				filled={iconFilled}

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.72",
+	"version": "0.0.73",
 	"type": "module",
 	"keywords": [
 		"svelte",