@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Tree/components/TreeContent.tsx

@@ -15,19 +15,39 @@ export interface TreeContentProps<T> {
   className?: string;
   /** Override aria-label for the container. */
   ariaLabel?: string;
+  /**
+   * Container ARIA role. Defaults to `'tree'` for standalone composition
+   * use. `<TreeRoot>` passes `'group'` because its own outer element
+   * already carries `role="tree"` + `aria-activedescendant`.
+   */
+  role?: 'tree' | 'group' | 'presentation';
 }
 
-export function TreeContent<T>({ children, className, ariaLabel }: TreeContentProps<T>) {
-  const { flatRows, labels, selected, focused, matchingIds, appearance } = useTreeContext<T>();
+/** DOM id for a tree row — referenced by `aria-activedescendant`. */
+export const treeRowDomId = (id: string) => `tree-row-${id}`;
+
+export function TreeContent<T>({
+  children,
+  className,
+  ariaLabel,
+  role = 'tree',
+}: TreeContentProps<T>) {
+  const { flatRows, labels, selected, focused, matchingIds, appearance, selectionMode } =
+    useTreeContext<T>();
 
   if (flatRows.length === 0) {
     return <TreeEmpty>{labels.empty}</TreeEmpty>;
   }
 
+  const isTree = role === 'tree';
+
   return (
     <div
-      role="tree"
-      aria-label={ariaLabel ?? labels.ariaLabel}
+      role={role}
+      aria-label={isTree ? (ariaLabel ?? labels.ariaLabel) : undefined}
+      aria-multiselectable={
+        isTree && selectionMode === 'multiple' ? true : undefined
+      }
       className={cn('relative flex flex-col py-1', className)}
       style={appearanceToStyle(appearance)}
     >

package/src/tools/Tree/components/TreeLabel.tsx

@@ -18,10 +18,16 @@ export interface TreeLabelProps {
 function TreeLabelRaw({ children, isMatchingSearch, className }: TreeLabelProps) {
   return (
     <span
-      style={{ fontSize: 'var(--tree-font-size)' }}
+      // Colour is set inline via the semantic token rather than the
+      // `text-foreground` Tailwind utility: that class isn't always
+      // emitted into a consuming app's stylesheet (the bundler only
+      // generates utilities it sees referenced in scanned source), so
+      // relying on it left the label rendering as UA-default black on
+      // a dark surface. `var(--foreground)` always resolves.
+      style={{ fontSize: 'var(--tree-font-size)', color: 'var(--foreground)' }}
       className={cn(
         'truncate leading-tight tracking-[-0.005em]',
-        isMatchingSearch && 'font-medium text-foreground',
+        isMatchingSearch && 'font-medium',
         className,
       )}
     >

package/src/tools/Tree/components/TreeRow.tsx

@@ -8,6 +8,7 @@ import { useTreeContext } from '../context/TreeContext';
 import { radiusClass, rowStateClasses } from '../data/appearance';
 import type { FlatRow, TreeRowRenderProps } from '../types';
 import { TreeChevron } from './TreeChevron';
+import { treeRowDomId } from './TreeContent';
 import { TreeIcon } from './TreeIcon';
 import { TreeIndentGuides } from './TreeIndentGuides';
 import { TreeLabel } from './TreeLabel';
@@ -34,6 +35,7 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
     focused,
     matchingIds,
     select,
+    setSelectedIds,
     toggle,
     setFocus,
     activate,
@@ -44,10 +46,11 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
     renderContextMenu,
   } = ctx;
 
-  const { node, level, isFolder, isExpanded, isLoading } = row;
+  const { node, level, isFolder, isExpanded, isLoading, posInSet, setSize } = row;
   const isSelected = selected.has(node.id);
   const isFocused = focused === node.id;
   const isMatchingSearch = matchingIds.has(node.id);
+  const isMultiSelect = ctx.selectionMode === 'multiple';
 
   const slot: TreeRowRenderProps<T> = {
     node,
@@ -68,7 +71,13 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (node.disabled) return;
     setFocus(node.id);
-    select(node.id);
+    // Multi-select: a plain click replaces the selection; ⌘/Ctrl-click
+    // toggles the clicked row (classic file-manager / VSCode behaviour).
+    if (isMultiSelect && !(e.metaKey || e.ctrlKey)) {
+      setSelectedIds([node.id]);
+    } else {
+      select(node.id);
+    }
     if (isFolder) {
       toggle(node.id);
     } else if (activationMode === 'single-click') {
@@ -76,7 +85,6 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
     } else if (activationMode === 'single-click-preview') {
       activate(node, { preview: true });
     }
-    e.currentTarget.scrollIntoView?.({ block: 'nearest' });
   };
 
   const handleDoubleClick = () => {
@@ -87,11 +95,13 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
 
   const trigger = (
     <div
+      id={treeRowDomId(node.id)}
       role="treeitem"
       aria-level={level + 1}
+      aria-posinset={posInSet}
+      aria-setsize={setSize}
       aria-expanded={isFolder ? isExpanded : undefined}
-      aria-selected={isSelected || undefined}
-      aria-current={isSelected ? 'true' : undefined}
+      aria-selected={ctx.selectionMode === 'none' ? undefined : isSelected}
       aria-disabled={node.disabled || undefined}
       data-tree-row=""
       data-id={node.id}
@@ -100,7 +110,7 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
       data-focused={isFocused && !isSelected ? 'true' : undefined}
       data-folder={isFolder || undefined}
       data-expanded={isExpanded || undefined}
-      tabIndex={isFocused ? 0 : -1}
+      tabIndex={-1}
       style={{
         paddingLeft: 6 + level * appearance.indent,
         height: 'var(--tree-row-height)',

package/src/tools/Tree/data/flatten.ts

@@ -32,12 +32,16 @@ export function flattenTree<T>({
   const out: FlatRow<T>[] = [];
 
   const walk = (nodes: TreeNode<T>[], level: number, parentId: TreeItemId | null) => {
-    for (const node of nodes) {
-      if (filterNode && !filterNode(node)) continue;
+    // Visible siblings only — `aria-setsize`/`posinset` must ignore filtered nodes.
+    const visible = filterNode ? nodes.filter(filterNode) : nodes;
+    const setSize = visible.length;
 
+    visible.forEach((node, index) => {
       const isFolder = isNodeFolder(node);
       const isExpanded = expandedIds.has(node.id);
-      const resolved = isFolder ? resolveChildren(cache, node) : { children: [], status: 'loaded' as const };
+      const resolved = isFolder
+        ? resolveChildren(cache, node)
+        : { children: [], status: 'loaded' as const };
 
       out.push({
         node,
@@ -47,12 +51,14 @@ export function flattenTree<T>({
         isExpanded,
         isLoading: resolved.status === 'loading',
         hasError: resolved.status === 'error',
+        posInSet: index + 1,
+        setSize,
       });
 
       if (isFolder && isExpanded && resolved.children) {
         walk(resolved.children, level + 1, node.id);
       }
-    }
+    });
   };
 
   walk(roots, 0, null);

package/src/tools/Tree/types.ts

@@ -174,4 +174,8 @@ export interface FlatRow<T> {
   isExpanded: boolean;
   isLoading: boolean;
   hasError: boolean;
+  /** 1-based position among visible siblings (for `aria-posinset`). */
+  posInSet: number;
+  /** Count of visible siblings sharing this row's parent (for `aria-setsize`). */
+  setSize: number;
 }

package/src/tools/Uploader/components/UploadAddButton.tsx

@@ -5,7 +5,8 @@ import { useUploady } from '@rpldy/uploady';
 import { Plus } from 'lucide-react';
 import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { buildAcceptString, logger } from '../utils';
+import { useT } from '@djangocfg/i18n';
+import { buildAcceptString, getAssetTypeFromMime, logger } from '../utils';
 import type { AssetType } from '../types';
 
 interface UploadAddButtonProps {
@@ -19,6 +20,16 @@ interface UploadAddButtonProps {
   children?: React.ReactNode;
 }
 
+/** Returns true if a file's MIME type is allowed by the accepted asset types. */
+function isAcceptedType(file: File, accept: AssetType[]): boolean {
+  if (file.type) {
+    if (file.type.startsWith('image/')) return accept.includes('image');
+    if (file.type.startsWith('audio/')) return accept.includes('audio');
+    if (file.type.startsWith('video/')) return accept.includes('video');
+  }
+  return accept.includes(file.type ? getAssetTypeFromMime(file.type) : 'document');
+}
+
 export function UploadAddButton({
   accept = ['image', 'audio', 'video', 'document'],
   multiple = true,
@@ -29,6 +40,7 @@ export function UploadAddButton({
   size = 'default',
   children,
 }: UploadAddButtonProps) {
+  const t = useT();
   const { upload } = useUploady();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -38,18 +50,27 @@ export function UploadAddButton({
     const fileArray = Array.from(files);
     const maxBytes = maxSizeMB * 1024 * 1024;
 
-    const validFiles = fileArray.filter(file => {
+    let validFiles = fileArray.filter(file => {
       if (file.size > maxBytes) {
-        logger.warn(`File ${file.name} exceeds max size of ${maxSizeMB}MB`);
+        logger.warn(`File "${file.name}" exceeds max size of ${maxSizeMB}MB`);
+        return false;
+      }
+      if (!isAcceptedType(file, accept)) {
+        logger.warn(`File "${file.name}" (${file.type || 'unknown'}) is not an accepted type`);
         return false;
       }
       return true;
     });
 
+    // Enforce single-file selection when multiple is disabled.
+    if (!multiple && validFiles.length > 1) {
+      validFiles = validFiles.slice(0, 1);
+    }
+
     if (validFiles.length > 0) {
       upload(validFiles);
     }
-  }, [upload, maxSizeMB]);
+  }, [upload, maxSizeMB, accept, multiple]);
 
   const handleClick = useCallback(() => {
     inputRef.current?.click();
@@ -71,6 +92,8 @@ export function UploadAddButton({
         multiple={multiple}
         onChange={handleInputChange}
         className="hidden"
+        tabIndex={-1}
+        aria-hidden="true"
         disabled={disabled}
       />
       <Button
@@ -82,8 +105,8 @@ export function UploadAddButton({
       >
         {children || (
           <>
-            <Plus className="h-4 w-4 mr-2" />
-            Add Files
+            <Plus className="h-4 w-4 mr-2" aria-hidden="true" />
+            {t('tools.upload.upload')}
           </>
         )}
       </Button>

package/src/tools/Uploader/components/UploadDropzone.tsx

@@ -5,9 +5,21 @@ import { useUploady } from '@rpldy/uploady';
 import { Upload } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useT } from '@djangocfg/i18n';
-import { buildAcceptString, logger } from '../utils';
+import { buildAcceptString, getAssetTypeFromMime, logger } from '../utils';
 import { useClipboardPaste } from '../hooks/useClipboardPaste';
-import type { UploadDropzoneProps } from '../types';
+import type { AssetType, UploadDropzoneProps } from '../types';
+
+/** Returns true if a file's MIME type is allowed by the accepted asset types. */
+function isAcceptedType(file: File, accept: AssetType[]): boolean {
+  // image/audio/video are matched by prefix so unknown subtypes still pass.
+  if (file.type) {
+    if (file.type.startsWith('image/')) return accept.includes('image');
+    if (file.type.startsWith('audio/')) return accept.includes('audio');
+    if (file.type.startsWith('video/')) return accept.includes('video');
+  }
+  // No/other MIME type — fall back to asset detection (defaults to document).
+  return accept.includes(file.type ? getAssetTypeFromMime(file.type) : 'document');
+}
 
 function useOptionalUploady(uploadFn?: (files: File[]) => void) {
   try {
@@ -37,6 +49,7 @@ export function UploadDropzone({
   const upload = useOptionalUploady(uploadFn);
   const inputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [rejectedCount, setRejectedCount] = useState(0);
   const dragCounter = useRef(0);
 
   // Prepare data
@@ -55,11 +68,12 @@ export function UploadDropzone({
     'relative flex flex-col items-center justify-center',
     'border-2 border-dashed rounded-lg cursor-pointer',
     'transition-colors duration-200',
+    'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
     compact ? 'p-4' : 'p-8',
     isDragging
       ? 'border-primary bg-primary/5'
       : 'border-muted-foreground/25 hover:border-muted-foreground/50',
-    disabled && 'opacity-50 cursor-not-allowed',
+    disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
     className
   ), [compact, isDragging, disabled, className]);
 
@@ -70,19 +84,30 @@ export function UploadDropzone({
   const handleFiles = useCallback((files: FileList | File[]) => {
     const fileArray = Array.from(files);
 
-    const validFiles = fileArray.filter(file => {
+    let validFiles = fileArray.filter(file => {
       if (file.size > maxBytes) {
-        logger.warn(`File ${file.name} exceeds max size of ${maxSizeMB}MB`);
+        logger.warn(`File "${file.name}" exceeds max size of ${maxSizeMB}MB`);
+        return false;
+      }
+      if (!isAcceptedType(file, accept)) {
+        logger.warn(`File "${file.name}" (${file.type || 'unknown'}) is not an accepted type`);
         return false;
       }
       return true;
     });
 
+    // Enforce single-file selection when multiple is disabled.
+    if (!multiple && validFiles.length > 1) {
+      validFiles = validFiles.slice(0, 1);
+    }
+
+    setRejectedCount(fileArray.length - validFiles.length);
+
     if (validFiles.length > 0) {
       onFilesSelected?.(validFiles);
       upload(validFiles);
     }
-  }, [upload, maxBytes, maxSizeMB, onFilesSelected]);
+  }, [upload, maxBytes, maxSizeMB, accept, multiple, onFilesSelected]);
 
   // Build accept MIME types for clipboard paste (e.g. ['image', 'video'] → ['image', 'video'])
   const pasteAcceptTypes = useMemo(
@@ -142,6 +167,14 @@ export function UploadDropzone({
     }
   }, [disabled]);
 
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files?.length) {
       handleFiles(e.target.files);
@@ -153,9 +186,21 @@ export function UploadDropzone({
   const displayText = isDragging ? labels.dropHere : labels.dragDrop;
   const showMaxSize = !compact;
 
+  // Announce drag/rejection state to assistive tech.
+  const liveMessage = isDragging
+    ? labels.dropHere
+    : rejectedCount > 0
+      ? `${rejectedCount} file(s) were not accepted`
+      : '';
+
   return (
     <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      aria-label={labels.dragDrop}
       onClick={handleClick}
+      onKeyDown={handleKeyDown}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
@@ -169,18 +214,29 @@ export function UploadDropzone({
         multiple={multiple}
         onChange={handleInputChange}
         className="hidden"
+        tabIndex={-1}
+        aria-hidden="true"
         disabled={disabled}
       />
 
       {children || (
         <>
-          <Upload className={iconClassName} />
+          <Upload className={iconClassName} aria-hidden="true" />
           <p className={textClassName}>{displayText}</p>
           {showMaxSize && (
             <p className="text-xs text-muted-foreground/60 mt-1">{labels.maxSize}</p>
           )}
+          {rejectedCount > 0 && !isDragging && (
+            <p className="text-xs text-destructive mt-1">
+              {rejectedCount} file(s) skipped (size or type)
+            </p>
+          )}
         </>
       )}
+
+      <span className="sr-only" role="status" aria-live="polite">
+        {liveMessage}
+      </span>
     </div>
   );
 }

package/src/tools/Uploader/components/UploadPageDropOverlay.tsx

@@ -5,7 +5,7 @@ import { useUploady } from '@rpldy/uploady';
 import { Upload } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useT } from '@djangocfg/i18n';
-import { logger } from '../utils';
+import { getAssetTypeFromMime, logger } from '../utils';
 import type { AssetType } from '../types';
 
 export interface UploadPageDropOverlayProps {
@@ -21,6 +21,16 @@ export interface UploadPageDropOverlayProps {
   onFilesDropped?: (files: File[]) => void;
 }
 
+/** Returns true if a file's MIME type is allowed by the accepted asset types. */
+function isAcceptedType(file: File, accept: AssetType[]): boolean {
+  if (file.type) {
+    if (file.type.startsWith('image/')) return accept.includes('image');
+    if (file.type.startsWith('audio/')) return accept.includes('audio');
+    if (file.type.startsWith('video/')) return accept.includes('video');
+  }
+  return accept.includes(file.type ? getAssetTypeFromMime(file.type) : 'document');
+}
+
 export function UploadPageDropOverlay({
   accept = ['image', 'audio', 'video', 'document'],
   maxSizeMB = 100,
@@ -57,7 +67,11 @@ export function UploadPageDropOverlay({
 
     const validFiles = fileArray.filter(file => {
       if (file.size > maxBytes) {
-        logger.warn(`File ${file.name} exceeds max size of ${maxSizeMB}MB`);
+        logger.warn(`File "${file.name}" exceeds max size of ${maxSizeMB}MB`);
+        return false;
+      }
+      if (!isAcceptedType(file, accept)) {
+        logger.warn(`File "${file.name}" (${file.type || 'unknown'}) is not an accepted type`);
         return false;
       }
       return true;
@@ -68,7 +82,7 @@ export function UploadPageDropOverlay({
       onFilesDropped?.(validFiles);
       upload(validFiles);
     }
-  }, [upload, maxBytes, maxSizeMB, onFilesDropped]);
+  }, [upload, maxBytes, maxSizeMB, accept, onFilesDropped]);
 
   const handleDragEnter = useCallback((e: DragEvent) => {
     e.preventDefault();
@@ -129,7 +143,7 @@ export function UploadPageDropOverlay({
   // Prepare default content
   const defaultContent = (
     <div className="flex flex-col items-center gap-4 p-8 rounded-xl border-2 border-dashed border-primary bg-background/90">
-      <Upload className="h-16 w-16 text-primary" />
+      <Upload className="h-16 w-16 text-primary" aria-hidden="true" />
       <div className="text-center">
         <p className="text-lg font-medium">{labels.dropHere}</p>
         <p className="text-sm text-muted-foreground">{labels.uploading}</p>
@@ -138,7 +152,7 @@ export function UploadPageDropOverlay({
   );
 
   return (
-    <div className={overlayClassName}>
+    <div className={overlayClassName} role="status" aria-live="polite">
       {children || defaultContent}
     </div>
   );

package/src/tools/Uploader/components/UploadPreviewItem.tsx

@@ -58,7 +58,8 @@ export function UploadPreviewItem({
 
   // Prepare visibility flags
   const Icon = ASSET_ICONS[assetType];
-  const canShowPreview = showThumbnail && !!previewUrl && assetType === 'image';
+  const canShowImagePreview = showThumbnail && !!previewUrl && assetType === 'image';
+  const canShowVideoPreview = showThumbnail && !!previewUrl && assetType === 'video';
   const canRetry = (status === 'error' || status === 'aborted') && !!onRetry;
   const canRemove = REMOVABLE_STATUSES.includes(status) && !!onRemove;
   const isUploading = status === 'uploading';
@@ -89,21 +90,21 @@ export function UploadPreviewItem({
       case 'uploading':
         return (
           <Badge variant="secondary" className="gap-1 tabular-nums">
-            <Loader2 className="h-3 w-3 animate-spin" />
+            <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
             {progressPercent}%
           </Badge>
         );
       case 'complete':
         return (
-          <Badge variant="default" className="gap-1 bg-green-500">
-            <CheckCircle className="h-3 w-3" />
+          <Badge variant="default" className="gap-1 bg-success text-success-foreground border-transparent">
+            <CheckCircle className="h-3 w-3" aria-hidden="true" />
             {labels.uploaded}
           </Badge>
         );
       case 'error':
         return (
           <Badge variant="destructive" className="gap-1">
-            <AlertCircle className="h-3 w-3" />
+            <AlertCircle className="h-3 w-3" aria-hidden="true" />
             {labels.failed}
           </Badge>
         );
@@ -124,15 +125,26 @@ export function UploadPreviewItem({
 
   // Prepare thumbnail content
   const thumbnailContent = useMemo(() => {
-    if (canShowPreview) {
-      return previewUrl ? (
-        <img src={previewUrl} alt={file.name} className="w-full h-full object-cover" />
-      ) : (
-        <Skeleton className="w-full h-full" />
+    if (canShowImagePreview && previewUrl) {
+      return <img src={previewUrl} alt={file.name} className="w-full h-full object-cover" />;
+    }
+    if (canShowVideoPreview && previewUrl) {
+      return (
+        <video
+          src={previewUrl}
+          className="w-full h-full object-cover"
+          muted
+          playsInline
+          preload="metadata"
+          aria-label={file.name}
+        />
       );
     }
-    return <Icon className="h-6 w-6 text-muted-foreground" />;
-  }, [canShowPreview, previewUrl, file.name, Icon]);
+    if (showThumbnail && !previewUrl && (assetType === 'image' || assetType === 'video')) {
+      return <Skeleton className="w-full h-full" />;
+    }
+    return <Icon className="h-6 w-6 text-muted-foreground" aria-hidden="true" />;
+  }, [canShowImagePreview, canShowVideoPreview, showThumbnail, previewUrl, assetType, file.name, Icon]);
 
   return (
     <div className={containerClassName}>
@@ -158,7 +170,13 @@ export function UploadPreviewItem({
 
         <p className="text-xs text-muted-foreground tabular-nums">{fileSize}</p>
 
-        {isUploading && <Progress value={progressPercent} className="h-1 mt-1" />}
+        {isUploading && (
+          <Progress
+            value={progressPercent}
+            className="h-1 mt-1"
+            aria-label={`${progressPercent}%`}
+          />
+        )}
 
         {hasError && (
           <Tooltip>
@@ -179,8 +197,14 @@ export function UploadPreviewItem({
         {canRetry && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleRetry}>
-                <RotateCcw className="h-4 w-4" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleRetry}
+                aria-label={labels.retry}
+              >
+                <RotateCcw className="h-4 w-4" aria-hidden="true" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{labels.retry}</TooltipContent>
@@ -190,8 +214,14 @@ export function UploadPreviewItem({
         {canRemove && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleRemove}>
-                <X className="h-4 w-4" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleRemove}
+                aria-label={removeTooltip}
+              >
+                <X className="h-4 w-4" aria-hidden="true" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{removeTooltip}</TooltipContent>