a11y(client): special accessibility improvements

backend/core/views/quiz_views.py

@@ -1,3 +1,4 @@
+
 from ..models import Quiz
 from rest_framework import viewsets
 from rest_framework import permissions
@@ -61,12 +62,8 @@ def perform_create(self, serializer):
         ]
     )
     def list(self, request, *args, **kwargs):
-        return super().list(request, *args, **kwargs)
-    def get_queryset(self):  #  Overrided to make it customized :p,  need more testing.
-        queryset = super().get_queryset()
         user = self.request.user
-        sort_by = self.request.query_params.get('sort_by', 'newest') 
-
+        queryset = self.get_queryset()
         if user.is_authenticated:
             blocked_users = Block.objects.filter(blocker=user).values_list('blocking__id', flat=True)  # Fetch ing blocked users
             taken_quizzes = user.taken_quizzes.values_list('quiz__id', flat=True)  # Fetching quizzes taken by the user
@@ -75,6 +72,14 @@ def get_queryset(self):  #  Overrided to make it customized :p,  need more testi
             proficiency = self.request.query_params.get('filter_proficiency', None)
             # if proficiency and proficiency.lower() == "true":
             queryset = queryset.filter(difficulty=user.proficiency)
+        self.queryset = queryset
+
+
+        return super().list(request, *args, **kwargs)
+    def get_queryset(self):  #  Overrided to make it customized :p,  need more testing.
+        queryset = super().get_queryset()
+        sort_by = self.request.query_params.get('sort_by', 'newest') 
+
         linked_data_id = self.request.query_params.get('linked_data_id')
         if linked_data_id:
             linked_data_ids = get_ids(linked_data_id)
@@ -95,4 +100,4 @@ def get_queryset(self):  #  Overrided to make it customized :p,  need more testi
     def get_permissions(self):
         if self.action == 'list':  # If listing, allow anyone
             return [permissions.AllowAny()]
-        return super().get_permissions()
+        return super().get_permissions()

client/src/components/button.tsx

