refactor(Action): make accessible

client/src/components/SidePanel/Builder/Action.tsx

@@ -1,32 +1,40 @@
 import { useState } from 'react';
 import type { Action } from 'librechat-data-provider';
 import GearIcon from '~/components/svg/GearIcon';
+import { cn } from '~/utils';
 
 export default function Action({ action, onClick }: { action: Action; onClick: () => void }) {
   const [isHovering, setIsHovering] = useState(false);
 
   return (
-    <div>
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}
+      className="flex w-full rounded-lg text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      aria-label={`Action for ${action.metadata.domain}`}
+    >
       <div
-        onClick={onClick}
+        className="h-9 grow overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2"
-        className="flex w-full rounded-lg text-sm hover:cursor-pointer"
+        style={{ wordBreak: 'break-all' }}
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
       >
-        <div
+        {action.metadata.domain}
-          className="h-9 grow whitespace-nowrap px-3 py-2"
+      </div>
-          style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
+      <div
-        >
+        className={cn(
-          {action.metadata.domain}
+          'flex h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary',
-        </div>
+          isHovering ? 'flex' : 'hidden',
-        {isHovering && (
-          <button
-            type="button"
-            className="transition-colors flex h-9 w-9 min-w-9 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
-          >
-            <GearIcon className="icon-sm" />
-          </button>
         )}
+        aria-label="Settings"
+      >
+        <GearIcon className="icon-sm" aria-hidden="true" />
       </div>
     </div>
   );