fix: additional fixes

Author: pkulkark

flashcards/public/student-ui.js

@@ -6361,7 +6361,7 @@ function Np({ title: e, flashcards: n, styling: t }) {
       }
   }, [r, u, h]), !u)
     return /* @__PURE__ */ M.jsxs("div", { className: "flashcards_block", children: [
-      /* @__PURE__ */ M.jsxs("div", { className: "fc-number", "aria-label": "Flashcard counter", role: "status", children: [
+      /* @__PURE__ */ M.jsxs("div", { className: "fc-number", "aria-label": "Flashcard counter", children: [
         "0 / ",
         /* @__PURE__ */ M.jsx("span", { className: "fc-total", children: g.length })
       ] }),
@@ -6400,7 +6400,7 @@ function Np({ title: e, flashcards: n, styling: t }) {
     ] });
   const N = g[r];
   return /* @__PURE__ */ M.jsxs("div", { className: "flashcards_block", children: [
-    /* @__PURE__ */ M.jsxs("div", { className: "fc-number", "aria-label": "Flashcard counter", role: "status", children: [
+    /* @__PURE__ */ M.jsxs("div", { className: "fc-number", "aria-label": "Flashcard counter", children: [
       /* @__PURE__ */ M.jsx("span", { className: "current-fc", children: r + 1 }),
       " / ",
       /* @__PURE__ */ M.jsx("span", { className: "fc-total", children: g.length })
@@ -6444,6 +6444,8 @@ function Np({ title: e, flashcards: n, styling: t }) {
               "div",
               {
                 className: "fc-card-front",
+                "aria-hidden": o,
+                inert: o ? "" : void 0,
                 style: {
                   borderColor: t.borderColor,
                   backgroundColor: t.backgroundColor
@@ -6469,6 +6471,8 @@ function Np({ title: e, flashcards: n, styling: t }) {
               "div",
               {
                 className: "fc-card-back",
+                "aria-hidden": !o,
+                inert: o ? void 0 : "",
                 style: {
                   borderColor: t.borderColor,
                   backgroundColor: t.backgroundColor

frontend/src/react-inert.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    inert?: string;
+  }
+}
+
+export {};

frontend/src/student-ui/student-ui.test.tsx

@@ -70,7 +70,7 @@ describe('StudentUi', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Start flashcard deck' }));
 
     screen.getByText('Question 1');
-    const counter1 = screen.getByRole('status', { name: 'Flashcard counter' });
+    const counter1 = screen.getByLabelText('Flashcard counter');
     expect(counter1?.textContent).toBe('1 / 3');
 
     const prevBtn = screen.getByRole('button', { name: 'Previous card' });
@@ -82,7 +82,7 @@ describe('StudentUi', () => {
 
     await userEvent.click(nextBtn);
     expect(screen.getByText('Question 2')).toBeInTheDocument();
-    const counter2 = screen.getByRole('status', { name: 'Flashcard counter' });
+    const counter2 = screen.getByLabelText('Flashcard counter');
     expect(counter2?.textContent).toBe('2 / 3');
 
     // Both buttons should be enabled on middle card
@@ -91,7 +91,7 @@ describe('StudentUi', () => {
 
     await userEvent.click(nextBtn);
     expect(screen.getByText('Question 3')).toBeInTheDocument();
-    const counter3 = screen.getByRole('status', { name: 'Flashcard counter' });
+    const counter3 = screen.getByLabelText('Flashcard counter');
     expect(counter3?.textContent).toBe('3 / 3');
 
     // Next button should be disabled on last card
@@ -100,7 +100,7 @@ describe('StudentUi', () => {
 
     await userEvent.click(prevBtn);
     expect(screen.getByText('Question 2')).toBeInTheDocument();
-    const counter4 = screen.getByRole('status', { name: 'Flashcard counter' });
+    const counter4 = screen.getByLabelText('Flashcard counter');
     expect(counter4?.textContent).toBe('2 / 3');
   });
 

frontend/src/student-ui/student-ui.tsx

@@ -124,7 +124,7 @@ function StudentUi({ title, flashcards, styling }: StudentUiProps) {
   if (!isStarted) {
     return (
       <div className="flashcards_block">
-        <div className="fc-number" aria-label="Flashcard counter" role="status">
+        <div className="fc-number" aria-label="Flashcard counter">
           0 / <span className="fc-total">{shuffledFlashcards.length}</span>
         </div>
         <div
@@ -159,7 +159,7 @@ function StudentUi({ title, flashcards, styling }: StudentUiProps) {
 
   return (
     <div className="flashcards_block">
-      <div className="fc-number" aria-label="Flashcard counter" role="status">
+      <div className="fc-number" aria-label="Flashcard counter">
         <span className="current-fc">{currentIndex + 1}</span> / <span className="fc-total">{shuffledFlashcards.length}</span>
       </div>
       <div
@@ -198,6 +198,8 @@ function StudentUi({ title, flashcards, styling }: StudentUiProps) {
         >
           <div
             className="fc-card-front"
+            aria-hidden={isFlipped}
+            inert={isFlipped ? '' : undefined}
             style={{
               borderColor: styling.borderColor,
               backgroundColor: styling.backgroundColor,
@@ -219,6 +221,8 @@ function StudentUi({ title, flashcards, styling }: StudentUiProps) {
           </div>
           <div
             className="fc-card-back"
+            aria-hidden={!isFlipped}
+            inert={!isFlipped ? '' : undefined}
             style={{
               borderColor: styling.borderColor,
               backgroundColor: styling.backgroundColor,

frontend/src/vite-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference path="./react-inert.d.ts" />
 declare let $: JQueryStatic;
 
 type Flashcard = {