fix: improve flashcards for screenreaders (#149)

Author: ChristopherChudzicki

src/bundles/AiDrawer/AiDrawerManager.test.tsx

@@ -67,7 +67,6 @@ const trackingEvent = jest.fn()
 const assertTrackingEvent = (...data: unknown[]) => {
   expect(trackingEvent).toHaveBeenCalledTimes(data.length)
   data.forEach((eventData) => {
-    console.log(eventData)
     expect(trackingEvent).toHaveBeenCalledWith(eventData)
   })
   trackingEvent.mockClear()
@@ -282,19 +281,25 @@ describe("AiDrawerManager", () => {
 
       await user.click(screen.getByRole("tab", { name: "Flashcards" }))
 
-      await user.click(screen.getByText("Q: Test question 1?"))
+      const q1 = screen.getByRole("button", {
+        name: "Question: Test question 1?",
+      })
+      expect(q1).toHaveTextContent("Q: Test question 1?")
+      await user.click(q1)
 
-      screen.getByText("Answer: Test answer 1")
+      screen.getByRole("button", { name: "Answer: Test answer 1" })
 
       await user.click(screen.getByRole("button", { name: "Next card" }))
 
-      await user.click(screen.getByText("Q: Test question 2?"))
+      await user.click(
+        screen.getByRole("button", { name: "Question: Test question 2?" }),
+      )
 
-      screen.getByText("Answer: Test answer 2")
+      screen.getByRole("button", { name: "Answer: Test answer 2" })
 
       await user.click(screen.getByRole("button", { name: "Previous card" }))
 
-      screen.getByText("Q: Test question 1?")
+      screen.getByRole("button", { name: "Question: Test question 1?" })
     }),
   )
 
@@ -317,33 +322,33 @@ describe("AiDrawerManager", () => {
 
       await user.click(screen.getByRole("tab", { name: "Flashcards" }))
 
-      screen.getByText("Q: Test question 1?")
+      screen.getByRole("button", { name: "Question: Test question 1?" })
 
       await user.keyboard("{enter}")
 
-      screen.getByText("Answer: Test answer 1")
+      screen.getByRole("button", { name: "Answer: Test answer 1" })
 
       await user.keyboard("{arrowright}")
 
-      screen.getByText("Q: Test question 2?")
+      screen.getByRole("button", { name: "Question: Test question 2?" })
 
       await user.keyboard("{enter}")
 
-      screen.getByText("Answer: Test answer 2")
+      screen.getByRole("button", { name: "Answer: Test answer 2" })
 
       await user.keyboard("{arrowleft}")
 
-      screen.getByText("Q: Test question 1?")
+      screen.getByRole("button", { name: "Question: Test question 1?" })
 
       await user.keyboard("{arrowleft}")
 
-      screen.getByText("Q: Test question 3?")
+      screen.getByRole("button", { name: "Question: Test question 3?" })
 
       await user.keyboard("{arrowright}")
       await user.keyboard("{arrowright}")
       await user.keyboard("{arrowright}")
 
-      screen.getByText("Q: Test question 3?")
+      screen.getByRole("button", { name: "Question: Test question 3?" })
     }),
   )
 

src/bundles/AiDrawer/FlashcardsScreen.tsx

@@ -12,8 +12,9 @@ export type Flashcard = {
 
 const Container = styled.div``
 
-const FlashcardContainer = styled.div(({ theme }) => ({
+const FlashcardContainer = styled.button(({ theme }) => ({
   display: "flex",
+  width: "100%",
   height: 300,
   padding: 40,
   flexDirection: "column",
@@ -25,6 +26,7 @@ const FlashcardContainer = styled.div(({ theme }) => ({
   marginTop: "8px",
   cursor: "pointer",
   textAlign: "center",
+  background: "none",
 }))
 
 const Navigation = styled.div({
@@ -40,48 +42,54 @@ const Page = styled.div(({ theme }) => ({
   ...theme.typography.body2,
 }))
 
-const Flashcard = React.forwardRef<
-  HTMLDivElement,
-  { content: Flashcard; "aria-label": string }
->(({ content, "aria-label": ariaLabel }, ref) => {
-  const [screen, setScreen] = useState<0 | 1>(0)
+const Flashcard = React.forwardRef<HTMLButtonElement, { content: Flashcard }>(
+  ({ content, ...others }, ref) => {
+    const [screen, setScreen] = useState<0 | 1>(0)
 
-  useEffect(() => setScreen(0), [content])
+    useEffect(() => setScreen(0), [content])
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" || e.key === " ") {
-      setScreen(screen === 0 ? 1 : 0)
+    const handleClick = () => {
+      setScreen((current) => (current === 0 ? 1 : 0))
     }
-  }
 
-  return (
-    <FlashcardContainer
-      ref={ref}
-      onClick={() => setScreen(screen === 0 ? 1 : 0)}
-      onKeyDown={handleKeyDown}
-      tabIndex={0}
-      aria-label={ariaLabel}
-      role="button"
-    >
-      <Typography variant="h5">
-        {screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`}
-      </Typography>
-    </FlashcardContainer>
-  )
-})
+    return (
+      <FlashcardContainer
+        ref={ref}
+        type="button"
+        onClick={handleClick}
+        tabIndex={0}
+        {...others}
+      >
+        <Typography variant="h5">
+          {screen === 0 ? (
+            <>
+              <span aria-label="Question:">Q: </span>
+              {content.question}
+            </>
+          ) : (
+            <>
+              <span>Answer: </span>
+              {content.answer}
+            </>
+          )}
+        </Typography>
+      </FlashcardContainer>
+    )
+  },
+)
 
 Flashcard.displayName = "Flashcard"
 
 export const FlashcardsScreen = ({
   flashcards,
   wasKeyboardFocus,
 }: {
-  flashcards?: Flashcard[]
+  flashcards: Flashcard[]
   wasKeyboardFocus: boolean
 }) => {
   const [cardIndex, setCardIndex] = useState(0)
   const containerRef = useRef<HTMLDivElement>(null)
-  const flashcardRef = useRef<HTMLDivElement>(null)
+  const flashcardRef = useRef<HTMLButtonElement>(null)
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -112,17 +120,14 @@ export const FlashcardsScreen = ({
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [handleKeyDown])
 
-  if (!flashcards?.length) {
-    return null
-  }
-
   return (
     <Container ref={containerRef}>
-      <Flashcard
-        ref={flashcardRef}
-        content={flashcards[cardIndex]}
+      <div
+        role="region"
         aria-label={`Flashcard ${cardIndex + 1} of ${flashcards.length}`}
-      />
+      >
+        <Flashcard ref={flashcardRef} content={flashcards[cardIndex]} />
+      </div>
       <Navigation>
         <ActionButton
           onClick={() => setCardIndex(cardIndex - 1)}
@@ -134,7 +139,8 @@ export const FlashcardsScreen = ({
         >
           <RiArrowLeftLine aria-hidden />
         </ActionButton>
-        <Page>
+        {/* Hide the index count here. It's used as a region label above. */}
+        <Page aria-hidden>
           {cardIndex + 1} / {flashcards.length}
         </Page>
         <ActionButton