From 13ea35f63162ad5ac901e77fa458aa0669abb93c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 23 Feb 2024 21:50:46 +0800
Subject: [PATCH] a11y updates on table editor entity items (#21482)

a11y updates on entity items. fixed bg-selection issue
---
 .../TableEditorLayout/EntityListItem.tsx      | 278 ++++++++----------
 1 file changed, 130 insertions(+), 148 deletions(-)

diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 60eef71bc66..054a596a557 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -118,161 +118,143 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
   }
 
   return (
-    <div
-      className={clsx(
-        'group flex items-center justify-between rounded-md',
-        isActive && 'text-foreground bg-surface-200'
+    <Link
+      title={entity.name}
+      href={`/project/${projectRef}/editor/${entity.id}`}
+      role="button"
+      aria-label={`View ${entity.name}`}
+      className={cn(
+        'w-full',
+        'flex items-center gap-2',
+        'py-1 px-2',
+        'text-light',
+        'rounded-md',
+        isActive ? 'text-foreground bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
+        'group',
+        'transition'
       )}
     >
-      <Link
-        href={`/project/${projectRef}/editor/${entity.id}`}
-        className="flex items-center gap-2 py-1 pl-2 w-full max-w-[90%]"
-      >
-        <Tooltip.Root delayDuration={0} disableHoverableContent={true}>
-          <Tooltip.Trigger className="flex items-center" asChild>
-            {entity.type === ENTITY_TYPE.TABLE ? (
-              <Table2 size={15} strokeWidth={1.5} className="text-foreground-light" />
-            ) : entity.type === ENTITY_TYPE.VIEW ? (
-              <Eye size={15} strokeWidth={1.5} className="text-foreground-light" />
-            ) : (
-              <div
-                className={clsx(
-                  'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
-                  entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
-                  entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
-                  entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
-                    'text-foreground-light bg-border-stronger'
-                )}
-              >
-                {Object.entries(ENTITY_TYPE)
-                  .find(([, value]) => value === entity.type)?.[0]?.[0]
-                  ?.toUpperCase()}
-              </div>
-            )}
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content
-              side="bottom"
-              className={[
-                'rounded bg-alternative py-1 px-2 leading-none shadow',
-                'border border-background',
-                'text-xs text-foreground capitalize',
-              ].join(' ')}
-            >
-              <Tooltip.Arrow className="radix-tooltip-arrow" />
-              {formatTooltipText(entity.type)}
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
-        <div
-          className={cn(
-            'text-sm text-foreground-light group-hover:text-foreground transition max-w-[175px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
-            isActive && 'text-foreground'
-          )}
-        >
-          {/* only show tooltips if required, to reduce noise */}
-          {entity.name.length > 20 ? (
-            <Tooltip.Root delayDuration={0} disableHoverableContent={true}>
-              <Tooltip.Trigger className="max-w-[95%] overflow-hidden text-ellipsis whitespace-nowrap">
-                {entity.name}
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content
-                  side="right"
-                  className={[
-                    'rounded bg-alternative py-1 px-2 leading-none shadow',
-                    'border border-background',
-                    'text-xs text-foreground',
-                  ].join(' ')}
-                >
-                  <Tooltip.Arrow className="radix-tooltip-arrow" />
-                  {entity.name}
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
+      <Tooltip.Root delayDuration={0} disableHoverableContent={true}>
+        <Tooltip.Trigger className="flex items-center" asChild>
+          {entity.type === ENTITY_TYPE.TABLE ? (
+            <Table2 size={15} strokeWidth={1.5} className="text-foreground-lighter" />
+          ) : entity.type === ENTITY_TYPE.VIEW ? (
+            <Eye size={15} strokeWidth={1.5} className="text-foreground-lighter" />
           ) : (
-            entity.name
-          )}
-
-          {entity.type === ENTITY_TYPE.TABLE && !entity.rls_enabled && (
-            <div className="w-4 px-0.5">
-              <Unlock
-                size={14}
-                strokeWidth={1.5}
-                className={cn(isActive ? 'text-warning' : 'text-warning-500')}
-              />
+            <div
+              className={clsx(
+                'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
+                entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
+                entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
+                entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
+                  'text-foreground-light bg-border-stronger'
+              )}
+            >
+              {Object.entries(ENTITY_TYPE)
+                .find(([, value]) => value === entity.type)?.[0]?.[0]
+                ?.toUpperCase()}
             </div>
           )}
-        </div>
-      </Link>
-      <div className="pr-2 flex items-center">
-        {entity.type === ENTITY_TYPE.TABLE && isActive && !isLocked && (
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <div className="text-foreground-lighter transition-all hover:text-foreground">
-                <MoreHorizontal size={14} strokeWidth={2} />
-              </div>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="bottom" align="start">
-              <DropdownMenuItem
-                key="edit-table"
-                className="space-x-2"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  snap.onEditTable()
-                }}
-              >
-                <IconEdit size="tiny" />
-                <span>Edit Table</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                key="duplicate-table"
-                className="space-x-2"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  snap.onDuplicateTable()
-                }}
-              >
-                <IconCopy size="tiny" />
-                <span>Duplicate Table</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
-                <Link
-                  key="view-policies"
-                  href={`/project/${projectRef}/auth/policies?schema=${snap.selectedSchemaName}&search=${entity.id}`}
-                >
-                  <IconLock size="tiny" />
-                  <span>View Policies</span>
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                key="download-table-csv"
-                className="space-x-2"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  exportTableAsCSV()
-                }}
-              >
-                <IconDownload size="tiny" />
-                <span>Export as CSV</span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                key="delete-table"
-                className="space-x-2"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  snap.onDeleteTable()
-                }}
-              >
-                <IconTrash size="tiny" />
-                <span>Delete Table</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side="bottom"
+            className={[
+              'rounded bg-alternative py-1 px-2 leading-none shadow',
+              'border border-background',
+              'text-xs text-foreground capitalize',
+            ].join(' ')}
+          >
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            {formatTooltipText(entity.type)}
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      <div
+        className={cn(
+          'truncate',
+          'max-w-[175px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
+          isActive && 'text-foreground'
+        )}
+      >
+        {/* only show tooltips if required, to reduce noise */}
+        <span className="truncate text-sm text-foreground-light group-hover:text-foreground transition">
+          {entity.name}
+        </span>
+
+        {entity.type === ENTITY_TYPE.TABLE && !entity.rls_enabled && (
+          <Unlock
+            size={14}
+            strokeWidth={2}
+            className={cn(isActive ? 'text-warning-600' : 'text-warning-500')}
+          />
         )}
       </div>
-    </div>
+
+      {entity.type === ENTITY_TYPE.TABLE && isActive && !isLocked && (
+        <DropdownMenu>
+          <DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
+            <MoreHorizontal size={14} strokeWidth={2} />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="bottom" align="start">
+            <DropdownMenuItem
+              key="edit-table"
+              className="space-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                snap.onEditTable()
+              }}
+            >
+              <IconEdit size="tiny" />
+              <span>Edit Table</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              key="duplicate-table"
+              className="space-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                snap.onDuplicateTable()
+              }}
+            >
+              <IconCopy size="tiny" />
+              <span>Duplicate Table</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
+              <Link
+                key="view-policies"
+                href={`/project/${projectRef}/auth/policies?schema=${snap.selectedSchemaName}&search=${entity.id}`}
+              >
+                <IconLock size="tiny" />
+                <span>View Policies</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              key="download-table-csv"
+              className="space-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                exportTableAsCSV()
+              }}
+            >
+              <IconDownload size="tiny" />
+              <span>Export as CSV</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              key="delete-table"
+              className="space-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                snap.onDeleteTable()
+              }}
+            >
+              <IconTrash size="tiny" />
+              <span>Delete Table</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </Link>
   )
 }