diff --git a/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx b/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx index ff4af6791..750b46669 100644 --- a/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx +++ b/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx @@ -1,6 +1,12 @@ -import { ChevronLeft, ChevronRight } from 'lucide-react'; +import { + ChevronDown, + ChevronLeft, + ChevronRight, + ChevronUp, +} from 'lucide-react'; import { type PointerEvent as ReactPointerEvent, + type ReactNode, useCallback, useEffect, useId, @@ -77,10 +83,13 @@ export function ImageCanvasBackgroundMusicPresetMarquee({ presets, isLocked, onSelectPreset, + headerTrailing, }: { presets: readonly BackgroundMusicPromptPreset[]; isLocked: boolean; onSelectPreset: (preset: BackgroundMusicPromptPreset) => void; + /** 标题行右端的展示位。字数计数要和「预设」同排,但它属于 composer 的状态。 */ + headerTrailing?: ReactNode; }) { const trackId = useId(); const [isExpanded, setIsExpanded] = useState(false); @@ -325,13 +334,20 @@ export function ImageCanvasBackgroundMusicPresetMarquee({ size="xs" shape="pill" className="image-canvas-editor__background-music-presets-toggle" + // 图标化后文案不再进入可访问名,必须由 aria-label 承担。 + aria-label={isExpanded ? '收起' : '展开'} aria-expanded={isExpanded} aria-controls={trackId} disabled={isLocked} onClick={() => setIsExpanded((expanded) => !expanded)} > - {isExpanded ? '收起' : '展开'} + {isExpanded ? ( +