chore: sync package-lock.json after npm install

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redlight",
   "private": true,
-  "version": "2.4.1",
+  "version": "2.5.0",
   "license": "GPL-3.0-or-later",
   "type": "module",
   "scripts": {
@@ -19,7 +19,6 @@
     "concurrently": "^9.0.0",
     "cors": "^2.8.5",
     "dotenv": "^17.3.1",
-    "exceljs": "^4.4.0",
     "express": "^5.2.1",
     "express-rate-limit": "^8.5.2",
     "flatpickr": "^4.6.13",
@@ -27,7 +26,7 @@
     "jsonwebtoken": "^9.0.0",
     "lucide-react": "^1.16.0",
     "multer": "^2.1.0",
-    "nodemailer": "^8.0.1",
+    "nodemailer": "^9.0.3",
     "otpauth": "^9.5.0",
     "pdfkit": "^0.18.0",
     "pg": "^8.18.0",
@@ -38,6 +37,7 @@
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^7.15.1",
     "uuid": "^14.0.0",
+    "write-excel-file": "^4.1.1",
     "xml2js": "^0.6.0"
   },
   "devDependencies": {
@@ -48,5 +48,8 @@
     "postcss": "^8.4.0",
     "tailwindcss": "^4.3.0",
     "vite": "^8.0.0"
+  },
+  "allowScripts": {
+    "better-sqlite3@12.11.1": true
   }
 }

server/config/mailer.js

@@ -289,6 +289,78 @@ export async function sendCalendarInviteEmail(to, name, fromUser, title, startTi
   });
 }
 
+/**
+ * Send a calendar event invitation to an external email address (with ICS attachment).
+ * @param {string} to          - recipient email
+ * @param {string} fromUser    - sender display name
+ * @param {string} title       - event title
+ * @param {string} startTime   - ISO start time
+ * @param {string} endTime     - ISO end time
+ * @param {string|null} description - optional event description
+ * @param {string|null} joinUrl - direct meeting join URL if a room is linked
+ * @param {string} ics         - ICS file content to attach
+ * @param {string} appName     - branding app name
+ * @param {string} lang        - language code
+ */
+export async function sendCalendarEventEmail(to, fromUser, title, startTime, endTime, description, joinUrl, ics, appName = 'Redlight', lang = 'en') {
+  if (!transporter) {
+    throw new Error('SMTP not configured');
+  }
+
+  const from = process.env.SMTP_FROM || process.env.SMTP_USER;
+  const headerAppName = sanitizeHeaderValue(appName);
+  const safeFromUser = escapeHtml(fromUser);
+  const safeTitle = escapeHtml(title);
+  const safeDesc = description ? escapeHtml(description) : null;
+
+  const formatDate = (iso) => {
+    try { return new Date(iso).toLocaleString(lang === 'de' ? 'de-DE' : 'en-GB', { dateStyle: 'full', timeStyle: 'short' }); }
+    catch { return iso; }
+  };
+
+  const introHtml = t(lang, 'email.calendarEventInvite.intro')
+    .replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);
+
+  await transporter.sendMail({
+    from: `"${headerAppName}" <${from}>`,
+    to,
+    subject: t(lang, 'email.calendarEventInvite.subject', { appName: headerAppName, title: sanitizeHeaderValue(title) }),
+    html: `
+      <div style="font-family:Arial,sans-serif;max-width:520px;margin:0 auto;padding:32px;background:#1e1e2e;color:#cdd6f4;border-radius:12px;">
+        <h2 style="color:#cba6f7;margin-top:0;">${t(lang, 'email.calendarEventInvite.title')}</h2>
+        <p>${introHtml}</p>
+        <div style="background:#313244;border-radius:8px;padding:16px;margin:20px 0;">
+          <p style="margin:0 0 4px 0;font-size:15px;font-weight:bold;color:#cdd6f4;">${safeTitle}</p>
+          <p style="margin:6px 0 0 0;font-size:13px;color:#a6adc8;">${escapeHtml(formatDate(startTime))} - ${escapeHtml(formatDate(endTime))}</p>
+          ${safeDesc ? `<p style="margin:10px 0 0 0;font-size:13px;color:#a6adc8;font-style:italic;">&quot;${safeDesc}&quot;</p>` : ''}
+        </div>
+        ${joinUrl ? `
+        <p style="text-align:center;margin:28px 0;">
+          <a href="${joinUrl}"
+             style="display:inline-block;background:#cba6f7;color:#1e1e2e;padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">
+            ${t(lang, 'email.calendarEventInvite.joinButton')}
+          </a>
+        </p>
+        <p style="font-size:13px;color:#7f849c;">
+          ${t(lang, 'email.linkHint')}<br/>
+          <a href="${joinUrl}" style="color:#89b4fa;word-break:break-all;">${escapeHtml(joinUrl)}</a>
+        </p>` : ''}
+        <p style="font-size:13px;color:#7f849c;">${t(lang, 'email.calendarEventInvite.icsHint')}</p>
+        <hr style="border:none;border-top:1px solid #313244;margin:24px 0;"/>
+        <p style="font-size:12px;color:#585b70;">${t(lang, 'email.calendarEventInvite.footer', { appName: escapeHtml(appName) })}</p>
+      </div>
+    `,
+    text: `${t(lang, 'email.calendarEventInvite.intro', { fromUser })}\n${title}\n${formatDate(startTime)} – ${formatDate(endTime)}${description ? `\n\n"${description}"` : ''}${joinUrl ? `\n\n${t(lang, 'email.calendarEventInvite.joinButton')}: ${joinUrl}` : ''}\n\n${t(lang, 'email.calendarEventInvite.icsHint')}\n\n– ${appName}`,
+    attachments: [
+      {
+        filename: 'event.ics',
+        content: ics,
+        contentType: 'text/calendar; charset=utf-8; method=PUBLISH',
+      },
+    ],
+  });
+}
+
 /**
  * Notify a user that a federated calendar event they received was deleted by the organiser.
  */

