fix(ui): завершить доступность формы пользователей

components/data-grids/users-data-grid.tsx

@@ -31,9 +31,9 @@ import {
 
 function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
   return (
-    <div
+    <div aria-hidden="true"
       className={cn(
-        "size-8 rounded-full flex items-center justify-center text-white text-[10px] font-semibold shrink-0 bg-gradient-to-br from-blue-500 to-violet-500",
+        "size-8 rounded-full flex items-center justify-center text-foreground text-[10px] font-semibold shrink-0 bg-muted",
         !active && "opacity-50",
       )}
     >
@@ -74,11 +74,13 @@ function UsersDataGrid({
           const expanded = row.getIsExpanded()
           return (
             <div className="flex items-start gap-2 min-w-0">
+              <Button type="button" size="sm" variant="ghost" aria-label={"Доступ и привязки пользователя " + u.name} aria-expanded={expanded} className="size-8 shrink-0 p-0" onClick={event => { event.stopPropagation(); row.toggleExpanded() }}>
               {expanded ? (
-                <ChevronDownIcon className="size-3.5 mt-2 shrink-0 text-muted-foreground" />
+                <ChevronDownIcon aria-hidden="true" className="size-3.5 mt-2 shrink-0 text-muted-foreground" />
               ) : (
-                <ChevronRightIcon className="size-3.5 mt-2 shrink-0 text-muted-foreground/40" />
+                <ChevronRightIcon aria-hidden="true" className="size-3.5 mt-2 shrink-0 text-muted-foreground/40" />
               )}
+              </Button>
               <AvatarCircle avatar={u.avatar} active={u.active} />
               <div className="min-w-0">
                 <p className="text-sm font-medium truncate">{u.name}</p>
@@ -137,7 +139,7 @@ function UsersDataGrid({
         header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейсы" />,
         cell: ({ row }) => (
           <span className="inline-flex items-center gap-1 text-xs text-muted-foreground tabular-nums">
-            <CableIcon className="size-3.5" />
+            <CableIcon aria-hidden="true" className="size-3.5" />
             {row.original.bindings.length}
           </span>
         ),
@@ -182,14 +184,14 @@ function UsersDataGrid({
               <Button
                 size="sm"
                 variant="ghost"
-                className="size-7 p-0 text-muted-foreground hover:text-foreground"
+                className="size-11 md:size-8 p-0 text-muted-foreground hover:text-foreground"
                 onClick={() => onEdit(u)}
                 type="button"
                 disabled={actionsDisabled}
                 aria-label={"Редактировать пользователя " + u.name}
                 title="Редактировать"
               >
-                <PencilIcon className="size-3.5" />
+                <PencilIcon aria-hidden="true" className="size-3.5" />
               </Button>
               <Button
                 size="sm"
@@ -201,7 +203,7 @@ function UsersDataGrid({
                 aria-label={"Удалить пользователя " + u.name}
                 title="Удалить"
               >
-                <TrashIcon className="size-3.5" />
+                <TrashIcon aria-hidden="true" className="size-3.5" />
               </Button>
             </div>
           )
@@ -228,7 +230,7 @@ function UsersDataGrid({
   if (!isLoading && users.length === 0) {
     return (
       <EmptyState
-        icon={<UsersIcon className="size-4" />}
+        icon={<UsersIcon aria-hidden="true" className="size-4" />}
         title="Нет пользователей"
         description="Добавьте пользователя, чтобы привязать интерфейсы и учитывать трафик"
         className="border-0 py-12"