feat: RTL fix, diacritic popup, accessibility, PostHog proxy

.gitignore

@@ -45,3 +45,4 @@ scripts/.freq_data
 
 # Curation review temp files
 scripts/.curation_review/
+.mcp.json

README.md

@@ -1,13 +1,14 @@
 # Wordle Global
 
 [![Tests](https://github.com/Hugo0/wordle/actions/workflows/test.yml/badge.svg)](https://github.com/Hugo0/wordle/actions/workflows/test.yml)
-[![Languages](https://img.shields.io/badge/languages-78-blue)](https://wordle.global)
+[![Languages](https://img.shields.io/badge/languages-79-blue)](https://wordle.global)
+[![Accessibility](https://img.shields.io/badge/a11y-WCAG_2.1_AA-green)](https://wordle.global/accessibility)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Hugo0/wordle/pulls)
 
 ![Wordle Global](public/images/og-image.png)
 
-**[Play now at wordle.global](https://wordle.global/)** — the daily word guessing game in 78 languages. Open source, community-driven, no ads.
+**[Play now at wordle.global](https://wordle.global/)** — the daily word guessing game in 79 languages. Open source, community-driven, no ads.
 
 ## Languages
 

assets/css/main.css

@@ -251,3 +251,48 @@
 .dark .pop {
     border-color: #565758 !important;
 }
+
+/* Respect user's reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+    .shake,
+    .pop,
+    .tile-bounce,
+    .key-shake,
+    .key-pulse,
+    .modal-animate,
+    .key-correct,
+    .key-semicorrect {
+        animation: none !important;
+    }
+
+    .diacritic-popup {
+        animation: none !important;
+    }
+}
+
+/* Skip to content link — visible only on keyboard focus */
+.skip-link {
+    position: absolute;
+    top: -100%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    padding: 8px 16px;
+    background: #3b82f6;
+    color: white;
+    font-weight: 600;
+    border-radius: 0 0 6px 6px;
+    text-decoration: none;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+/* Focus-visible ring for interactive elements (keyboard only, not mouse) */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}

components/game/GameBoard.vue

@@ -1,7 +1,9 @@
 <template>
-    <main class="flex flex-auto justify-center items-center">
+    <main id="game-board" tabindex="-1" class="flex flex-auto justify-center items-center">
         <div
             ref="boardEl"
+            role="grid"
+            aria-label="Wordle game grid"
             class="game-board grid grid-rows-6 relative w-full h-full max-w-[350px] max-h-[420px] gap-1 p-3 box-border"
         >
             <GameTileRow
@@ -10,13 +12,19 @@
                 :tiles="row"
                 :classes="game.tileClassesVisual[i] || []"
                 :shaking="game.shakingRow === i"
+                :rtl="langStore.rightToLeft"
             />
         </div>
+        <!-- Screen reader announcements for guess results -->
+        <div class="sr-only" aria-live="polite" aria-atomic="true">
+            {{ game.srAnnouncement }}
+        </div>
     </main>
 </template>
 
 <script setup lang="ts">
 const game = useGameStore();
+const langStore = useLanguageStore();
 const boardEl = ref<HTMLElement | null>(null);
 
 defineExpose({ boardEl });

components/game/GameHeader.vue

@@ -2,7 +2,7 @@
     <header
         class="relative flex flex-row justify-between items-center h-[50px] my-auto p-1 px-3 lg:px-1 border-b border-neutral-300 dark:border-neutral-600"
     >
-        <button class="z-40 text-neutral-500" aria-label="instructions" @click="$emit('help')">
+        <button class="z-40 text-neutral-500 p-2" aria-label="How to play" @click="$emit('help')">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="text-neutral-500"
@@ -14,6 +14,7 @@
                 fill="none"
                 stroke-linecap="round"
                 stroke-linejoin="round"
+                aria-hidden="true"
             >
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                 <circle cx="12" cy="12" r="9" />
@@ -34,7 +35,7 @@
             </h1>
         </div>
         <div class="flex flex-row gap-3 z-30">
-            <button class="m-0 sm:my-1" @click="$emit('stats')">
+            <button class="m-0 sm:my-1 p-2" aria-label="Statistics" @click="$emit('stats')">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-neutral-500"
@@ -46,6 +47,7 @@
                     fill="none"
                     stroke-linecap="round"
                     stroke-linejoin="round"
+                    aria-hidden="true"
                 >
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <rect x="3" y="12" width="6" height="8" rx="1" />
@@ -54,7 +56,7 @@
                     <line x1="4" y1="20" x2="18" y2="20" />
                 </svg>
             </button>
-            <button class="m-0 sm:my-1" @click="$emit('settings')">
+            <button class="m-0 sm:my-1 p-2" aria-label="Settings" @click="$emit('settings')">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="text-neutral-500"
@@ -66,6 +68,7 @@
                     fill="none"
                     stroke-linecap="round"
                     stroke-linejoin="round"
+                    aria-hidden="true"
                 >
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path

components/game/GameKeyboard.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="flex flex-col container mx-auto gap-2 w-full max-w-lg pb-2 md:pb-5 px-2">
+    <div
+        role="group"
+        aria-label="Keyboard"
+        class="flex flex-col container mx-auto gap-2 w-full max-w-lg pb-2 md:pb-5 px-2"
+    >
         <div v-for="(row, i) in keyboard" :key="i" class="flex gap-1">
             <GameKeyboardKey
                 v-for="key in row"
@@ -8,6 +12,7 @@
                 :state="game.keyClasses[key] || ''"
                 :hint="hints[key.toLowerCase()]?.text"
                 :hint-above="hints[key.toLowerCase()]?.above"
+                :variants="diacriticMap[key.toLowerCase()]"
                 @press="game.keyClick"
             />
         </div>
@@ -16,9 +21,12 @@
 
 <script setup lang="ts">
 const game = useGameStore();
+const langStore = useLanguageStore();
 
 defineProps<{
     keyboard: string[][];
     hints: Record<string, { text: string; above?: boolean }>;
 }>();
+
+const diacriticMap = computed(() => langStore.config?.diacritic_map ?? {});
 </script>

components/game/HelpModal.vue

@@ -120,7 +120,7 @@
                             d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
                         />
                     </svg>
-                    {{ lang.config?.ui?.report_issue || 'Report an Issue' }}
+                    {{ lang.config?.ui?.report_issue }}
                 </a>
                 <a
                     href="https://github.com/Hugo0/wordle"
@@ -144,7 +144,7 @@
                         <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
                         <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
                     </svg>
-                    {{ lang.config?.ui?.view_source || 'View Source Code' }}
+                    {{ lang.config?.ui?.view_source }}
                 </a>
             </div>