Accessibility improvements

src/app/[locale]/map/[details]/[id]/loading.tsx

@@ -1,5 +1,14 @@
+import { useTranslations } from 'next-intl';
+
 import { Icons } from '@/components/icons';
 
 export default function Loading() {
-  return <Icons.loading className="m-auto h-8 w-8 animate-spin text-primary" />;
+  const t = useTranslations();
+  return (
+    <Icons.loading
+      className="m-auto h-8 w-8 animate-spin text-primary"
+      role="img"
+      aria-label={t('site.loading')}
+    />
+  );
 }

src/components/map-filters.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useMapContext } from '@/context/map';
+import { useTranslations } from 'next-intl';
 
 import { partition } from '@/lib/utils';
 import {
@@ -14,6 +15,7 @@ import { Switch } from './ui/switch';
 
 export default function MapFilters() {
   const { settings, layers, toggleLayer } = useMapContext();
+  const t = useTranslations();
 
   const handleChange = useCallback(
     (id: number, isActive: boolean) => {
@@ -29,7 +31,8 @@ export default function MapFilters() {
   ) {
     return (
       <div className="bg-background px-3">
-        {Array.from({ length: 4 }).map(() => (
+        <p className="sr-only">{t('site.loading')}</p>
+        {Array.from({ length: 4 }, () => (
           <div className="flex w-full justify-between border-b py-4 last:border-b-0">
             <div className="skeleton-animation h-6 w-32 rounded"></div>
             <div className="skeleton-animation h-6 w-12 rounded-xl"></div>

src/components/ui/switch.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { useTranslations } from 'next-intl';
 
 import { cn } from '@/lib/utils';
 
@@ -12,26 +13,33 @@ const Switch = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
     isLoading?: boolean;
   }
->(({ className, isLoading, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+>(({ className, isLoading, ...props }, ref) => {
+  const t = useTranslations();
+  return (
+    <SwitchPrimitives.Root
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className,
       )}
+      {...props}
+      ref={ref}
     >
-      {isLoading && (
-        <Icons.loading className="h-full w-full animate-spin text-primary" />
-      )}
-    </SwitchPrimitives.Thumb>
-  </SwitchPrimitives.Root>
-));
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        )}
+      >
+        {isLoading && (
+          <Icons.loading
+            className="h-full w-full animate-spin text-primary"
+            role="img"
+            aria-label={t('site.loading')}
+          />
+        )}
+      </SwitchPrimitives.Thumb>
+    </SwitchPrimitives.Root>
+  );
+});
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

translations/fr.json

@@ -86,7 +86,8 @@
     "menu": "Menu",
     "openMenu": "Ouvrir le menu",
     "prev": "Précédent",
-    "next": "Suivant"
+    "next": "Suivant",
+    "loading": "Chargement"
   },
   "theme": {
     "toggle": "Thème {theme}",