@aiquants/daily-report 0.8.0 → 0.9.0

package/src/client/components/daily-report-list.tsx

@@ -5,7 +5,7 @@
 import { SwipeCloseGuardContext, useSwipeGuardState, useSwipeToDismissOverlay, useTapClick, useTransitionDisplay } from "@aiquants/swipe-overlay"
 import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 import { Check, Star, Trash2 } from "lucide-react"
-import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { type CSSProperties, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
 import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
 import { resolveSourceTypeConfig, useDailyReportConfig } from "../config-context"
@@ -45,8 +45,6 @@ type TestableVirtualScrollHandle = VirtualScrollHandle & {
 
 type DailyReportListProps = {
     dailyReportItems: DailyReportItem[]
-    initialSelectedBusinessDate?: string | null
-    initialSelectedReportHubId?: number | null
     autoMarkRead?: boolean
     selectedReportHubId: number | null
     onSelectItem: (reportHubId: number | null) => void
@@ -234,15 +232,16 @@ const useAutoRead = (report: DailyReportDetail | null, isLoading: boolean, autoM
  * Daily report list cards with key metadata and preview content via virtual scrolling.
  * 主なメタデータと内容プレビューを仮想スクロール表示する日報リスト。
  */
-export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate = null, initialSelectedReportHubId = null, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, initialScrollOffset, onScrollOffsetChange }: DailyReportListProps) => {
+export const DailyReportList = ({ dailyReportItems, autoMarkRead = false, selectedReportHubId, onSelectItem, userId, initialScrollOffset, onScrollOffsetChange }: DailyReportListProps) => {
     const scrollContainerRef = useRef<HTMLDivElement | null>(null)
     const virtualScrollRef = useRef<VirtualScrollHandle>(null)
+    // list ロールの aria-label に使う (消費側が注入する業務ドメイン名。既定 "Daily Reports")
+    const { title } = useDailyReportConfig()
     const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef)
     const [overlayLabel, setOverlayLabel] = useState<string>("")
     const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
     const isMobileLayout = useIsMobileLayout()
     const wheelResetTimerRef = useRef<number | null>(null)
-    const appliedInitialSignatureRef = useRef<string | null>(null)
     const itemCount = dailyReportItems.length
     const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -285,34 +284,16 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     }, [updateViewportHeight])
 
     /**
-     * Synchronizes initial selection from props when data changes.
-     * データ変更時にプロパティからの初期選択状態を同期する副作用。
+     * Clears the selection when the list becomes empty.
+     * 一覧が空になったとき選択を解除する副作用。
      *
-     * Purpose: To respect deep-linked selection (ID or Date) when items are loaded.
-     * Dependencies: [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem]
-     * Cleanup: None.
+     * 依存配列: [itemCount, selectedReportHubId, onSelectItem]。クリーンアップ: なし。
      */
     useEffect(() => {
-        if (!itemCount) {
-            appliedInitialSignatureRef.current = null
-            if (selectedReportHubId !== null) onSelectItem(null)
-            return
-        }
-
-        const signature = `${initialSelectedReportHubId ?? ""}|${initialSelectedBusinessDate ?? ""}`
-        const hasInitial = (initialSelectedReportHubId ?? null) !== null || (initialSelectedBusinessDate ?? null) !== null
-
-        if (!hasInitial) appliedInitialSignatureRef.current = null
-
-        if (hasInitial && appliedInitialSignatureRef.current !== signature) {
-            const match = (initialSelectedReportHubId && dailyReportItems.find((i) => i.reportHubId === initialSelectedReportHubId)) || (initialSelectedBusinessDate && dailyReportItems.find((i) => i.businessDate === initialSelectedBusinessDate))
-            if (match) {
-                appliedInitialSignatureRef.current = signature
-                if (selectedReportHubId !== match.reportHubId) onSelectItem(match.reportHubId)
-                return
-            }
+        if (!itemCount && selectedReportHubId !== null) {
+            onSelectItem(null)
         }
-    }, [dailyReportItems, initialSelectedBusinessDate, initialSelectedReportHubId, selectedReportHubId, itemCount, onSelectItem])
+    }, [itemCount, selectedReportHubId, onSelectItem])
 
     /**
      * Restores focus after closing overlay (Desktop only).
@@ -329,7 +310,15 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
 
         const index = dailyReportItems.findIndex((item) => item.reportHubId === targetId)
         if (index >= 0) {
-            requestAnimationFrame(() => virtualScrollRef.current?.focusItemAtIndex(index))
+            // スクロールで行を DOM に入れてから、カード本体 (tabIndex=0) へフォーカスを戻す。
+            // focusItemAtIndex は enableKeyboardNavigation:false では no-op のため使えない
+            // (行ラッパーではなくカードへ直接フォーカスするのが本来の意図でもある)
+            virtualScrollRef.current?.scrollToIndex(index)
+            requestAnimationFrame(() => {
+                // detail-list の行も同じ data 属性を持つため、一覧側スコープで限定する
+                const card = document.querySelector<HTMLElement>(`[data-testid="daily-report-list"] [data-daily-report-button="${targetId}"]`)
+                card?.focus()
+            })
         }
     }, [isMobileDetailOpen, isMobileLayout, dailyReportItems, lastClosedItemIdRef])
 
@@ -377,6 +366,13 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const getItem = useCallback((index: number) => (index < itemCount ? dailyReportItems[index] : EMPTY_ITEM), [dailyReportItems, itemCount])
     const getItemHeight = useCallback(() => DEFAULT_ITEM_HEIGHT, [])
 
+    // 行レンダラーを安定参照にする。インライン矢印だと毎レンダー新関数になり、
+    // React.memo の ListReportItem が全行で再レンダーへ落ちる (選択変更で全行が再描画)
+    const renderListRow = useCallback(
+        (item: DailyReportItem, index: number) => <ListReportItem key={item.reportHubId} item={item} index={index} setSize={itemCount} isActive={item.reportHubId === selectedReportHubId} onSelect={handleItemSelect} />,
+        [itemCount, selectedReportHubId, handleItemSelect],
+    )
+
     const handleRangeChange = useCallback(
         (range: { visibleStartIndex: number }) => {
             const item = getItem(range.visibleStartIndex)
@@ -389,17 +385,6 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
         [getItem],
     )
 
-    const handleItemFocus = useCallback(
-        (index: number) => {
-            const item = getItem(index)
-            if (item && item.reportHubId > 0) {
-                if (item.reportHubId === selectedReportHubId) return
-                onSelectItem(item.reportHubId)
-            }
-        },
-        [getItem, onSelectItem, selectedReportHubId],
-    )
-
     const handleScroll = useCallback(() => {
         if (virtualScrollRef.current && onScrollOffsetChange) {
             onScrollOffsetChange(virtualScrollRef.current.getScrollPosition())
@@ -457,14 +442,25 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
                             pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                             inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                             wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
+                            // 行ラッパーへの tabIndex 付与 (タブ順汚染) と pointerdown フォーカス移動を止める。
+                            // 「★/既読タップで詳細ペインが切り替わる」不具合は 2 経路あり、これはその 1 つ目
+                            // (focus 経由)。2 つ目 (useTapClick の pointerup バブリング) はボタン側の
+                            // stopPointerPropagation が塞ぐ。onItemFocus は発火しなくなる
+                            enableKeyboardNavigation: false,
                         }}
                         onRangeChange={handleRangeChange}
                         onScroll={handleScroll}
-                        onItemFocus={handleItemFocus}
                         contentInsets={{ top: ITEM_VERTICAL_PADDING, bottom: ITEM_VERTICAL_PADDING }}
                         testId="daily-report-list"
-                        className="relative w-full">
-                        {(item) => <ListReportItem key={item.reportHubId} item={item} isActive={item.reportHubId === selectedReportHubId} onSelect={handleItemSelect} />}
+                        className="relative w-full"
+                        contentProps={{
+                            // 行 (role="option" ではなく role="listitem") だけを所有する list を、
+                            // スクロールバーと兄弟のコンテンツ要素に置く (virtualscroll 1.23.0 の口)。
+                            // 各行が aria-posinset/aria-setsize を持つので SR は「全 N 件中 M 番目」を読める
+                            role: "list",
+                            "aria-label": title,
+                        }}>
+                        {renderListRow}
                     </VirtualScroll>
                 </div>
                 <DailyReportSidePane dailyReportItems={dailyReportItems} selectedItem={selectedItem} heightStyle={columnHeightStyle} autoMarkRead={!isMobileLayout && autoMarkRead} isActive={selectedReportHubId !== null} userId={userId} />
@@ -482,9 +478,12 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
 /**
  * Loading skeleton representation for daily report list items.
  * 日報リストアイテム用読み込み中スケルトン表示。
+ *
+ * `wrapperProps` は仮想リストの位置属性 (role="listitem" / aria-posinset / aria-setsize) を
+ * 外側ラッパーへ透過するための口。読み込み中の行も一覧内の位置を SR へ公開する。
  */