server/i18n/de.json

@@ -43,6 +43,14 @@
       "subject": "{appName} - Kalendereinladung von {fromUser}",
       "intro": "Du hast eine Kalendereinladung von {fromUser} erhalten."
     },
+    "calendarEventInvite": {
+      "subject": "{appName} - Kalendereinladung: {title}",
+      "title": "Kalendereinladung",
+      "intro": "{fromUser} hat dich zu folgendem Termin eingeladen:",
+      "joinButton": "Meeting beitreten",
+      "icsHint": "Mit der angehängten .ics-Datei kannst du den Termin zu deinem Kalender hinzufügen.",
+      "footer": "Diese Einladung wurde über {appName} versendet."
+    },
     "calendarDeleted": {
       "subject": "{appName} - Kalendereintrag abgesagt: {title}",
       "intro": "Der folgende Kalendereintrag wurde vom Organisator ({fromUser}) gelöscht und ist nicht mehr verfügbar:",

server/i18n/en.json

@@ -43,6 +43,14 @@
       "subject": "{appName} - Calendar invitation from {fromUser}",
       "intro": "You have received a calendar invitation from {fromUser}."
     },
+    "calendarEventInvite": {
+      "subject": "{appName} - Calendar invitation: {title}",
+      "title": "Calendar Invitation",
+      "intro": "{fromUser} has invited you to the following event:",
+      "joinButton": "Join Meeting",
+      "icsHint": "You can add this event to your calendar using the attached .ics file.",
+      "footer": "This invitation was sent via {appName}."
+    },
     "calendarDeleted": {
       "subject": "{appName} - Calendar event cancelled: {title}",
       "intro": "The following calendar event was deleted by the organiser ({fromUser}) and is no longer available:",

server/routes/analytics.js

@@ -1,6 +1,6 @@
 import { Router, json } from 'express';
 import crypto from 'crypto';
-import ExcelJS from 'exceljs';
+import writeXlsxFile from 'write-excel-file/node';
 import PDFDocument from 'pdfkit';
 import { getDb } from '../config/database.js';
 import { authenticateToken } from '../middleware/auth.js';
@@ -246,26 +246,24 @@ router.get('/:id/export/:format', authenticateToken, async (req, res) => {
 
     if (format === 'xlsx') {
       // Prefix-escape strings that would otherwise be evaluated as formulas.
-      const sanitizeXlsx = (r) => {
-        const out = {};
-        for (const k of Object.keys(r)) {
-          const v = r[k];
-          out[k] = (typeof v === 'string' && /^[=+\-@\t\r]/.test(v)) ? "'" + v : v;
-        }
-        return out;
-      };
-      const workbook = new ExcelJS.Workbook();
-      const sheet = workbook.addWorksheet('Analytics');
-      sheet.columns = COLUMNS;
-      rows.forEach(r => sheet.addRow(sanitizeXlsx(r)));
-      // Style header row
-      sheet.getRow(1).font = { bold: true };
-      sheet.getRow(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE0E0E0' } };
+      const sanitizeXlsx = (v) =>
+        (typeof v === 'string' && /^[=+\-@\t\r]/.test(v)) ? "'" + v : v;
+
+      const headerRow = COLUMNS.map(c => ({
+        value: c.header,
+        fontWeight: 'bold',
+        backgroundColor: '#e0e0e0',
+      }));
+      const dataRows = rows.map(r => COLUMNS.map(c => ({ value: sanitizeXlsx(r[c.key]) })));
+
+      const buffer = await writeXlsxFile([headerRow, ...dataRows], {
+        columns: COLUMNS.map(c => ({ width: c.width })),
+        sheet: 'Analytics',
+      }).toBuffer();
 
       res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
       res.setHeader('Content-Disposition', `attachment; filename="${safeName}.xlsx"`);
-      await workbook.xlsx.write(res);
-      return res.end();
+      return res.send(buffer);
     }
 
     if (format === 'pdf') {

server/routes/calendar.js

@@ -3,7 +3,7 @@ import crypto from 'crypto';
 import { getDb } from '../config/database.js';
 import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { log } from '../config/logger.js';
-import { sendCalendarInviteEmail } from '../config/mailer.js';
+import { sendCalendarInviteEmail, sendCalendarEventEmail } from '../config/mailer.js';
 import { getAppName } from '../config/appName.js';
 import {
   isFederationEnabled,
@@ -23,6 +23,16 @@ const SAFE_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|hsl\(\d{1,3},\s*\d{1,3}%,\s*\d{1,3}
 // Allowed reminder intervals in minutes
 const VALID_REMINDERS = new Set([5, 15, 30, 60, 120, 1440]);
 
+// Rate limit email invitations: each request may carry up to 50 addresses, so
+// without a cap any registered account could be abused as an SMTP spam relay.
+const calendarEmailInviteLimiter = rateLimit({
+  windowMs: 60 * 60 * 1000, // 1 hour
+  max: 10,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { error: 'Too many email invitations. Please try again later.' },
+});
+
 // Rate limit for federation calendar receive
 const calendarFederationLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
@@ -581,6 +591,69 @@ router.post('/events/:id/federation', authenticateToken, async (req, res) => {
   }
 });
 
+// ── POST /api/calendar/events/:id/email — Send event invitation by email ────
+router.post('/events/:id/email', authenticateToken, calendarEmailInviteLimiter, async (req, res) => {
+  try {
+    const { emails } = req.body;
+    if (!emails || !Array.isArray(emails) || !emails.length) {
+      return res.status(400).json({ error: 'At least one email address is required' });
+    }
+    if (emails.length > 50) {
+      return res.status(400).json({ error: 'Maximum 50 email addresses allowed' });
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    for (const email of emails) {
+      if (typeof email !== 'string' || !emailRegex.test(email) || email.length > 254) {
+        return res.status(400).json({ error: `Invalid email address: ${email}` });
+      }
+    }
+
+    const db = getDb();
+    const event = await db.get(`
+      SELECT ce.*, COALESCE(NULLIF(u.display_name,''), u.name) as organizer_name, u.email as organizer_email
+      FROM calendar_events ce
+      JOIN users u ON ce.user_id = u.id
+      WHERE ce.id = ? AND ce.user_id = ?
+    `, [req.params.id, req.user.id]);
+    if (!event) return res.status(404).json({ error: 'Event not found or no permission' });
+
+    const baseUrl = getBaseUrl(req);
+    let joinUrl = null;
+    if (event.room_uid) {
+      joinUrl = `${baseUrl}/join/${event.room_uid}`;
+    }
+
+    const ics = generateICS(event, joinUrl || '', baseUrl);
+    const appName = await getAppName();
+    const fromUser = req.user.display_name || req.user.name;
+    const lang = req.user.language || 'en';
+
+    // Send emails (in parallel but collect errors)
+    const results = await Promise.allSettled(
+      emails.map(email =>
+        sendCalendarEventEmail(
+          email, fromUser, event.title, event.start_time, event.end_time,
+          event.description, joinUrl, ics, appName, lang
+        )
+      )
+    );
+
+    const failed = results.filter(r => r.status === 'rejected');
+    if (failed.length === emails.length) {
+      return res.status(500).json({ error: 'Failed to send all email invitations' });
+    }
+    if (failed.length > 0) {
+      log.server.warn(`${failed.length}/${emails.length} calendar email invitations failed`);
+    }
+
+    res.json({ success: true, sent: emails.length - failed.length, failed: failed.length });
+  } catch (err) {
+    log.server.error(`Calendar email invite error: ${err.message}`);
+    res.status(500).json({ error: err.message || 'Failed to send email invitations' });
+  }
+});
+
 // ── POST /receive-event or /calendar-event — Receive calendar event from remote ──
 // '/receive-event' when mounted at /api/calendar
 // '/calendar-event' when mounted at /api/federation (for remote instance discovery)

server/routes/federation.js

@@ -41,7 +41,7 @@ export function wellKnownHandler(req, res) {
         federation_api: '/api/federation',
         public_key: getPublicKey(),
         software: 'Redlight',
-        version: '2.4.1',
+        version: '2.5.0',
     });
 }
 

server/routes/rooms.js

@@ -244,7 +244,8 @@ router.post('/', authenticateToken, async (req, res) => {
       record_meeting !== false ? 1 : 0,
       guest_access ? 1 : 0,
       moderator_code || null,
-      recording_transcript ? 1 : 0,
+      // Transcription/AI summary requires recording to be enabled
+      (record_meeting !== false && recording_transcript) ? 1 : 0,
     ]);
 
     const room = await db.get('SELECT * FROM rooms WHERE id = ?', [result.lastInsertRowid]);
@@ -306,6 +307,9 @@ router.put('/:uid', authenticateToken, async (req, res) => {
       }
     }
 
+    // Transcription/AI summary requires recording — force it off when recording ends up disabled
+    const effectiveRecordMeeting = record_meeting !== undefined ? !!record_meeting : !!room.record_meeting;
+
     await db.run(`
       UPDATE rooms SET
         name = COALESCE(?, name),
@@ -338,7 +342,7 @@ router.put('/:uid', authenticateToken, async (req, res) => {
       moderator_code !== undefined ? (moderator_code || null) : room.moderator_code,
       learning_analytics !== undefined ? (learning_analytics ? 1 : 0) : null,
       analytics_visibility && ['owner', 'shared'].includes(analytics_visibility) ? analytics_visibility : null,
-      recording_transcript !== undefined ? (recording_transcript ? 1 : 0) : null,
+      !effectiveRecordMeeting ? 0 : (recording_transcript !== undefined ? (recording_transcript ? 1 : 0) : null),
       req.params.uid,
     ]);
 

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">
@@ -42,10 +21,10 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
         aria-modal="true"
         aria-labelledby={titleId}
         tabIndex={-1}
-        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
+        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} max-h-[calc(100vh-2rem)] flex flex-col focus:outline-hidden`}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl shrink-0">
           <h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
           <button
             type="button"
@@ -56,8 +35,8 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
             <X size={20} />
           </button>
         </div>
-        {/* Body */}
-        <div className="p-6">
+        {/* Body — scrolls inside the card instead of overflowing the viewport */}
+        <div className="p-6 overflow-y-auto min-h-0">
           {children}
         </div>
       </div>

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",
@@ -644,9 +648,11 @@
     "invitationPending": "Einladung ausstehend",
     "pendingInvitations": "Ausstehende Einladungen",
     "accepted": "Angenommen",
-    "sendFederated": "An Remote senden",
-    "sendFederatedTitle": "Event an Remote-Instanz senden",
-    "sendFederatedDesc": "Sende dieses Kalender-Event an einen Benutzer auf einer anderen Redlight-Instanz. Der Empfänger muss die Einladung zuerst annehmen, bevor das Event in seinem Kalender erscheint.",
+    "sendFederated": "Remote einladen",
+    "sendFederatedTitle": "Termin-Einladung senden",
+    "sendFederatedDesc": "Sende dieses Kalender-Event an einen Benutzer auf einer anderen Redlight-Instanz oder an eine beliebige E-Mail-Adresse. Remote-Empfänger müssen die Einladung zuerst annehmen, bevor das Event in ihrem Kalender erscheint; E-Mail-Empfänger erhalten die Termindetails mit einer .ics-Datei im Anhang.",
+    "inviteSection": "Einladungen versenden (optional)",
+    "inviteSectionHint": "Lade Personen per E-Mail ein oder sende das Event an einen Benutzer auf einer anderen Redlight-Instanz.",
     "send": "Senden",
     "fedSent": "Kalendereinladung gesendet! Der Empfänger muss diese zuerst annehmen.",
     "fedFailed": "Event konnte nicht an Remote-Instanz gesendet werden",

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",
@@ -644,9 +648,11 @@
     "invitationPending": "Invitation pending",
     "pendingInvitations": "Pending Invitations",
     "accepted": "Accepted",
-    "sendFederated": "Send to remote",
-    "sendFederatedTitle": "Send Event to Remote Instance",
-    "sendFederatedDesc": "Send this calendar event to a user on another Redlight instance. The recipient must accept the invitation before the event appears in their calendar.",
+    "sendFederated": "Invite remote",
+    "sendFederatedTitle": "Send Event Invitation",
+    "sendFederatedDesc": "Send this calendar event to a user on another Redlight instance or to any email address. Remote recipients must accept the invitation before the event appears in their calendar; email recipients receive the event details with an .ics attachment.",
+    "inviteSection": "Send invitations (optional)",
+    "inviteSectionHint": "Invite people by email or send the event to a user on another Redlight instance.",
     "send": "Send",
     "fedSent": "Calendar invitation sent! The recipient must accept it first.",
     "fedFailed": "Could not send event to remote instance",

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

@@ -42,8 +42,13 @@ export default function Calendar() {
   const [sharedUsers, setSharedUsers] = useState([]);
   const [pendingInvitations, setPendingInvitations] = useState([]);
   const [fedAddress, setFedAddress] = useState('');
+  const [fedEmails, setFedEmails] = useState('');
   const [fedSending, setFedSending] = useState(false);
 
+  // Invitations sent right after creating an event
+  const [inviteFedAddress, setInviteFedAddress] = useState('');
+  const [inviteEmails, setInviteEmails] = useState('');
+
   // Load events on month change
   useEffect(() => {
     fetchEvents();
@@ -159,6 +164,8 @@ export default function Calendar() {
       end_time: toLocalDateTimeStr(end),
       room_uid: '', color: '#6366f1', reminder_minutes: null,
     });
+    setInviteFedAddress('');
+    setInviteEmails('');
     setEditingEvent(null);
     setShowCreate(true);
   };
@@ -178,8 +185,41 @@ export default function Calendar() {
     setShowCreate(true);
   };
 
+  const isValidFedAddress = (address) => {
+    const normalized = address.startsWith('@') ? address.slice(1) : address;
+    return normalized.includes('@') && !normalized.endsWith('@');
+  };
+
+  // Send invitations for an event; shows a toast per outcome (non-fatal on failure)
+  const sendEventInvites = async (eventId, address, emailsStr) => {
+    const addr = address.trim();
+    if (addr) {
+      try {
+        await api.post(`/calendar/events/${eventId}/federation`, { to: addr });
+        toast.success(t('calendar.fedSent'));
+      } catch (err) {
+        toast.error(err.response?.data?.error || t('calendar.fedFailed'));
+      }
+    }
+    const emailList = emailsStr.split(',').map(s => s.trim()).filter(Boolean);
+    if (emailList.length > 0) {
+      try {
+        await api.post(`/calendar/events/${eventId}/email`, { emails: emailList });
+        toast.success(t('federation.emailSent'));
+      } catch (err) {
+        toast.error(err.response?.data?.error || t('federation.emailSendFailed'));
+      }
+    }
+  };
+
   const handleSave = async (e) => {
     e.preventDefault();
+
+    if (!editingEvent && inviteFedAddress.trim() && !isValidFedAddress(inviteFedAddress.trim())) {
+      toast.error(t('federation.addressHint'));
+      return;
+    }
+
     setSaving(true);
     try {
       const data = {
@@ -192,11 +232,17 @@ export default function Calendar() {
         await api.put(`/calendar/events/${editingEvent.id}`, data);
         toast.success(t('calendar.eventUpdated'));
       } else {
-        await api.post('/calendar/events', data);
+        const res = await api.post('/calendar/events', data);
         toast.success(t('calendar.eventCreated'));
+        const created = res.data.event;
+        if (created && (inviteFedAddress.trim() || inviteEmails.trim())) {
+          await sendEventInvites(created.id, inviteFedAddress, inviteEmails);
+        }
       }
       setShowCreate(false);
       setEditingEvent(null);
+      setInviteFedAddress('');
+      setInviteEmails('');
       fetchEvents();
     } catch (err) {
       toast.error(err.response?.data?.error || t('calendar.saveFailed'));
@@ -328,19 +374,41 @@ export default function Calendar() {
   const handleFedSend = async (e) => {
     e.preventDefault();
     if (!showFedShare) return;
-    const normalized = fedAddress.startsWith('@') ? fedAddress.slice(1) : fedAddress;
-    if (!normalized.includes('@') || normalized.endsWith('@')) {
+    const hasAddress = fedAddress.trim().length > 0;
+    const hasEmails = fedEmails.trim().length > 0;
+
+    if (!hasAddress && !hasEmails) {
       toast.error(t('federation.addressHint'));
       return;
     }
+
     setFedSending(true);
     try {
-      await api.post(`/calendar/events/${showFedShare.id}/federation`, { to: fedAddress });
-      toast.success(t('calendar.fedSent'));
+      if (hasAddress) {
+        // Federation address mode
+        if (!isValidFedAddress(fedAddress.trim())) {
+          toast.error(t('federation.addressHint'));
+          setFedSending(false);
+          return;
+        }
+        await api.post(`/calendar/events/${showFedShare.id}/federation`, { to: fedAddress });
+        toast.success(t('calendar.fedSent'));
+      } else {
+        // Email mode
+        const emailList = fedEmails.split(',').map(s => s.trim()).filter(Boolean);
+        if (emailList.length === 0) {
+          toast.error(t('federation.emailHint'));
+          setFedSending(false);
+          return;
+        }
+        await api.post(`/calendar/events/${showFedShare.id}/email`, { emails: emailList });
+        toast.success(t('federation.emailSent'));
+      }
       setShowFedShare(null);
       setFedAddress('');
+      setFedEmails('');
     } catch (err) {
-      toast.error(err.response?.data?.error || t('calendar.fedFailed'));
+      toast.error(err.response?.data?.error || t(hasAddress ? 'calendar.fedFailed' : 'federation.emailSendFailed'));
     } finally {
       setFedSending(false);
     }
@@ -353,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>
     );
@@ -378,6 +446,8 @@ export default function Calendar() {
             end_time: toLocalDateTimeStr(end),
             room_uid: '', color: '#6366f1',
           });
+          setInviteFedAddress('');
+          setInviteEmails('');
           setEditingEvent(null);
           setShowCreate(true);
         }} className="btn-primary">
@@ -389,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>
@@ -616,6 +686,41 @@ export default function Calendar() {
               </div>
             </div>
 
+            {!editingEvent && (
+              <div className="pt-4 border-t border-th-border space-y-4">
+                <div>
+                  <p className="text-sm font-medium text-th-text">{t('calendar.inviteSection')}</p>
+                  <p className="text-xs text-th-text-s mt-0.5">{t('calendar.inviteSectionHint')}</p>
+                </div>
+
+                <div>
+                  <label htmlFor="calendar-invite-emails" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
+                  <input
+                    id="calendar-invite-emails"
+                    type="text"
+                    value={inviteEmails}
+                    onChange={e => setInviteEmails(e.target.value)}
+                    className="input-field"
+                    placeholder={t('federation.emailPlaceholder')}
+                  />
+                  <p className="text-xs text-th-text-s mt-1">{t('federation.emailHint')}</p>
+                </div>
+
+                <div>
+                  <label htmlFor="calendar-invite-fed-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+                  <input
+                    id="calendar-invite-fed-address"
+                    type="text"
+                    value={inviteFedAddress}
+                    onChange={e => setInviteFedAddress(e.target.value)}
+                    className="input-field"
+                    placeholder={t('federation.addressPlaceholder')}
+                  />
+                  <p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
+                </div>
+              </div>
+            )}
+
             <div className="flex items-center gap-3 pt-4 border-t border-th-border">
               <button type="button" onClick={() => { setShowCreate(false); setEditingEvent(null); }} className="btn-secondary flex-1">
                 {t('common.cancel')}
@@ -827,9 +932,9 @@ export default function Calendar() {
         </Modal>
       )}
 
-      {/* Federation Share Modal */}
+      {/* Federation/Email Share Modal */}
       {showFedShare && (
-        <Modal title={t('calendar.sendFederatedTitle')} onClose={() => setShowFedShare(null)}>
+        <Modal title={t('calendar.sendFederatedTitle')} onClose={() => { setShowFedShare(null); setFedAddress(''); setFedEmails(''); }}>
           <p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
           <form onSubmit={handleFedSend} className="space-y-4">
             <div>
@@ -838,18 +943,39 @@ export default function Calendar() {
                 id="calendar-fed-share-address"
                 type="text"
                 value={fedAddress}
-                onChange={e => setFedAddress(e.target.value)}
+                onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }}
                 className="input-field"
                 placeholder={t('federation.addressPlaceholder')}
-                required
+                disabled={fedEmails.trim().length > 0}
               />
               <p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
             </div>
+
+            <div className="flex items-center gap-3 my-2">
+              <div className="flex-1 border-t border-th-border" />
+              <span className="text-xs text-th-text-s uppercase">{t('common.or')}</span>
+              <div className="flex-1 border-t border-th-border" />
+            </div>
+
+            <div>
+              <label htmlFor="calendar-fed-share-emails" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
+              <input
+                id="calendar-fed-share-emails"
+                type="text"
+                value={fedEmails}
+                onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }}
+                className="input-field"
+                placeholder={t('federation.emailPlaceholder')}
+                disabled={fedAddress.trim().length > 0}
+              />
+              <p className="text-xs text-th-text-s mt-1">{t('federation.emailHint')}</p>
+            </div>
+
             <div className="flex items-center gap-3 pt-2 border-t border-th-border">
-              <button type="button" onClick={() => setShowFedShare(null)} className="btn-secondary flex-1">
+              <button type="button" onClick={() => { setShowFedShare(null); setFedAddress(''); setFedEmails(''); }} className="btn-secondary flex-1">
                 {t('common.cancel')}
               </button>
-              <button type="submit" disabled={fedSending} className="btn-primary flex-1">
+              <button type="submit" disabled={fedSending || (!fedAddress.trim() && !fedEmails.trim())} className="btn-primary flex-1">
                 {fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
                 {t('calendar.send')}
               </button>

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

@@ -205,7 +205,7 @@ export default function RoomDetail() {
         moderator_code: editRoom.moderator_code,
         learning_analytics: !!editRoom.learning_analytics,
         analytics_visibility: editRoom.analytics_visibility || 'owner',
-        recording_transcript: !!editRoom.recording_transcript,
+        recording_transcript: !!editRoom.record_meeting && !!editRoom.recording_transcript,
       });
       setRoom(res.data.room);
       setEditRoom(res.data.room);
@@ -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>
     );
@@ -674,7 +674,12 @@ export default function RoomDetail() {
               <input
                 type="checkbox"
                 checked={!!editRoom.record_meeting}
-                onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
+                onChange={e => setEditRoom({
+                  ...editRoom,
+                  record_meeting: e.target.checked,
+                  // Transcription/AI summary requires recording — clear it when recording is turned off
+                  recording_transcript: e.target.checked ? editRoom.recording_transcript : false,
+                })}
                 className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
               />
               <span className="text-sm text-th-text">{t('room.allowRecording')}</span>
@@ -734,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}
@@ -745,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} />