From 78f82fd551cb20fa54c23633c31cb615037ff505 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Wed, 11 Feb 2026 20:36:35 +0000
Subject: [PATCH] fix(a11y): add ARIA attributes to interactive elements

- ImageBlock: wrap clickable image in <button> with aria-label, add
  role=dialog and aria-modal to lightbox overlay
- KeyboardShortcuts: add role=dialog and aria-modal to modal overlay
- CodeBlock: add aria-label to copy button
- LanguageSelector: add aria-label with current language
---
 src/components/CodeBlock.tsx         |  1 +
 src/components/ImageBlock.tsx        | 22 ++++++++++++++++------
 src/components/KeyboardShortcuts.tsx |  2 +-
 src/components/LanguageSelector.tsx  |  1 +
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index c32ff99..9b7aca4 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -26,6 +26,7 @@ export function CodeBlock(props: HTMLAttributes<HTMLPreElement>) {
         onClick={handleCopy}
         className="absolute top-2 right-2 p-1.5 rounded-lg bg-zinc-700/60 hover:bg-zinc-600/80 border border-white/10 text-zinc-400 hover:text-zinc-200 opacity-0 group-hover/code:opacity-100 transition-opacity duration-150"
         title="Copy code"
+        aria-label="Copy code to clipboard"
         type="button"
       >
         {copied
diff --git a/src/components/ImageBlock.tsx b/src/components/ImageBlock.tsx
index c238868..a2e6641 100644
--- a/src/components/ImageBlock.tsx
+++ b/src/components/ImageBlock.tsx
@@ -18,11 +18,15 @@ function Lightbox({ src, alt, onClose }: ImageBlockProps & { onClose: () => void
 
   return (
     <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={alt || 'Image preview'}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
       onClick={onClose}
     >
       <button
         onClick={onClose}
+        aria-label="Close preview"
         className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800/80 border border-white/10 text-zinc-300 hover:text-white hover:bg-zinc-700/80 transition-colors"
       >
         <X size={20} />
@@ -43,13 +47,19 @@ export function ImageBlock({ src, alt }: ImageBlockProps) {
   return (
     <>
       <div className="my-2">
-        <img
-          src={src}
-          alt={alt || 'Image'}
-          className="max-w-full max-h-80 rounded-xl border border-white/8 cursor-pointer hover:brightness-110 transition-all"
+        <button
+          type="button"
           onClick={() => setLightbox(true)}
-          loading="lazy"
-        />
+          aria-label={`View ${alt || 'image'} full size`}
+          className="block rounded-xl border border-white/8 cursor-pointer hover:brightness-110 transition-all focus:outline-none focus:ring-2 focus:ring-cyan-400/40"
+        >
+          <img
+            src={src}
+            alt={alt || 'Image'}
+            className="max-w-full max-h-80 rounded-xl"
+            loading="lazy"
+          />
+        </button>
       </div>
       {lightbox && <Lightbox src={src} alt={alt} onClose={() => setLightbox(false)} />}
     </>
diff --git a/src/components/KeyboardShortcuts.tsx b/src/components/KeyboardShortcuts.tsx
index 71fa834..606214d 100644
--- a/src/components/KeyboardShortcuts.tsx
+++ b/src/components/KeyboardShortcuts.tsx
@@ -50,7 +50,7 @@ export function KeyboardShortcuts({ open, onClose }: Props) {
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+    <div role="dialog" aria-modal="true" aria-label={t('shortcuts.title')} className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
       {/* Backdrop */}
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
 
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 55a70ef..5271173 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -16,6 +16,7 @@ export function LanguageSelector() {
       onClick={cycle}
       className="flex items-center gap-1.5 rounded-2xl border border-white/8 bg-zinc-800/30 px-2.5 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors"
       title="Change language"
+      aria-label={`Language: ${localeLabels[current] || current}. Click to change.`}
     >
       <Globe size={14} />
       <span className="font-medium">{localeLabels[current] || current.toUpperCase()}</span>