-const ListSkeletonItem = () => (
-    <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+const ListSkeletonItem = (wrapperProps: React.HTMLAttributes<HTMLDivElement> & { "aria-posinset"?: number; "aria-setsize"?: number }) => (
+    <div {...wrapperProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
         <div data-skeleton className="flex h-full animate-pulse flex-col justify-between rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
             <div className="mb-3 flex flex-wrap items-center gap-3">
                 <div className="h-4 w-24 rounded bg-slate-200"></div>
@@ -657,6 +656,15 @@ const DailyReportSidePane = ({
     )
 }
 
+/**
+ * Skeleton line placeholder (module-scope so it is not re-created every render).
+ * スケルトンの 1 行プレースホルダー (レンダーごとに再生成しないようモジュールスコープに置く)。
+ *
+ * 以前は DailyReportDisplayPane の render 本体で宣言していたため、レンダーのたびに
+ * 別コンポーネント型となり全スケルトンが再マウントしていた。
+ */
+const SkeletonText = ({ className = "w-32" }: { className?: string }) => <div data-skeleton className={`h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-700 ${className}`} />
+
 /**
  * Shows the selected report details in the display tab, including content and metadata.
  * 表示タブ内で選択した日報の詳細とメタデータを表示するコンポーネント。
@@ -756,8 +764,6 @@ const DailyReportDisplayPane = ({
     const isMine = !!(userId && report?.userId === userId)
     const hasComments = uiComments.length > 0
 
-    const SkeletonText = ({ className = "w-32" }: { className?: string }) => <div data-skeleton className={`h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-700 ${className}`} />
-
     return (
         // biome-ignore lint/a11y/noStaticElementInteractions: Double click to edit feature
         <div className="relative space-y-4 text-slate-700 dark:text-slate-200" onDoubleClick={onDoubleClick}>
@@ -938,10 +944,13 @@ const extractPreviewLines = (content: string | null): string[] => {
  * Daily report summary card rendered inside the list tab.
  * List タブ内で表示する日報サマリーカード。
  */
-const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; isActive: boolean; onSelect: (id: number) => void }) => {
+const ListReportItem = memo(({ item, index, setSize, isActive, onSelect }: { item: DailyReportItem; index: number; setSize: number; isActive: boolean; onSelect: (id: number) => void }) => {
     const { fieldLabels, sourceTypeConfigs } = useDailyReportConfig()
     const { toggleStar, toggleRead, removeStaleItem } = useDailyReportActionContext()
     const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
+    // list 内の絶対位置を SR へ公開する (仮想化で描画されるのは窓分だけなので必須)。
+    // どの表示状態 (読み込み中・エラー・本体) でも同じ位置属性を載せる
+    const listItemProps = { role: "listitem", "aria-posinset": index + 1, "aria-setsize": setSize } as const
 
     // フェッチが一度でも試行されたかを追跡する ref
     const hasEverFetched = useRef(false)
@@ -959,19 +968,19 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
 
     if (error) {
         return (
-            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
-                <div className="flex h-full items-center justify-center rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">
+            <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+                <div className="flex h-full items-center justify-center rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-300">
                     <p>日報 {item.reportHubId.toLocaleString()} の概要読み込みに失敗しました。</p>
                 </div>
             </div>
         )
     }
 
-    if (isLoading) return <ListSkeletonItem />
+    if (isLoading) return <ListSkeletonItem {...listItemProps} />
 
     if (!report) {
         return (
-            <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+            <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
                 <div className="flex h-full items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-500 text-sm dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400">
                     <p>日報が見つかりません</p>
                 </div>
@@ -1006,8 +1015,19 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
         }
     }
 
+    /**
+     * Keeps card selection from firing when an inner action button is tapped.
+     * カード内のアクションボタン操作でカード選択を発火させないための伝播停止。
+     *
+     * カードの選択は useTapClick (pointerdown/pointerup 駆動) なので、click の
+     * stopPropagation だけでは止まらない。pointer イベント自体を止める必要がある。
+     */
+    const stopPointerPropagation = (e: React.PointerEvent) => {
+        e.stopPropagation()
+    }
+
     return (
-        <div className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
+        <div {...listItemProps} className="px-2 pb-3" style={{ height: ITEM_CONTAINER_HEIGHT }}>
             {/* biome-ignore lint/a11y/useSemanticElements: Card contains nested interactive elements (Star/Read buttons) */}
             <div
                 data-daily-report-button={item.reportHubId}
@@ -1017,7 +1037,11 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                 style={{ touchAction: "manipulation" }}
                 role="button"
                 tabIndex={0}
+                // aria-current が「一覧の現在項目」の意味論を担う。aria-pressed は
+                // 消費アプリの E2E ヘルパーが選択判定に使う既存契約のため併記を維持する
+                aria-current={isActive ? "true" : undefined}
                 aria-pressed={isActive}
+                aria-label={`${date} ${creator}`}
                 {...tapHandlers}>
                 <div className="mb-3 flex items-center gap-3 text-slate-600 text-sm">
                     <span className="inline-flex shrink-0 items-center rounded-full bg-slate-100 px-3 py-1 font-semibold text-xs dark:bg-slate-800 dark:text-slate-200">
@@ -1038,16 +1062,24 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                         <button
                             type="button"
                             title={report.isStarred ? "スターを外す" : "スターを付ける"}
+                            aria-label={report.isStarred ? "スターを外す" : "スターを付ける"}
+                            aria-pressed={report.isStarred}
                             data-list-star-button={item.reportHubId}
                             onClick={handleToggleStar}
+                            onPointerDown={stopPointerPropagation}
+                            onPointerUp={stopPointerPropagation}
                             className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
                             {report.isStarred ? <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" /> : <Star className="h-3.5 w-3.5 text-slate-300 dark:text-slate-500" />}
                         </button>
                         <button
                             type="button"
                             title={report.isRead ? "未読にする" : "既読にする"}
+                            aria-label={report.isRead ? "未読にする" : "既読にする"}
+                            aria-pressed={report.isRead}
                             data-list-read-button={item.reportHubId}
                             onClick={handleToggleRead}
+                            onPointerDown={stopPointerPropagation}
+                            onPointerUp={stopPointerPropagation}
                             className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 dark:hover:bg-slate-700">
                             {report.isRead ? <Check className="h-3.5 w-3.5 text-blue-500" /> : <UnreadIndicator className="text-xs" />}
                         </button>
@@ -1067,4 +1099,5 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
             </div>
         </div>
     )
-}
+})
+ListReportItem.displayName = "ListReportItem"

package/src/client/components/daily-report-page.tsx

@@ -12,6 +12,7 @@ import { useEffect } from "react"
 import type { DailyReportUser } from "../../shared/types"
 import { type DailyReportClientConfigInput, DailyReportConfigProvider, useDailyReportConfig } from "../config-context"
 import { DailyReportActionProvider } from "../contexts/daily-report-action-context"
+import { DailyReportErrorProvider } from "../contexts/daily-report-error-context"
 import { ensureDailyReportIdsStreamSession, reloadDocument, retryDailyReportIdsStream, useDailyReportIdsStream } from "../streaming/daily-report-ids-stream-session"
 import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
 import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
@@ -118,9 +119,13 @@ const DailyReportPageInner = ({ user, userId }: Omit<DailyReportPageProps, "conf
         // key でユーザーごとにプロバイダーをリマウントする。リロード無しのユーザー切替
         // (再ログイン・成り代わり) で items / removedIds / 保留キュー等の状態が旧ユーザーの
         // まま残ると、render-phase マージが旧ユーザーの行を新ユーザーの一覧へ持ち越す
-        <DailyReportActionProvider key={userId ?? "anonymous"} user={user} initialItems={stream.items} userId={userId}>
-            {showContent ? <DailyReportResolvedContent userId={userId} /> : stream.phase === "failed" ? <DailyReportLoadError /> : <DailyReportLoading />}
-        </DailyReportActionProvider>
+        // エラーサーフェスはユーザー切替のリマウント境界より外側 (バナーは切替を跨いで消えてよい)。
+        // アクションプロバイダーはこの notifyError を購読して失敗を可視化する
+        <DailyReportErrorProvider>
+            <DailyReportActionProvider key={userId ?? "anonymous"} user={user} initialItems={stream.items} userId={userId}>
+                {showContent ? <DailyReportResolvedContent userId={userId} /> : stream.phase === "failed" ? <DailyReportLoadError /> : <DailyReportLoading />}
+            </DailyReportActionProvider>
+        </DailyReportErrorProvider>
     )
 }
 

package/src/client/components/daily-report-resolved-content.tsx

@@ -2,6 +2,7 @@ import { Plus, RefreshCw, RotateCw } from "lucide-react"
 import type { ReactNode } from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useSearchParams } from "react-router"
