🎨 Picasso: UX and Accessibility Improvements

.jules/picasso.md

@@ -39,3 +39,5 @@ Added aria-hidden='true' wrapper to decorative emojis across navigation and head
 - Added `<span aria-hidden="true">` to `🏢` and `🔨` in `CaseStudies.tsx` tab buttons.
 **Learning:** Always use `<span aria-hidden="true">` around decorative emojis to prevent screen readers from redundantly reading out their unicode representations (e.g. "building", "hammer") which distracts from the core button text.
 Learned that missing aria labels for decorative emojis in React can be fixed by wrapping them with <span aria-hidden='true'></span> and fixing text assertions in React Testing Library using getByRole instead of getByText
+- Added `aria-hidden='true'` to the decorative phase icon in `ExerciseCard.tsx`.
+- Added `focus-visible` utility classes to the close button in `KeyboardShortcutsOverlay.tsx` to improve keyboard navigation.

src/components/ExerciseCard.tsx

@@ -29,7 +29,7 @@ function ExerciseCard({ exercise }: ExerciseCardProps) {
     >
       <div className="exercise-card__header">
         <span className="exercise-card__phase">
-          {icon} Phase {exercise.phase}
+          <span aria-hidden="true">{icon}</span> Phase {exercise.phase}
         </span>
         <span className="difficulty-badge" style={{ color: diff.color, background: diff.bg }}>
           {diff.label}

src/components/KeyboardShortcutsOverlay.tsx

@@ -128,7 +128,7 @@ export default function KeyboardShortcutsOverlay() {
           <h2 id="keyboard-shortcuts-title">Keyboard shortcuts</h2>
           <button
             type="button"
-            className="shortcut-overlay-close"
+            className="shortcut-overlay-close focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
             data-shortcuts-close
             onClick={() => setIsOpen(false)}
             aria-label="Close keyboard shortcuts"