📂 fix: My Files Modal Accessibility Improvements (#10844)

* feat: show column sort direction in all headers for my files datatable

* fix: refactor SortFilterHeader to use DropdownPopup so that keyboard nav and portaling actually work

* feat: visually indicate when a column filter is active

* chore: remove debug visuals

* chore: fix types and import order

* chore: add missing subItems prop to MenuItemProps interface

* feat: add arrow indicator for name column

* fix: page counter no longer shows 1/0 when no results

* feat: keep my files datatable size consistent to avoid issues with sizing of dropdown filter menus which made it difficult to see options

* fix: refactor filter cols button in my files datatable to use ariakit dropdown so keyboard nav works

* feat: better datatable column spacing following tanstack docs

* chore: ESlint complaints

* fix: localize string literals

* fix: move localize hook call inside the function components

* feat: add tooltip label for select all

* feat: better styling on floating label for file filter input

* feat: focus outline on search input

* feat: add search icon

* feat: add aria-sort props to header sort buttons

* feat: better screen reader labels to include information visually conveyed by filter and sort icons

* feat: add descriptive tooltips for headers for better accessibility for cognitive impairments

* chore: import orders

* feat: add more aria states for better feedback of filtered and sorted columns

* chore: add translation key

packages/client/src/common/menus.ts

@@ -28,8 +28,10 @@ export interface MenuItemProps {
     | undefined;
   ariaControls?: string;
   ref?: React.Ref<any>;
+  className?: string;
   render?:
     | RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined }>
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>
     | undefined;
+  subItems?: MenuItemProps[];
 }

packages/client/src/components/DropdownPopup.tsx

@@ -140,6 +140,7 @@ const Menu: React.FC<MenuProps> = ({
               className={cn(
                 'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
                 itemClassName,
+                item.className,
               )}
               disabled={item.disabled}
               render={item.render}