+import { resolveTodayBusinessDateKey } from "../../shared/business-date"
 import { useDailyReportConfig } from "../config-context"
 import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
 import { useAnimatedNumber } from "../hooks/use-animated-number"
@@ -82,8 +83,9 @@ export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedConten
 
     const handleCreateReport = async () => {
         const businessDateParam = searchParams.get("businessDate")
-        const today = new Date().toISOString().split("T")[0]
-        const dateToUse = businessDateParam || today
+        // 「本日」はローカル暦日で決める。toISOString() の UTC 日付だと JST 深夜〜午前帯に
+        // 前日の営業日へ新規日報が登録されてしまう
+        const dateToUse = businessDateParam || resolveTodayBusinessDateKey()
         const newId = await createReport(dateToUse)
         setSelectedItemId(newId)
     }
@@ -153,7 +155,7 @@ export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedConten
                     </div>
                 ),
             })}
-            <div className="h-full bg-slate-50 dark:bg-slate-500">
+            <div className="h-full bg-slate-50 dark:bg-slate-950">
                 <div className="flex h-full w-full max-w-6xl flex-1 flex-col p-1">
                     <Tabs defaultValue="list" className="flex h-full flex-1 flex-col">
                         <div className="flex items-center justify-between gap-2 rounded-md bg-slate-50 p-1 transition-colors dark:bg-slate-900/70 dark:text-slate-200">

