fix(react): file tree's files to indicate selected state (#268)

stackblitz · Aug 20, 2024 · bd8a3be · bd8a3be
1 parent bcbffe6
commit bd8a3be
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/packages/components/react/src/core/FileTree.tsx b/packages/components/react/src/core/FileTree.tsx
@@ -150,6 +150,7 @@ function File({ file: { depth, name }, onClick, selected }: FileProps) {
         'text-tk-elements-fileTree-file-iconColorSelected': selected,
       })}
       onClick={onClick}
+      aria-pressed={selected}
     >
       {name}
     </NodeButton>
@@ -162,14 +163,16 @@ interface ButtonProps {
   children: ReactNode;
   className?: string;
   onClick?: () => void;
+  'aria-pressed'?: boolean;
 }
 
-function NodeButton({ depth, iconClasses, onClick, className, children }: ButtonProps) {
+function NodeButton({ depth, iconClasses, onClick, className, 'aria-pressed': ariaPressed, children }: ButtonProps) {
   return (
     <button
       className={`flex items-center gap-2 w-full pr-2 border-2 border-transparent text-faded ${className ?? ''}`}
       style={{ paddingLeft: `${12 + depth * NODE_PADDING_LEFT}px` }}
       onClick={() => onClick?.()}
+      aria-pressed={ariaPressed === true ? 'true' : undefined}
     >
       <div className={classNames('scale-120 shrink-0', iconClasses)}></div>
       <span>{children}</span>