feat: improve accessibility across the app

- add useDialogA11y hook: focus trap, Escape handling, and focus restore
  for all custom modal dialogs (Modal, ThemeSelector, Admin modals)
- add skip link, per-route document titles, and focus shift to main on
  SPA route changes
- make notification list items real buttons (keyboard operable) and show
  hover-only controls on keyboard focus
- close sidebar, dropdowns, and context menus with Escape, returning
  focus to their triggers; mark closed mobile sidebar inert
- associate missing form labels (2FA code, DateTimePicker), add missing
  aria-labels on icon-only buttons, aria-expanded/controls on toggles,
  aria-pressed on theme tiles, scope=col on table headers
- announce loading states via role=status
- respect prefers-reduced-motion
- new i18n keys: common.skipToContent/previous/next, admin.userActions

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/App.jsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { useAuth } from './contexts/AuthContext';
 import { useLanguage } from './contexts/LanguageContext';
 import { useBranding } from './contexts/BrandingContext';
@@ -24,8 +24,9 @@ import NotFound from './pages/NotFound';
 
 export default function App() {
   const { user, loading } = useAuth();
-  const { setLanguage } = useLanguage();
+  const { t, setLanguage } = useLanguage();
   const { appName } = useBranding();
+  const location = useLocation();
 
   // Sync language from server when user loads
   useEffect(() => {
@@ -34,14 +35,28 @@ export default function App() {
     }
   }, [user?.language, setLanguage]);
 
-  // Update document title with branding
+  // Unique, context-forward document title per page (SPA route changes
+  // don't reload the document, so we update the title ourselves)
   useEffect(() => {
-    document.title = `${appName} - BigBlueButton Frontend`;
-  }, [appName]);
+    const pageTitles = {
+      '/dashboard': t('nav.dashboard'),
+      '/calendar': t('nav.calendar'),
+      '/settings': t('nav.settings'),
+      '/admin': t('nav.admin'),
+      '/federation': t('nav.federation'),
+      '/login': t('auth.login'),
+      '/register': t('auth.register'),
+      '/forgot-password': t('auth.forgotPassword'),
+    };
+    const match = Object.entries(pageTitles).find(([path]) =>
+      location.pathname === path || location.pathname.startsWith(`${path}/`)
+    );
+    document.title = match ? `${match[1]} | ${appName}` : `${appName} - BigBlueButton Frontend`;
+  }, [location.pathname, appName, t]);
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-th-bg flex items-center justify-center">
+      <div className="min-h-screen bg-th-bg flex items-center justify-center" role="status" aria-label={t('common.loading')}>
         <div className="animate-spin rounded-full h-12 w-12 border-4 border-th-accent border-t-transparent" />
       </div>
     );

src/components/AnalyticsList.jsx

@@ -211,21 +211,21 @@ export default function AnalyticsList({ analytics, onRefresh, isOwner = true })
                   <table className="w-full text-sm">
                     <thead>
                       <tr className="text-left text-xs text-th-text-s border-b border-th-border">
-                        <th className="pb-2 pr-4 font-medium">{t('analytics.userName')}</th>
-                        <th className="pb-2 pr-4 font-medium">{t('analytics.role')}</th>
-                        <th className="pb-2 pr-4 font-medium">
+                        <th scope="col" className="pb-2 pr-4 font-medium">{t('analytics.userName')}</th>
+                        <th scope="col" className="pb-2 pr-4 font-medium">{t('analytics.role')}</th>
+                        <th scope="col" className="pb-2 pr-4 font-medium">
                           <span className="flex items-center gap-1"><Clock size={11} />{t('analytics.duration')}</span>
                         </th>
-                        <th className="pb-2 pr-4 font-medium">
+                        <th scope="col" className="pb-2 pr-4 font-medium">
                           <span className="flex items-center gap-1"><Mic size={11} />{t('analytics.talkTime')}</span>
                         </th>
-                        <th className="pb-2 pr-4 font-medium">
+                        <th scope="col" className="pb-2 pr-4 font-medium">
                           <span className="flex items-center gap-1"><MessageSquare size={11} />{t('analytics.messages')}</span>
                         </th>
-                        <th className="pb-2 pr-4 font-medium">
+                        <th scope="col" className="pb-2 pr-4 font-medium">
                           <span className="flex items-center gap-1"><Hand size={11} />{t('analytics.raiseHand')}</span>
                         </th>
