🎨 Palette: [Accessibility] Hide redundant flashcard visual hints from screen readers

[lavkushry]

💡 What:
Refactored the flashcard component to use explicit DOM elements for visual hints ("tap to flip →" and the "✓" seen checkmark) instead of CSS pseudo-elements (::after/::before).

🎯 Why:
CSS pseudo-elements cannot be individually hidden from screen readers. Because these hints were embedded in the flashcard__front element via CSS, screen readers were reading "tap to flip" on every single card and announcing "Check mark" once they were flipped, creating a lot of auditory noise. By making them real DOM elements, we can apply aria-hidden="true" to them.

📸 Before/After:
Before: Screen readers announced the hints alongside the actual text content.
After: The visual presentation is exactly the same, but the DOM now contains <div class="flashcard__hint" aria-hidden="true">tap to flip →</div> ensuring screen readers silently ignore them.

♿ Accessibility:
This prevents screen readers from making redundant announcements for purely decorative or visual interaction hints, allowing users to focus on the actual flashcard content.

Journal entry added to .jules/palette.md to document the learning about avoiding CSS pseudo-elements for textual hints.

---

PR created automatically by Jules for task 15085561930122863095 started by @lavkushry

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Code Review

This pull request refactors the flashcard UI components to avoid using CSS pseudo-elements for textual hints and indicators, which improves accessibility for screen readers. Instead, it dynamically injects actual DOM elements with aria-hidden="true" via JavaScript and updates the CSS styles accordingly. Additionally, a new entry is added to .jules/palette.md documenting this best practice. There are no review comments, so no feedback is provided.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 028dfb46-f966-43dd-ad97-7271505a7180

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-a11y-flashcard-hints-15085561930122863095

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}