Merge pull request #648 from bounswe/frontend/feature/fix_accessibili…

…ty_issues

Fix Accessibility Issues

frontend/src/components/AnswerCard.tsx

@@ -24,7 +24,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}
@@ -49,7 +49,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
           <Link to={`/users/${author.id}`} className="h-10 w-10">
             <img
               src={author.profilePicture}
-              alt={author.name}
+              alt={"Profile picture"}
               className="rounded-full object-cover"
             />
           </Link>

frontend/src/components/AnswerItem.tsx

@@ -21,7 +21,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <div className="flex items-center justify-between">
@@ -64,7 +64,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
                   answer.author?.profilePicture ||
                   "https://placehold.co/100x100"
                 }
-                alt={answer.author?.name}
+                alt={"Profile picture"}
                 className="h-8 w-8 rounded-full object-cover"
               />
               <span className="text-sm font-medium">{answer.author?.name}</span>

frontend/src/components/CodeSnippet.tsx

@@ -5,7 +5,7 @@ import { useExecuteCode } from "@/services/api/programmingForumComponents";
 import { CodeExecution } from "@/services/api/programmingForumSchemas";
 import React from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 interface CodeSnippetProps {
   code: string;
@@ -37,15 +37,15 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = ({ code, language }) => {
 
   return (
     <div className="not-prose relative flex flex-col gap-2 overflow-hidden rounded-xl border border-gray-400 bg-gray-100 p-4">
-      <h4 className="text-sm font-bold">
+      <h1 className="text-sm font-bold">
         {languageUserFriendlyName[
           language.replace("-exec", "") as keyof typeof languageUserFriendlyName
         ] ?? "Unknown"}{" "}
         Code Snippet
-      </h4>
+      </h1>
       <SyntaxHighlighter
         language={language.replace("-exec", "")}
-        style={docco}
+        style={a11yLight}
         PreTag={({ children, ...rest }) => {
           return (
             <div {...rest}>

frontend/src/components/DifficultyBar.tsx

@@ -107,7 +107,7 @@ export const DifficultyBar: React.FC<DifficultyBarProps> = ({
         {/* Difficulty Bar */}
         <div>
           <h2 className="mb-2 text-lg font-semibold">
-            The community finds this question <strong>{getHighestVotedDifficulty()}</strong> difficulty.
+            The community finds this question: <strong>{getHighestVotedDifficulty()}</strong> difficulty.
           </h2>
           <div className="text-sm text-gray-600 mb-2">
             <span>Easy: {localCounts.easy} votes</span>,{" "}

frontend/src/components/DifficultyFilter.tsx

@@ -21,7 +21,7 @@ export function DifficultyFilter({ value, onChange }: DifficultyFilterProps) {
         onChange(val === "all" ? undefined : (val as DifficultyLevel))
       }
     >
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[180px]" aria-label="Filter questions by difficulty">
         <SelectValue placeholder="Filter by difficulty" />
       </SelectTrigger>
       <SelectContent>

frontend/src/components/ExerciseCard.tsx

@@ -20,7 +20,7 @@ export const ExerciseCard: React.FC<ExerciseCardProps> = ({
   link,
 }) => {
   return (
-    <Card className="flex flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}

frontend/src/components/HighlightedQuestionCard.tsx

@@ -54,7 +54,7 @@ export const HighlightedQuestionCard: React.FC<Partial<QuestionSummary>> = ({
           )}
           <Link
             to={`/question/${id}`}
-            className="flex items-center text-sm font-medium text-gray-800 hover:underline"
+            className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
           >
             Go to question
             <ArrowRight className="ml-1 h-4 w-4" />

frontend/src/components/QuestionCard.tsx

@@ -27,7 +27,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
   ({ id, title, content, votes, answerCount, author, difficulty }, ref) => {
     return (
       <Card
-        className="flex flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm"
+        className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">
@@ -65,7 +65,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
             )}
             <Link
               to={`/question/${id}`}
-              className="flex items-center text-sm font-medium text-gray-800 hover:underline"
+              className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
             >
               Go to question
               <ArrowRight className="ml-1 h-4 w-4" />

frontend/src/components/Tag.tsx

@@ -45,7 +45,7 @@ export const Tag = ({
             )}
             <Link
               to={`/tag/${tagId}`}
-              className="text-sm font-medium text-blue-500 hover:underline"
+              className="text-sm font-medium text-blue-700 hover:underline"
             >
               See all questions →
             </Link>

frontend/src/components/TagCard.tsx

@@ -12,13 +12,13 @@ export const TagCard = React.forwardRef<HTMLDivElement, TagCardProps>(
   ({ tag }, ref) => {
     return (
       <Card
-        className="flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm"
+        className="flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">
-          <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
+          <h1 className="line-clamp-2 text-xl font-semibold text-gray-800">
             {tag.name}
-          </h3>
+          </h1>
           <div className="flex items-start gap-2">
             <p className="line-clamp-3 text-sm font-light text-gray-800">
               {tag.description}

frontend/src/routes/create-question.tsx

@@ -282,15 +282,19 @@ export default function QuestionCreationPage() {
             name="difficulty"
             render={({ field }) => (
               <FormItem>
+                <label htmlFor="difficulty-select" className="font-semibold mb-2 block">
+                  Difficulty Level
+                </label>
                 <FormControl>
                   <select
+                    id="difficulty-select"
                     className="rounded border border-gray-300 px-4 py-2"
                     value={field.value}
                     onChange={(e) => field.onChange(e.target.value)}
                   >
                     <option value="EASY">Easy</option>
                     <option value="MEDIUM">Medium</option>
-                    <option value="HARD">Hard</option>
+                    <option value="HARD">Hard</option>  
                   </select>
                 </FormControl>
                 <FormMessage />

frontend/src/routes/feed.tsx

@@ -79,7 +79,7 @@ export const Feed = () => {
       <section className="mb-12">
         <div className="flex items-center justify-between">
           <h2 className="text-2xl font-bold">Tags</h2>
-          <a href="/tags" className="text-red-500 hover:underline">
+          <a href="/tags" className="text-red-700 hover:underline">
             See all →
           </a>
         </div>

frontend/src/routes/profile.tsx

@@ -204,7 +204,7 @@ export default function Profile() {
                   size="icon"
                   className="rounded-full bg-red-500 text-white"
                 >
-                  <Link to="/questions/new">
+                  <Link to="/questions/new" aria-label="Create New Question">
                     <Plus />
                   </Link>
                 </Button>

frontend/src/routes/question.tsx

@@ -151,7 +151,7 @@ export default function QuestionPage() {
               src={
                 question.author.profilePicture || "https://placehold.co/640x640"
               }
-              alt={question.author.name + " profile picture"}
+              alt={"Profile picture"}
               className="h-8 w-8 rounded-full object-cover"
             />
             <span className="font-semibold">{question.author.name}</span>

frontend/src/routes/tag.tsx

@@ -102,7 +102,7 @@ export default function TagPage() {
       {tag.logoImage && (
         <img
           src={tag?.logoImage || "https://placehold.co/400x300"}
-          alt={`The logo image of ${tag.name}`}
+          alt={`${tag.name} logo`}
           title={`alt:The logo image of ${tag.name}`}
           className="h-48 w-full rounded-3xl object-contain lg:h-96"
         />
@@ -161,6 +161,7 @@ export default function TagPage() {
               to={tag.stackExchangeTag}
               className="flex items-center gap-2 text-sm font-semibold text-gray-500"
               target="_blank"
+              aria-label={`Visit Stack Exchange for ${tag.name}`}
             >
               Stack Exchange
             </Link>
@@ -177,15 +178,16 @@ export default function TagPage() {
       <div className="mt-4 flex flex-col gap-4 px-4 py-2">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <h3>Questions</h3>
+            <h1>Questions</h1>
             {!!token && (
               <Button
                 asChild
                 size="icon"
-                className="rounded-full bg-red-500 text-white"
+                className="rounded-full bg-red-700 text-white"
+                aria-label="Create a new question"
               >
                 <Link to={`/questions/new?tagIds=${tag.tagId}`}>
-                  <Plus />
+                  <Plus aria-hidden="true" />
                 </Link>
               </Button>
             )}

mobile/app/question/[questionId].tsx

@@ -316,7 +316,7 @@ export default function QuestionPage() {
           </Text>
         </View>
 
-        <View className="rounded-lg bg-neutral-150 p-4">
+        <View className="rounded-lg #e5e5e5 p-4">
           <Text className="whitespace-pre-wrap">{question.content}</Text>
         </View>
 

mobile/components/AnswerCard.tsx

@@ -26,7 +26,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-6">
         <Text className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}

mobile/components/AnswerItem.tsx

@@ -23,7 +23,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <HStack className="flex items-center justify-between">

mobile/components/QuestionCard.tsx

@@ -42,7 +42,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
   return (
     <Card
       className={`px-6 py-8 shadow-sm ${
-        highlighted ? "bg-blue-100 border-blue-500" : "bg-neutral-150"
+        highlighted ? "bg-blue-100 border-blue-500" : "#e5e5e5"
       }`}
     >
       <View className="flex flex-col gap-6">
@@ -96,7 +96,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
           )}
           <Link
             href={`/question/${id}`}
-            className={`flex items-center text-sm space-x-2 font-medium ${
+            className={`flex items-center text-sm space-x-2 font-medium p-2 ${
               highlighted ? "text-blue-600" : "text-gray-800"
             }`}
           >

mobile/components/ui/card/styles.tsx

@@ -1,6 +1,6 @@
 import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb";
 import { tva } from "@gluestack-ui/nativewind-utils/tva";
-const baseStyle = isWeb ? "flex flex-col relative z-0" : "bg-neutral-150 ";
+const baseStyle = isWeb ? "flex flex-col relative z-0" : "#e5e5e5 ";
 
 export const cardStyle = tva({
   base: baseStyle,
@@ -11,7 +11,7 @@ export const cardStyle = tva({
       lg: "p-6 rounded-xl",
     },
     variant: {
-      elevated: "bg-neutral-150 shadow-xl",
+      elevated: "#e5e5e5 shadow-xl",
       outline: "border border-outline-200 ",
       ghost: "rounded-none",
       filled: "bg-background-50",