@@ -151,6 +151,7 @@ export const buttonClass = cva(
             position: {
                 fixed: ["fixed"],
                 relative: ["relative"],
+                absolute: ["absolute"],
             },
         },
         defaultVariants: {

client/src/components/forum-card.tsx

@@ -86,8 +86,10 @@ export const ForumQuestionCard = ({ question, onTagClick }: ForumCardProps) => {
                                 >
                                     <RiDeleteBinLine size={16} />
                                 </Ariakit.PopoverDisclosure>
-                                <Ariakit.Popover className="z-50 overflow-hidden rounded-2 bg-slate-800 text-white shadow-lg ring ring-slate-900">
-                                    <Ariakit.PopoverArrow className="arrow" />
+                                <Ariakit.Popover
+                                    gutter={8}
+                                    className="z-50 overflow-hidden rounded-2 bg-slate-800 text-white shadow-lg ring ring-slate-900"
+                                >
                                     <div className="flex flex-col gap-1 px-4 py-4">
                                         <Ariakit.PopoverHeading className="text-base font-medium text-slate-100">
                                             Are you sure?
@@ -99,22 +101,22 @@ export const ForumQuestionCard = ({ question, onTagClick }: ForumCardProps) => {
                                     </div>
                                     <div className="flex justify-end gap-4 bg-slate-700 px-4 py-4">
                                         <Ariakit.Button
-                                            type="submit"
+                                            onClick={() => setIsOpen(false)}
                                             className={buttonClass({
-                                                intent: "destructive",
-                                                className:
-                                                    "ring-offset-red-900",
+                                                intent: "ghost",
                                             })}
                                         >
-                                            Yes, delete
+                                            No, cancel
                                         </Ariakit.Button>
                                         <Ariakit.Button
-                                            onClick={() => setIsOpen(false)}
+                                            type="submit"
                                             className={buttonClass({
-                                                intent: "ghost",
+                                                intent: "destructive",
+                                                className:
+                                                    "ring-offset-red-900",
                                             })}
                                         >
-                                            No, cancel
+                                            Yes, delete
                                         </Ariakit.Button>
                                     </div>
                                 </Ariakit.Popover>

client/src/components/input.tsx

@@ -16,7 +16,7 @@ export const inputClass = cva(
 );
 
 export const labelClass = cva(
-    "text-sm font-medium tracking-tight text-slate-900 transition-colors duration-100",
+    "group text-sm font-medium tracking-tight text-slate-900 transition-colors duration-100",
     {
         variants: {
             wrapper: {
@@ -44,6 +44,7 @@ export const optionClass = cva(
         "focus-visible:ring-slate-300",
         "focus-visible:ring-3",
         "focus-visible:outline-none",
+        "group-hover:bg-red-100",
     ],
     {
         variants: {

client/src/components/navbar.tsx

@@ -150,7 +150,19 @@ export const Navbar = ({ user }: NavbarProps) => {
             className="fixed top-0 z-50 w-full border-b border-slate-200 bg-[rgba(255,255,255,.8)] py-3 backdrop-blur-sm"
         >
             <div className="container">
-                <div className="flex flex-1 items-center justify-between gap-2 md:justify-start">
+                <div className="relative flex flex-1 items-center justify-between gap-2 md:justify-start">
+                    <a
+                        href="#main-content"
+                        className={buttonClass({
+                            intent: "ghost",
+                            className:
+                                "left-0 top-0 opacity-0 focus-visible:opacity-100 focus-visible:outline-none",
+                            position: "absolute",
+                        })}
+                        aria-roledescription="Press to skip navigation and go directly to the main content"
+                    >
+                        Skip to Main Content
+                    </a>
                     <div className="w-28 md:w-24">
                         <Link
                             to="/"

client/src/components/quiz-card.tsx

@@ -60,7 +60,7 @@ export const QuizCard = ({ quiz, onTagClick, quiz_key }: QuizCardProps) => {
         <div
             key={quiz_key}
             aria-label={quiz.title}
-            className="relative flex max-w-2xl flex-col gap-4 rounded-2 bg-white px-6 py-6 shadow-none ring ring-slate-200 transition-all duration-200"
+            className="relative flex max-w-2xl flex-col gap-4 rounded-2 bg-white px-6 py-6 shadow-none ring ring-slate-200 transition-all duration-200 focus-within:ring-2 focus-within:ring-slate-300 focus-within:ring-offset-2"
         >
             <div className="flex flex-1 items-start gap-4">
                 <div className="flex flex-1 flex-col self-stretch">
@@ -126,6 +126,7 @@ export const QuizCard = ({ quiz, onTagClick, quiz_key }: QuizCardProps) => {
             <div className="flex flex-col gap-1">
                 <div className="flex items-center justify-between gap-1">
                     <Link
+                        aria-label={`Profile of ${quiz.author.username}`}
                         to={`/profile/${quiz.author.username}/`}
                         className="text-slate-500 underline-offset-2 transition-all hover:text-slate-900"
                     >
@@ -158,6 +159,8 @@ export const QuizCard = ({ quiz, onTagClick, quiz_key }: QuizCardProps) => {
                         )}
                         <Link
                             to={`/quizzes/${String(quiz.id)}`}
+                            aria-label={`${quiz.is_taken ? "Re-attempt" : "Take"} quiz`}
+                            aria-roledescription={`Quiz with title: ${quiz.title}`}
                             className={buttonClass({
                                 intent: quiz.is_taken ? "secondary" : "primary",
                                 size: "medium",
@@ -172,7 +175,7 @@ export const QuizCard = ({ quiz, onTagClick, quiz_key }: QuizCardProps) => {
                                 })}
                                 aria-hidden="true"
                             />
-                            <span>
+                            <span className="aria-hidden">
                                 {quiz.is_taken ? "Re-attempt" : "Take Quiz"}
                             </span>
                             <RiArrowRightLine size={16} />

client/src/components/radio-option.tsx

@@ -1,12 +1,12 @@
 import { cva } from "cva";
 
 export const radioOptionClass = cva(
-    "rounded-full px-4 py-1.5 text-center font-medium transition-all",
+    "rounded-full px-4 py-1.5 text-center font-medium ring-0 ring-transparent ring-offset-2 transition-all duration-200 group-focus-within:relative group-focus-within:ring-3",
     {
         variants: {
             selected: {
-                true: "bg-slate-700 text-white",
-                false: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+                true: "bg-slate-700 text-white group-focus-within:ring-slate-300 group-hover:bg-slate-800",
+                false: "bg-slate-100 text-slate-900 hover:bg-slate-200 group-focus-within:ring-slate-500",
             },
         },
     },

client/src/components/voiceover.tsx

@@ -10,7 +10,7 @@ export type VoiceoverProps = {
 
 export const Voiceover = ({
     text,
-    label = "Play voiceover",
+    label = "Listen pronunciation",
 }: VoiceoverProps) => {
     const { speak } = useSpeech();
     return (

client/src/routes/Forum/Forum.tsx

@@ -70,7 +70,7 @@ export const Forum = () => {
                         description="Where the magic happens - jump into the conversation"
                     />
 
-                    <aside className="flex flex-col gap-6">
+                    <aside className="flex flex-col gap-8">
                         <div className="flex flex-grow items-center gap-2 pt-6">
                             <TagSearch
                                 onTagSelect={(tag) => {
@@ -92,7 +92,7 @@ export const Forum = () => {
                             {forumSortOptions.map((option) => (
                                 <label
                                     key={option}
-                                    className="flex cursor-pointer items-center gap-2"
+                                    className="group flex cursor-pointer items-center gap-2"
                                 >
                                     <input
                                         type="radio"

client/src/routes/Home/Home.tsx

@@ -178,7 +178,7 @@ export const Home = () => {
                                     {availableFeedTypes.map((option) => (
                                         <label
                                             key={option}
-                                            className="flex cursor-pointer items-center gap-2"
+                                            className="group flex cursor-pointer items-center gap-2"
                                         >
                                             <input
                                                 type="radio"

client/src/routes/Profile/Profile.tsx

@@ -421,7 +421,7 @@ export const Profile = () => {
                             <QuizzesTaken
                                 quizzes={quizzes_taken}
                             ></QuizzesTaken>
-                            <Ariakit.Separator className="my-4" />
+                            <Ariakit.Separator id="main" className="my-4" />
                             {isMe && <BlockingModal blockings={blockings} />}
                         </main>
                     );