@14ch/svelte-ui 0.0.72 → 0.0.74

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}
@@ -211,7 +221,6 @@
   gap: var(--svelte-ui-dialog-gap);
   align-items: center;
   justify-content: stretch;
-  min-height: var(--svelte-ui-dialog-header-height);
   padding: var(--svelte-ui-dialog-padding);
 }
 .dialog__header .dialog__title {
@@ -248,8 +257,12 @@
   overflow: hidden;
 }
 
+/* scrollable では線で区切られた固定バーになるため、高さは変数で決める。
+   明示した min-height はフレックスアイテムの自動最小サイズを打ち消すので縮小を止める */
 .dialog--scrollable .dialog__header {
-  margin-bottom: 0;
+  flex-shrink: 0;
+  min-height: var(--svelte-ui-dialog-header-height);
+  padding-block: 0;
   border-bottom: solid 1px var(--svelte-ui-border-color);
 }
 

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}
@@ -329,7 +342,6 @@
   gap: var(--svelte-ui-drawer-gap);
   align-items: center;
   justify-content: stretch;
-  min-height: var(--svelte-ui-drawer-header-height);
   padding: var(--svelte-ui-drawer-header-padding);
 }
 .drawer__header .drawer__title {
@@ -362,8 +374,14 @@
   border-bottom: 1px solid var(--svelte-ui-border-weak-color);
 }
 
+.drawer--scrollable {
+  /* 線で区切られた固定バーになるため、高さは変数で決める。
+     明示した min-height はフレックスアイテムの自動最小サイズを打ち消すので縮小を止める */
+}
 .drawer--scrollable .drawer__header {
-  margin-bottom: 0;
+  flex-shrink: 0;
+  min-height: var(--svelte-ui-drawer-header-height);
+  padding-block: 0;
   border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }
 .drawer--scrollable .drawer__body {

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.74",
 	"type": "module",
 	"keywords": [
 		"svelte",