package/src/client/components/report-views.spec.tsx

@@ -39,7 +39,7 @@ import { CONTENT_DRAG_POINTER_INPUTS, ITEM_VERTICAL_PADDING, TAP_SCROLL_CIRCLE_O
 type CapturedVirtualScrollProps = {
     testId?: string
     itemCount: number
-    behaviorOptions?: { pointerDragInputs?: unknown; enablePointerDrag?: unknown }
+    behaviorOptions?: { pointerDragInputs?: unknown; enablePointerDrag?: unknown; enableKeyboardNavigation?: unknown }
     scrollBarOptions?: { tapScrollCircleOptions?: unknown; renderThumbOverlay?: (props: Record<string, unknown>) => ReactNode }
     getItemKey?: unknown
     getItemHeight?: unknown
@@ -48,6 +48,7 @@ type CapturedVirtualScrollProps = {
     onRangeChange?: unknown
     onScroll?: unknown
     contentInsets?: unknown
+    contentProps?: Record<string, unknown>
 }
 
 const captured: CapturedVirtualScrollProps[] = []
@@ -84,10 +85,13 @@ vi.mock("@aiquants/virtualscroll", async () => {
                     onRangeChange: props.onRangeChange,
                     onScroll: props.onScroll,
                     contentInsets: props.contentInsets,
+                    contentProps: props.contentProps,
                 })
                 useHandle(ref, () => ({ scrollTo: () => 0, scrollToIndex: () => {}, getScrollPosition: () => 0, getContentSize: () => 0, getViewportSize: () => 0, updateItemSize: () => {}, focusItemAtIndex: () => {} }))
+                // 本物は contentProps をコンテンツ要素 (行だけを所有する list) へ透過する。
+                // ロール階層 (list → listitem) を DOM で検査できるよう代役でも同じ口へ流す
                 return (
-                    <div data-testid={props.testId}>
+                    <div data-testid={props.testId} {...props.contentProps}>
                         {Array.from({ length: props.itemCount }, (_, index) => (
                             // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
                             <div key={index}>{props.children(props.getItem(index), index)}</div>
@@ -338,3 +342,34 @@ describe("日報ビューの描画と結線", () => {
         expect(detailViews).toEqual(REPORT_DETAIL_VIEWS.map((view) => view.file).sort())
     })
 })
+
+describe("日報ビューのアクセシビリティ (仮想化リストのセマンティクス)", () => {
+    it.each(VIEW_CASES)("%s は行だけを所有する list をコンテンツ要素へ置く", (_file, view) => {
+        // role="list" を「スクロールバーと兄弟の」コンテンツ要素へ置く (contentProps 経由)。
+        // ペイン以上の階層に置くと ScrollBar の role="scrollbar" が不許可の所有子になる
+        renderView(view.render())
+        const props = optionsOf(view.testId)
+        expect(props.contentProps?.role).toBe("list")
+        expect(typeof props.contentProps?.["aria-label"]).toBe("string")
+        expect((props.contentProps?.["aria-label"] as string).length).toBeGreaterThan(0)
+    })
+
+    it.each(VIEW_CASES)("%s は enableKeyboardNavigation を false にする (タブ順汚染と focus 奪取の防止)", (_file, view) => {
+        // 既定 true は行ラッパーへ tabIndex=-1 を付けてタブ順を汚し、pointerdown で
+        // 行へフォーカスを移す (★/既読タップで詳細ペインが黙って切り替わる不具合の原因)。
+        // false にすることで list/listitem のロール階層も有効になる
+        renderView(view.render())
+        expect(optionsOf(view.testId).behaviorOptions?.enableKeyboardNavigation).toBe(false)
+    })
+
+    it.each(VIEW_CASES)("%s は各行へ role=listitem と aria-posinset/aria-setsize を付ける", (_file, view) => {
+        // 仮想化で描画されるのは窓分だけなので、絶対位置 (posinset) と全件数 (setsize) を
+        // 各行に載せないと SR は「全 N 件中 M 番目」を読めない
+        const { container } = renderView(view.render())
+        const listItems = container.querySelectorAll('[role="listitem"]')
+        expect(listItems.length).toBe(1)
+        const row = listItems[0]
+        expect(row.getAttribute("aria-posinset")).toBe("1")
+        expect(row.getAttribute("aria-setsize")).toBe("1")
+    })
+})

package/src/client/config-context.tsx

@@ -43,6 +43,19 @@ export type DailyReportFieldLabels = {
     relationsEmpty: string
 }
 
+/**
+ * Mutation-failure notification payload (for a host-supplied error surface).
+ * ミューテーション失敗の通知情報 (ホストが独自の通知 UI を出すための口)。
+ */
+export type DailyReportErrorInfo = {
+    /** 失敗した操作の種別 (create / update / publish / delete / addComment / deleteComment / toggleStar / toggleRead)。 */
+    operation: string
+    /** 表示用のメッセージ (パッケージ内蔵バナー用)。 */
+    message: string
+    /** 元例外 (診断用)。 */
+    cause?: unknown
+}
+
 /** データソースごとのバッジ表示設定。 */
 export type SourceTypeConfig = {
     label: string
@@ -69,6 +82,11 @@ export type DailyReportClientConfig = {
     renderHeader: (props: DailyReportHeaderProps) => ReactNode
     /** 開発向けコントロール (SSE 購読トグル等) を表示するか。 */
     showDevControls: boolean
+    /**
+     * ミューテーション失敗時の通知ポート。未指定ならパッケージ内蔵の role="alert"
+     * バナーで表示する。ホストが独自トースト等を持つ場合はここへ委譲する。
+     */
+    onError?: (info: DailyReportErrorInfo) => void
 }
 
 /**

package/src/client/contexts/daily-report-action-context.spec.tsx

@@ -260,3 +260,19 @@ describe("遅延ミューテーション継続の門番 (ユーザー切替汚
         expect(getCachedReport(999, { ignoreExpiry: true })?.subject).toBe("USER_A confidential draft subject")
     })
 })
+
+describe("initialItems の既定値 (無限レンダー防止)", () => {
+    it("initialItems を省略してもマウントできる (render-phase の再帰を起こさない)", async () => {
+        // 既定を `= []` にすると毎レンダーで新配列参照になり、`initialItems !== prevInitialItems`
+        // が常に真 → setState 無限ループで React が描画を中断していた。安定既定でこれを防ぐ
+        expect(() =>
+            render(
+                <DailyReportActionProvider user={{ id: "a", displayName: "User A" }}>
+                    <ContextProbe />
+                </DailyReportActionProvider>,
+            ),
+        ).not.toThrow()
+        await waitFor(() => expect(contextRef.current).not.toBeNull())
+        expect(contextRef.current?.items).toEqual([])
+    })
+})