-                        <th className="pb-2 font-medium">{t('analytics.reactions')}</th>
+                        <th scope="col" className="pb-2 font-medium">{t('analytics.reactions')}</th>
                       </tr>
                     </thead>
                     <tbody>

src/components/DateTimePicker.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { German } from 'flatpickr/dist/l10n/de.js';
@@ -30,6 +30,7 @@ export default function DateTimePicker({
 }) {
   const inputRef = useRef(null);
   const fpRef = useRef(null);
+  const inputId = useId();
   // Always keep a current ref to onChange so flatpickr's closure never goes stale
   const onChangeRef = useRef(onChange);
   useEffect(() => { onChangeRef.current = onChange; });
@@ -85,13 +86,14 @@ export default function DateTimePicker({
   return (
     <div>
       {label && (
-        <label className="block text-sm font-medium text-th-text mb-1.5">
+        <label htmlFor={inputId} className="block text-sm font-medium text-th-text mb-1.5">
           {label}{required && ' *'}
         </label>
       )}
       <div className="relative">
-        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-1" />
+        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-1" aria-hidden="true" />
         <input
+          id={inputId}
           ref={inputRef}
           type="text"
           required={required}

src/components/Layout.jsx

@@ -1,5 +1,5 @@
-import { Outlet } from 'react-router-dom';
-import { useState, useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { useState, useEffect, useRef } from 'react';
 import Navbar from './Navbar';
 import Sidebar from './Sidebar';
 import { useAuth } from '../contexts/AuthContext';
@@ -14,6 +14,19 @@ export default function Layout() {
   const { t } = useLanguage();
   const [resendCooldown, setResendCooldown] = useState(0);
   const [resending, setResending] = useState(false);
+  const location = useLocation();
+  const isFirstRoute = useRef(true);
+
+  // On SPA route changes, move focus to the main region so keyboard and
+  // screen-reader users land on the new page content instead of staying
+  // on the link they clicked in the sidebar.
+  useEffect(() => {
+    if (isFirstRoute.current) {
+      isFirstRoute.current = false;
+      return;
+    }
+    document.getElementById('main-content')?.focus();
+  }, [location.pathname]);
 
   // Countdown timer for resend cooldown
   useEffect(() => {
@@ -22,6 +35,16 @@ export default function Layout() {
     return () => clearTimeout(timer);
   }, [resendCooldown]);
 
+  // Close the mobile sidebar drawer with Escape
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const handleKey = (e) => {
+      if (e.key === 'Escape') setSidebarOpen(false);
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [sidebarOpen]);
+
   const handleResendVerification = async () => {
     if (resendCooldown > 0 || resending) return;
     setResending(true);
@@ -42,12 +65,20 @@ export default function Layout() {
 
   return (
     <div className="min-h-screen bg-th-bg flex">
+      {/* Skip link — first tab stop, jumps past sidebar and navbar */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:rounded-lg focus:bg-th-accent focus:text-th-accent-t focus:shadow-lg"
+      >
+        {t('common.skipToContent')}
+      </a>
+
       {/* Sidebar */}
       <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       {/* Main content */}
       <div className="flex-1 flex flex-col min-h-screen lg:ml-64">
-        <Navbar onMenuClick={() => setSidebarOpen(true)} />
+        <Navbar onMenuClick={() => setSidebarOpen(true)} sidebarOpen={sidebarOpen} />
 
         {/* Email verification banner */}
         {user && user.email_verified === 0 && (
@@ -67,7 +98,7 @@ export default function Layout() {
           </div>
         )}
 
-        <main className="flex-1 p-4 md:p-6 lg:p-8 max-w-7xl w-full mx-auto">
+        <main id="main-content" tabIndex={-1} className="flex-1 p-4 md:p-6 lg:p-8 max-w-7xl w-full mx-auto focus:outline-hidden">
           <Outlet />
         </main>
       </div>
@@ -77,6 +108,7 @@ export default function Layout() {
         <div
           className="fixed inset-0 bg-black/50 z-30 lg:hidden"
           onClick={() => setSidebarOpen(false)}
+          aria-hidden="true"
         />
       )}
     </div>

src/components/Modal.jsx

@@ -1,33 +1,12 @@
-import { useEffect, useId, useRef } from 'react';
+import { useId } from 'react';
 import { X } from 'lucide-react';
 import { useLanguage } from '../contexts/LanguageContext';
+import useDialogA11y from '../hooks/useDialogA11y';
 
 export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) {
   const { t } = useLanguage();
   const titleId = useId();
-  const dialogRef = useRef(null);
-  const previouslyFocused = useRef(null);
-
-  // Keep the latest onClose in a ref so the mount-only effect below can call it
-  // without listing onClose as a dependency. Callers pass a fresh inline arrow
-  // each render; depending on it would re-run the effect on every keystroke and
-  // steal focus back to the dialog (kicking the user out of input fields).
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-
-  useEffect(() => {
-    previouslyFocused.current = document.activeElement;
-    const handleKey = (e) => {
-      if (e.key === 'Escape') onCloseRef.current?.();
-    };
-    document.addEventListener('keydown', handleKey);
-    // Focus the dialog so screen readers announce it and keyboard focus lands inside
-    dialogRef.current?.focus();
-    return () => {
-      document.removeEventListener('keydown', handleKey);
-      previouslyFocused.current?.focus?.();
-    };
-  }, []);
+  const dialogRef = useDialogA11y(true, onClose);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">

src/components/Navbar.jsx

@@ -6,12 +6,13 @@ import { useState, useRef, useEffect } from 'react';
 import api from '../services/api';
 import NotificationBell from './NotificationBell';
 
-export default function Navbar({ onMenuClick }) {
+export default function Navbar({ onMenuClick, sidebarOpen }) {
   const { user, logout } = useAuth();
   const { t } = useLanguage();
   const navigate = useNavigate();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const dropdownButtonRef = useRef(null);
 
   useEffect(() => {
     function handleClick(e) {
@@ -23,6 +24,19 @@ export default function Navbar({ onMenuClick }) {
     return () => document.removeEventListener('mousedown', handleClick);
   }, []);
 
+  // Close the dropdown with Escape and return focus to its trigger
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    function handleKey(e) {
+      if (e.key === 'Escape') {
+        setDropdownOpen(false);
+        dropdownButtonRef.current?.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [dropdownOpen]);
+
   const handleLogout = () => {
     logout();
     navigate('/');
@@ -45,6 +59,8 @@ export default function Navbar({ onMenuClick }) {
           <button
             onClick={onMenuClick}
             aria-label={t('nav.navigation')}
+            aria-controls="app-sidebar"
+            aria-expanded={sidebarOpen}
             className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
           >
             <Menu size={20} />
@@ -59,9 +75,9 @@ export default function Navbar({ onMenuClick }) {
           {/* User dropdown */}
           <div className="relative" ref={dropdownRef}>
             <button
+              ref={dropdownButtonRef}
               onClick={() => setDropdownOpen(!dropdownOpen)}
               aria-label={user?.display_name || user?.name}
-              aria-haspopup="menu"
               aria-expanded={dropdownOpen}
               className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-th-hover transition-colors"
             >

src/components/NotificationBell.jsx

@@ -53,6 +53,7 @@ export default function NotificationBell() {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
+  const bellButtonRef = useRef(null);
 
   useEffect(() => {
     function handleOutsideClick(e) {
@@ -64,6 +65,19 @@ export default function NotificationBell() {
     return () => document.removeEventListener('mousedown', handleOutsideClick);
   }, []);
 
+  // Close the dropdown with Escape and return focus to the bell button
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        bellButtonRef.current?.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open]);
+
   const handleNotificationClick = async (n) => {
     if (!n.read) await markRead(n.id);
     if (n.link) navigate(n.link);
@@ -81,12 +95,12 @@ export default function NotificationBell() {
     <div className="relative" ref={containerRef}>
       {/* Bell button */}
       <button
+        ref={bellButtonRef}
         onClick={() => setOpen(prev => !prev)}
         className="relative p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
         aria-label={unreadCount > 0
           ? `${t('notifications.bell')} (${unreadCount})`
           : t('notifications.bell')}
-        aria-haspopup="true"
         aria-expanded={open}
         title={t('notifications.bell')}
       >
@@ -148,37 +162,42 @@ export default function NotificationBell() {
                 {recent.map(n => (
                   <li
                     key={n.id}
-                    onClick={() => handleNotificationClick(n)}
-                    className={`group flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors border-b border-th-border/50 last:border-0
+                    className={`group relative flex items-start gap-3 px-4 py-3 transition-colors border-b border-th-border/50 last:border-0
                       ${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
                   >
-                    {/* Icon */}
-                    <span className="text-lg shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
+                    {/* Main click target — a real button so it is keyboard operable */}
+                    <button
+                      onClick={() => handleNotificationClick(n)}
+                      className="flex items-start gap-3 flex-1 min-w-0 text-left focus:outline-hidden focus-visible:ring-2 focus-visible:ring-th-ring rounded-sm"
+                    >
+                      {/* Icon */}
+                      <span className="text-lg shrink-0 mt-0.5" aria-hidden="true">{notificationIcon(n.type)}</span>
 
-                    {/* Content */}
-                    <div className="flex-1 min-w-0">
-                      <p className={`text-sm truncate ${n.read ? 'text-th-text-s' : 'text-th-text font-medium'}`}>
-                        {n.title}
-                      </p>
-                      <p className="text-xs text-th-text-s truncate">
-                        {notificationSubtitle(n, t, language)}
-                      </p>
-                      <p className="text-xs text-th-text-s/70 mt-0.5">
-                        {timeAgo(n.created_at, language)}
-                      </p>
-                    </div>
+                      {/* Content */}
+                      <span className="flex-1 min-w-0 block">
+                        <span className={`text-sm truncate block ${n.read ? 'text-th-text-s' : 'text-th-text font-medium'}`}>
+                          {n.title}
+                        </span>
+                        <span className="text-xs text-th-text-s truncate block">
+                          {notificationSubtitle(n, t, language)}
+                        </span>
+                        <span className="text-xs text-th-text-s/70 mt-0.5 block">
+                          {timeAgo(n.created_at, language)}
+                        </span>
+                      </span>
+                    </button>
 
                     {/* Right side: unread dot, link icon, delete button */}
                     <div className="flex flex-col items-end gap-1 shrink-0">
                       {!n.read && (
-                        <span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
+                        <span className="w-2 h-2 rounded-full bg-th-accent mt-1" aria-hidden="true" />
                       )}
                       {n.link && (
-                        <ExternalLink size={12} className="text-th-text-s/50" />
+                        <ExternalLink size={12} className="text-th-text-s/50" aria-hidden="true" />
                       )}
                       <button
                         onClick={(e) => handleDelete(e, n.id)}
-                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded-sm hover:text-th-error transition-all text-th-text-s/50"
+                        className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 p-0.5 rounded-sm hover:text-th-error transition-all text-th-text-s/50"
                         aria-label={t('notifications.delete')}
                         title={t('notifications.delete')}
                       >

src/components/RoomCard.jsx

@@ -24,6 +24,20 @@ export default function RoomCard({ room, onDelete }) {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  // Close the copy menu with Escape
+  useEffect(() => {
+    if (!showCopyMenu) return;
+    const handleKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        setShowCopyMenu(false);
+        copyMenuRef.current?.querySelector('button')?.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [showCopyMenu]);
+
   const copyToClipboard = (url) => {
     navigator.clipboard.writeText(url);
     toast.success(t('room.linkCopied'));
@@ -137,7 +151,6 @@ export default function RoomCard({ room, onDelete }) {
             onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
             className="btn-ghost text-xs py-1.5 px-2"
             aria-label={t('room.copyLink')}
-            aria-haspopup="menu"
             aria-expanded={showCopyMenu}
             title={t('room.copyLink')}
           >

src/components/Sidebar.jsx

@@ -14,6 +14,19 @@ export default function Sidebar({ open, onClose }) {
   const { imprintUrl, privacyUrl } = useBranding();
   const [themeOpen, setThemeOpen] = useState(false);
   const [federationCount, setFederationCount] = useState(0);
+  // On mobile the sidebar is an off-canvas drawer: while closed it must be
+  // inert so its links aren't reachable via Tab or screen readers. On
+  // desktop (lg+) it is always visible and never inert.
+  const [isDesktop, setIsDesktop] = useState(
+    () => window.matchMedia('(min-width: 1024px)').matches
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1024px)');
+    const handleChange = (e) => setIsDesktop(e.matches);
+    mq.addEventListener('change', handleChange);
+    return () => mq.removeEventListener('change', handleChange);
+  }, []);
 
   // Fetch pending federation invitation count
   useEffect(() => {
@@ -50,6 +63,8 @@ export default function Sidebar({ open, onClose }) {
   return (
     <>
       <aside
+        id="app-sidebar"
+        inert={!open && !isDesktop}
         className={`fixed top-0 left-0 z-40 h-full w-64 bg-th-side border-r border-th-border
         transition-transform duration-300 ease-in-out
         ${open ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0`}
@@ -68,7 +83,7 @@ export default function Sidebar({ open, onClose }) {
           </div>
 
           {/* Navigation */}
-          <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+          <nav aria-label={t('nav.navigation')} className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
             <p className="px-3 mb-2 text-xs font-semibold text-th-text-s uppercase tracking-wider">
               {t('nav.navigation')}
             </p>
@@ -95,6 +110,7 @@ export default function Sidebar({ open, onClose }) {
               </p>
               <button
                 onClick={() => setThemeOpen(!themeOpen)}
+                aria-haspopup="dialog"
                 className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-th-text-s hover:text-th-text hover:bg-th-hover transition-all duration-200"
               >
                 <Palette size={18} />

src/components/ThemeSelector.jsx

@@ -2,21 +2,25 @@ import { X, Check, Sun, Moon } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { getThemeGroups } from '../themes';
+import useDialogA11y from '../hooks/useDialogA11y';
 
 export default function ThemeSelector({ onClose }) {
   const { theme, setTheme } = useTheme();
   const { t } = useLanguage();
   const groups = getThemeGroups();
+  const dialogRef = useDialogA11y(true, onClose);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} aria-hidden="true" />
 
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby="theme-selector-title"
-        className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
+        tabIndex={-1}
+        className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden focus:outline-hidden"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
@@ -45,6 +49,7 @@ export default function ThemeSelector({ onClose }) {
                   <button
                     key={t.id}
                     onClick={() => setTheme(t.id)}
+                    aria-pressed={theme === t.id}
                     className={`relative group rounded-xl p-3 border-2 transition-all duration-200 text-left ${
                       theme === t.id
                         ? 'border-th-accent shadow-lg scale-[1.02]'

src/hooks/useDialogA11y.js

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+/**
+ * Accessibility behavior for custom modal dialogs (we don't use the native
+ * <dialog> element, so the browser gives us none of this for free):
+ *  - moves focus into the dialog when it opens (unless something inside,
+ *    e.g. an autoFocus input, already holds focus)
+ *  - restores focus to the previously focused element when it closes
+ *  - closes on Escape
+ *  - keeps Tab / Shift+Tab cycling inside the dialog
+ *
+ * Attach the returned ref to the dialog element; it needs tabIndex={-1}.
+ * `active` allows conditionally rendered dialogs while keeping the hook
+ * call unconditional.
+ */
+export default function useDialogA11y(active, onClose) {
+  const dialogRef = useRef(null);
+  // Keep the latest onClose in a ref so the effect below doesn't re-run (and
+  // steal focus) when callers pass a fresh inline arrow on every render.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (!active) return;
+    const previouslyFocused = document.activeElement;
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.contains(document.activeElement)) {
+      dialog.focus();
+    }
+
+    const handleKey = (e) => {
+      if (e.key === 'Escape') {
+        onCloseRef.current?.();
+        return;
+      }
+      if (e.key !== 'Tab' || !dialogRef.current) return;
+      const el = dialogRef.current;
+      // Only visible elements — offsetParent is null for display:none subtrees
+      const focusable = Array.from(el.querySelectorAll(FOCUSABLE_SELECTOR))
+        .filter(node => node.offsetParent !== null);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        el.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const current = document.activeElement;
+      if (!el.contains(current)) {
+        e.preventDefault();
+        (e.shiftKey ? last : first).focus();
+      } else if (e.shiftKey && (current === first || current === el)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && current === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+      previouslyFocused?.focus?.();
+    };
+  }, [active]);
+
+  return dialogRef;
+}

src/i18n/de.json

@@ -25,7 +25,10 @@
     "error": "Fehler",
     "success": "Erfolg",
     "gridView": "Rasteransicht",
-    "listView": "Listenansicht"
+    "listView": "Listenansicht",
+    "skipToContent": "Zum Hauptinhalt springen",
+    "previous": "Zurück",
+    "next": "Weiter"
   },
   "nav": {
     "dashboard": "Dashboard",
@@ -418,6 +421,7 @@
     "makeUser": "Zum Benutzer machen",
     "resetPassword": "Passwort zurücksetzen",
     "deleteUser": "Löschen",
+    "userActions": "Benutzeraktionen",
     "createUser": "Benutzer erstellen",
     "createUserTitle": "Neuen Benutzer erstellen",
     "userCreated": "Benutzer erstellt",

src/i18n/en.json

@@ -25,7 +25,10 @@
     "error": "Error",
     "success": "Success",
     "gridView": "Grid view",
-    "listView": "List view"
+    "listView": "List view",
+    "skipToContent": "Skip to main content",
+    "previous": "Previous",
+    "next": "Next"
   },
   "nav": {
     "dashboard": "Dashboard",
@@ -418,6 +421,7 @@
     "makeUser": "Make user",
     "resetPassword": "Reset password",
     "deleteUser": "Delete",
+    "userActions": "User actions",
     "createUser": "Create user",
     "createUserTitle": "Create new user",
     "userCreated": "User created",

src/index.css

@@ -51,6 +51,20 @@
   [role="button"]:not([aria-disabled="true"]) {
     cursor: pointer;
   }
+
+  /* Respect the user's OS-level reduced-motion preference: collapse
+     animations and transitions to near-instant instead of removing them,
+     so JS animation/transition event handlers still fire. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }
 
 @utility btn-primary {

src/pages/Admin.jsx

@@ -12,6 +12,7 @@ import { useBranding } from '../contexts/BrandingContext';
 import { themes } from '../themes';
 import api from '../services/api';
 import toast from 'react-hot-toast';
+import useDialogA11y from '../hooks/useDialogA11y';
 
 export default function Admin() {
   const { user } = useAuth();
@@ -63,6 +64,25 @@ export default function Admin() {
   const [showAllRoomsModal, setShowAllRoomsModal] = useState(false);
   const [allRoomsSearch, setAllRoomsSearch] = useState('');
 
+  // Dialog accessibility (focus management, Escape, focus trap)
+  const resetPwDialogRef = useDialogA11y(!!resetPwModal, () => setResetPwModal(null));
+  const createUserDialogRef = useDialogA11y(showCreateUser, () => setShowCreateUser(false));
+  const allRoomsDialogRef = useDialogA11y(showAllRoomsModal, () => setShowAllRoomsModal(false));
+
+  // Close the user context menu with Escape and return focus to its trigger
+  useEffect(() => {
+    if (!openMenu) return;
+    const handleKey = (e) => {
+      if (e.key === 'Escape') {
+        menuBtnRefs.current[openMenu]?.focus();
+        setOpenMenu(null);
+        setMenuPos(null);
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [openMenu]);
+
   useEffect(() => {
     if (user?.role !== 'admin') {
       navigate('/dashboard');
@@ -386,7 +406,7 @@ export default function Admin() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-20">
+      <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
         <Loader2 size={32} className="animate-spin text-th-accent" />
       </div>
     );
@@ -435,7 +455,7 @@ export default function Admin() {
                   <button
                     onClick={handleLogoRemove}
                     aria-label={t('common.delete')}
-                    className="absolute -top-2 -right-2 w-5 h-5 bg-th-error text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="absolute -top-2 -right-2 w-5 h-5 bg-th-error text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
                   >
                     <XIcon size={12} />
                   </button>
@@ -509,6 +529,7 @@ export default function Admin() {
                   }`}
                   aria-checked={hideAppName}
                   role="switch"
+                  aria-label={t('admin.hideAppNameLabel')}
                 >
                   <span className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
                     hideAppName ? 'translate-x-4' : 'translate-x-0'
@@ -863,19 +884,19 @@ export default function Admin() {
                     <table className="w-full">
                       <thead>
                         <tr className="border-b border-th-border">
-                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
+                          <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                             {t('admin.roomName')}
                           </th>
-                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
+                          <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
                             {t('admin.roomOwner')}
                           </th>
-                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
+                          <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
                             {t('admin.roomShares')}
                           </th>
-                          <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
+                          <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
                             {t('admin.roomCreated')}
                           </th>
-                          <th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
+                          <th scope="col" className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                             {t('admin.actions')}
                           </th>
                         </tr>
@@ -970,19 +991,19 @@ export default function Admin() {
           <table className="w-full">
             <thead>
               <tr className="border-b border-th-border">
-                <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3">
+                <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3">
                   {t('admin.user')}
                 </th>
-                <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden sm:table-cell">
+                <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden sm:table-cell">
                   {t('admin.role')}
                 </th>
-                <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden md:table-cell">
+                <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden md:table-cell">
                   {t('admin.rooms')}
                 </th>
-                <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden lg:table-cell">
+                <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3 hidden lg:table-cell">
                   {t('admin.registered')}
                 </th>
-                <th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3">
+                <th scope="col" className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-5 py-3">
                   {t('admin.actions')}
                 </th>
               </tr>
@@ -1052,6 +1073,8 @@ export default function Admin() {
                         }}
                         className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
                         disabled={u.id === user.id}
+                        aria-label={`${t('admin.userActions')}: ${u.display_name || u.name}`}
+                        aria-expanded={openMenu === u.id}
                       >
                         <MoreVertical size={16} />
                       </button>
@@ -1112,7 +1135,7 @@ export default function Admin() {
       {resetPwModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setResetPwModal(null)} aria-hidden="true" />
-          <div role="dialog" aria-modal="true" aria-labelledby="reset-pw-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
+          <div ref={resetPwDialogRef} role="dialog" aria-modal="true" aria-labelledby="reset-pw-title" tabIndex={-1} className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6 focus:outline-hidden">
             <h3 id="reset-pw-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
             <form onSubmit={handleResetPassword}>
               <div className="mb-4">
@@ -1146,7 +1169,7 @@ export default function Admin() {
       {showCreateUser && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowCreateUser(false)} aria-hidden="true" />
-          <div role="dialog" aria-modal="true" aria-labelledby="create-user-title" className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
+          <div ref={createUserDialogRef} role="dialog" aria-modal="true" aria-labelledby="create-user-title" tabIndex={-1} className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6 focus:outline-hidden">
             <h3 id="create-user-title" className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
             <form onSubmit={handleCreateUser} className="space-y-4">
               <div>
@@ -1242,12 +1265,12 @@ export default function Admin() {
       {/* All rooms modal */}
       {showAllRoomsModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowAllRoomsModal(false)} />
-          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col">
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowAllRoomsModal(false)} aria-hidden="true" />
+          <div ref={allRoomsDialogRef} role="dialog" aria-modal="true" aria-labelledby="all-rooms-title" tabIndex={-1} className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col focus:outline-hidden">
             <div className="flex items-center justify-between p-6 border-b border-th-border">
               <div className="flex items-center gap-2">
-                <DoorOpen size={20} className="text-th-accent" />
-                <h3 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3>
+                <DoorOpen size={20} className="text-th-accent" aria-hidden="true" />
+                <h3 id="all-rooms-title" className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3>
                 <span className="text-sm text-th-text-s">({adminRooms.length})</span>
               </div>
               <button onClick={() => setShowAllRoomsModal(false)} aria-label={t('common.close')} className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors">
@@ -1272,19 +1295,19 @@ export default function Admin() {
               <table className="w-full">
                 <thead className="sticky top-0 bg-th-card z-10">
                   <tr className="border-b border-th-border">
-                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
+                    <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                       {t('admin.roomName')}
                     </th>
-                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
+                    <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden sm:table-cell">
                       {t('admin.roomOwner')}
                     </th>
-                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
+                    <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden md:table-cell">
                       {t('admin.roomShares')}
                     </th>
-                    <th className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
+                    <th scope="col" className="text-left text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5 hidden lg:table-cell">
                       {t('admin.roomCreated')}
                     </th>
-                    <th className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
+                    <th scope="col" className="text-right text-xs font-semibold text-th-text-s uppercase tracking-wider px-4 py-2.5">
                       {t('admin.actions')}
                     </th>
                   </tr>
@@ -1321,6 +1344,7 @@ export default function Admin() {
                             <button
                               onClick={() => { setShowAllRoomsModal(false); navigate(`/rooms/${r.uid}`); }}
                               className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
+                              aria-label={t('admin.roomView')}
                               title={t('admin.roomView')}
                             >
                               <Eye size={15} />
@@ -1328,6 +1352,7 @@ export default function Admin() {
                             <button
                               onClick={() => handleAdminDeleteRoom(r.uid, r.name)}
                               className="p-1.5 rounded-lg hover:bg-th-hover text-th-error transition-colors"
+                              aria-label={t('admin.deleteRoom')}
                               title={t('admin.deleteRoom')}
                             >
                               <Trash2 size={15} />

src/pages/Calendar.jsx

@@ -421,7 +421,7 @@ export default function Calendar() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-20">
+      <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
         <Loader2 size={32} className="animate-spin text-th-accent" />
       </div>
     );
@@ -459,13 +459,13 @@ export default function Calendar() {
       {/* Toolbar */}
       <div className="card p-3 mb-4 flex items-center justify-between flex-wrap gap-2">
         <div className="flex items-center gap-2">
-          <button onClick={navigatePrev} className="btn-ghost p-2">
+          <button onClick={navigatePrev} aria-label={t('common.previous')} className="btn-ghost p-2">
             <ChevronLeft size={18} />
           </button>
           <button onClick={goToToday} className="btn-ghost text-sm px-3 py-1.5">
             {t('calendar.today')}
           </button>
-          <button onClick={navigateNext} className="btn-ghost p-2">
+          <button onClick={navigateNext} aria-label={t('common.next')} className="btn-ghost p-2">
             <ChevronRight size={18} />
           </button>
           <h2 className="text-lg font-semibold text-th-text ml-2">{monthLabel}</h2>

src/pages/Dashboard.jsx

@@ -85,7 +85,7 @@ export default function Dashboard() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-20">
+      <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
         <Loader2 size={32} className="animate-spin text-th-accent" />
       </div>
     );

src/pages/FederatedRoomDetail.jsx

@@ -67,7 +67,7 @@ export default function FederatedRoomDetail() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-20">
+      <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
         <Loader2 size={32} className="animate-spin text-th-accent" />
       </div>
     );

src/pages/FederationInbox.jsx

@@ -127,7 +127,7 @@ export default function FederationInbox() {
 
     if (loading) {
         return (
-            <div className="flex items-center justify-center py-20">
+            <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
                 <Loader2 size={32} className="animate-spin text-th-accent" />
             </div>
         );

src/pages/Login.jsx

@@ -106,7 +106,7 @@ export default function Login() {
   return (
     <div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
       {/* Animated background */}
-      <div className="absolute inset-0 bg-th-bg">
+      <div className="absolute inset-0 bg-th-bg" aria-hidden="true">
         <div className="absolute inset-0 opacity-30">
           <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-th-accent rounded-full blur-[128px] animate-pulse" />
           <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '2s' }} />
@@ -137,10 +137,11 @@ export default function Login() {
 
               <form onSubmit={handle2FASubmit} className="space-y-5">
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.2fa.codeLabel')}</label>
+                  <label htmlFor="login-totp-code" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.2fa.codeLabel')}</label>
                   <div className="relative">
-                    <ShieldCheck size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <ShieldCheck size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="login-totp-code"
                       ref={totpInputRef}
                       type="text"
                       inputMode="numeric"

src/pages/RoomDetail.jsx

@@ -369,7 +369,7 @@ export default function RoomDetail() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-20">
+      <div className="flex items-center justify-center py-20" role="status" aria-label={t('common.loading')}>
         <Loader2 size={32} className="animate-spin text-th-accent" />
       </div>
     );
@@ -739,7 +739,7 @@ export default function RoomDetail() {
               <p className="text-xs text-th-text-s mt-1">{t('room.moderatorCodeDesc')}</p>
             </div>
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestLink')}</label>
+              <span className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestLink')}</span>
               <div className="flex items-center gap-2">
                 <code className="flex-1 bg-th-bg-s px-3 py-2 rounded-lg text-xs text-th-text font-mono truncate border border-th-border">
                   {window.location.origin}/join/{room.uid}
@@ -750,6 +750,7 @@ export default function RoomDetail() {
                     navigator.clipboard.writeText(`${window.location.origin}/join/${room.uid}`);
                     toast.success(t('room.linkCopied'));
                   }}
+                  aria-label={t('room.copyLink')}
                   className="btn-ghost text-xs py-2 px-3"
                 >
                   <Copy size={14} />