fix: improve accessibility in CardHorizontalBarChart and InfoTooltip …

…components
open-sauced · Nov 12, 2024 · cc8472c · cc8472c
1 parent ca77bc3
commit cc8472c
Show file tree

Hide file tree

Showing 5 changed files with 1,392 additions and 1,771 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,19 +7,19 @@
   },
   "rules": {
     "jsx-a11y/label-has-associated-control": "warn",
-    "jsx-a11y/anchor-has-content":"warn",
-    "jsx-a11y/role-supports-aria-props":"warn",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/role-supports-aria-props": "warn",
     "jsx-a11y/no-noninteractive-element-to-interactive-role": "warn",
     "jsx-a11y/click-events-have-key-events": "Warn",
     "jsx-a11y/no-static-element-interactions": "warn",
     "jsx-a11y/no-autofocus": "warn",
-    "jsx-a11y/img-redundant-alt":"warn",
+    "jsx-a11y/img-redundant-alt": "warn",
     "jsx-a11y/mouse-events-have-key-events": "warn",
     "jsx-a11y/iframe-has-title": "warn",
     "jsx-a11y/no-noninteractive-tabindex": "warn",
     "jsx-a11y/anchor-is-valid": "warn",
     "jsx-a11y/no-noninteractive-element-interactions": "warn",
-    "jsx-a11y/interactive-supports-focus": "warn",    
+    "jsx-a11y/interactive-supports-focus": "warn",
     "jsx-quotes": "error",
     "unused-imports/no-unused-imports": "error",
     "import/order": [

diff --git a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
@@ -1,44 +1,27 @@
-import { useEffect, useState } from "react";
+import Text from "components/atoms/Typography/text";
+import Tooltip from "components/atoms/Tooltip/tooltip";
 import colors from "../../../lib/utils/color.json";
-
 export interface AllSimpleColors {
   [key: string]: {
     color: string | null;
     url: string;
   };
 }
-
 const NOTSUPPORTED = "#64748B";
-
 export interface LanguageObject {
   languageName: string;
   percentageUsed: number;
 }
-
 interface CardHorizontalBarChartProps {
   languageList: LanguageObject[];
+  withDescription: boolean;
 }
-
 const languageToColor: AllSimpleColors = colors as AllSimpleColors;
-
-const CardHorizontalBarChart = ({ languageList }: CardHorizontalBarChartProps): JSX.Element => {
+const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizontalBarChartProps): JSX.Element => {
   const sortedLangArray = languageList.sort((a, b) => b.percentageUsed - a.percentageUsed);
-  // used this state to calculate thte percentage of each language
-  const [percentage, setPercentage] = useState<any>(0);
-
-  useEffect(() => {
-    if (sortedLangArray.length === 0) return;
-
-    const totalSumOfFirstFivePercentage = sortedLangArray
-      .slice(0, 4)
-      .map((lang) => lang.percentageUsed)
-      .reduce((prev: number, next: number) => prev + next); // need some help fixing this type error, used any to bypass 🙏
-    setPercentage(totalSumOfFirstFivePercentage);
-  }, [percentage, sortedLangArray]);
 
   return (
     <div className="flex flex-col gap-1 min-w-[120px]">
-      {/* Progress Bar */}
       <div className="flex items-center w-full justify-end rounded-full gap-0.5 overflow-hidden">
         {sortedLangArray.map(({ languageName, percentageUsed }, index) => {
           return (
@@ -47,18 +30,37 @@ const CardHorizontalBarChart = ({ languageList }: CardHorizontalBarChartProps):
                 key={index}
                 className="h-2 transition-all duration-500 ease-in-out"
                 style={{
-                  width: `${percentageUsed < 20 ? (percentageUsed / percentage) * 100 : percentageUsed}%`,
+                  width: `${percentageUsed}%`,
                   backgroundColor: languageToColor[languageName]
                     ? (languageToColor[languageName].color as string)
                     : NOTSUPPORTED,
                 }}
-              />
+              >
+                <span className="sr-only">{`${languageName} ${percentageUsed}%`}</span>
+              </div>
             )
           );
         })}
       </div>
+      {withDescription && (
+        <div className="flex gap-2 w-32 items-baseline">
+          <div
+            className={"w-2 h-2 rounded-full"}
+            style={{
+              backgroundColor: languageToColor[sortedLangArray[0]?.languageName]
+                ? (languageToColor[sortedLangArray[0]?.languageName].color as string)
+                : NOTSUPPORTED,
+            }}
+          />
+          {/* Always display the most-used language (first item in sorted array) instead of interactive language selection */}
+          <Tooltip className="max-w-[100px]" content={sortedLangArray[0]?.languageName}>
+            <Text className="!text-xs !truncate !font-semibold !text-light-slate-11">
+              {sortedLangArray[0]?.languageName}
+            </Text>
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 };
-
 export default CardHorizontalBarChart;
diff --git a/components/shared/InfoTooltip.tsx b/components/shared/InfoTooltip.tsx
@@ -1,16 +1,17 @@
 import { useState } from "react";
 import { TooltipTrigger, TooltipPortal, Tooltip, TooltipContent, TooltipArrow } from "@radix-ui/react-tooltip";
 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)}>
-          {icon ? icon : <HiOutlineInformationCircle className="text-slate-500" />}
-        </button>
+        <button>{icon ? icon : <HiOutlineInformationCircle className="text-slate-500" />}</button>
       </TooltipTrigger>
       <TooltipPortal>
         <TooltipContent