fix: Add keyboard support to CardHorizontalBarChart and InfoTooltip

components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx

@@ -35,6 +35,12 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta
     setDescriptText(descriptText);
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent, languageName: string) => {
+    if (event.key === "Enter" || event.key === " ") {
+      handleChangeDescriptText(languageName);
+    }
+  };
+
   useEffect(() => {
     if (sortedLangArray.length === 0) return;
 
@@ -52,17 +58,21 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta
         {sortedLangArray.map(({ languageName, percentageUsed }, index) => {
           return (
             index < 5 && (
-              <div
+              <button
                 key={index}
                 onMouseOver={() => handleChangeDescriptText(languageName)}
+                onFocus={() => handleChangeDescriptText(languageName)}
+                onKeyDown={(e) => handleKeyDown(e, languageName)}
                 className="h-2 transition-all duration-500 ease-in-out"
                 style={{
                   width: `${percentageUsed < 20 ? (percentageUsed / percentage) * 100 : percentageUsed}%`,
                   backgroundColor: languageToColor[languageName]
                     ? (languageToColor[languageName].color as string)
                     : NOTSUPPORTED,
                 }}
-              />
+              >
+                <span className="sr-only">{`languageName ${percentageUsed}%`}</span>
+              </button>
             )
           );
         })}

components/shared/InfoTooltip.tsx

@@ -5,10 +5,14 @@ import { HiOutlineInformationCircle } from "react-icons/hi";
 export default function InfoTooltip({ information, icon }: { information: string; icon?: React.ReactNode }) {
   const [open, setOpen] = useState(false);
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
   return (
-    <Tooltip open={open}>
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
       <TooltipTrigger asChild>
-        <button onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)} onClick={() => setOpen(!open)}>
+        <button>
           {icon ? icon : <HiOutlineInformationCircle className="text-slate-500" />}
         </button>
       </TooltipTrigger>