FEAT: Imporve the Accessibilty and Visibility of Question Tags (#1432)

code100x · Oct 5, 2024 · c522961 · c522961
1 parent 6946017
commit c522961
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/src/components/posts/tag.tsx b/src/components/posts/tag.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import useColorGenerator from '@/hooks/useColorGenerator';
 import { cn } from '@/lib/utils';
 import React, { forwardRef, Ref } from 'react';
@@ -15,16 +16,23 @@ const Tag = forwardRef(
     const [backgroundColor, textColor] = useColorGenerator(name);
 
     const tagClassName = cn(
-      'px-4  rounded-xl py-1 text-[12px] cursor-pointer mr-1',
-      className,
+      'inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-semibold',
+      'transition-colors duration-150 ease-in-out',
+      'hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50',
+      className
     );
 
     return (
       <span
         ref={ref}
         className={tagClassName}
         {...props}
-        style={{ backgroundColor, color: textColor }}
+        style={{ 
+          backgroundColor, 
+          color: textColor,
+        }}
+        role="status"
+        aria-label={`Tag: ${name}`}
       >
         {name}
       </span>
@@ -34,4 +42,4 @@ const Tag = forwardRef(
 
 Tag.displayName = 'Tag';
 
-export default Tag;
+export default Tag;
diff --git a/src/hooks/useColorGenerator.ts b/src/hooks/useColorGenerator.ts
@@ -1,36 +1,34 @@
 'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 
+const tagColors = [
+  { bg: '#F3F4F6', text: '#1F2937' }, // Gray
+  { bg: '#FEE2E2', text: '#991B1B' }, // Red
+  { bg: '#FEF3C7', text: '#92400E' }, // Yellow
+  { bg: '#D1FAE5', text: '#065F46' }, // Green
+  { bg: '#DBEAFE', text: '#1E40AF' }, // Blue
+  { bg: '#E0E7FF', text: '#3730A3' }, // Indigo
+  { bg: '#EDE9FE', text: '#5B21B6' }, // Purple
+  { bg: '#FCE7F3', text: '#9D174D' }, // Pink
+];
+
 const useColorGenerator = (name: string = 'M1000'): [string, string] => {
   const [colors, setColors] = useState<[string, string]>(['', '']);
 
-  const stringToHexColor = (str: string): string => {
+  const generateColorIndex = useCallback((str: string): number => {
     let hash = 0;
     for (let i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
     }
-
-    const color = (hash & 0x00ffffff).toString(16);
-    return `#${'00000'.substring(0, 6 - color.length) + color}`;
-  };
-
-  const isColorDark = (color: string): boolean => {
-    const hex = color.replace('#', '');
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 2), 16);
-    const b = parseInt(hex.substring(4, 2), 16);
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness < 128;
-  };
+    return Math.abs(hash) % tagColors.length;
+  }, []);
 
   const updateColor = useCallback(() => {
-    const hexColor = stringToHexColor(name);
-    const isDark = isColorDark(hexColor);
-    const textColor =
-      // eslint-disable-next-line no-nested-ternary
-      name.split(' ').length === 1 ? '#ffffff' : isDark ? '#ffffff' : '#000000';
-    setColors([hexColor, textColor]);
-  }, [name]);
+    const colorIndex = generateColorIndex(name);
+    const { bg, text } = tagColors[colorIndex];
+    setColors([bg, text]);
+  }, [name, generateColorIndex]);
 
   useEffect(() => {
     updateColor();
@@ -39,4 +37,4 @@ const useColorGenerator = (name: string = 'M1000'): [string, string] => {
   return colors;
 };
 
-export default useColorGenerator;
+export default useColorGenerator;