fix: prevent focus loss by using ref for onClose in Modal component

Bug fixes:
- bbb.js: replace undefined t('defaultWelcome') call that threw a
  ReferenceError when a room had an empty welcome message, breaking
  meeting creation. Default welcome and the guest-invite hint are now
  localised via the i18n system (new "bbb" namespace in de/en).
- auth.js: app name was read from the never-written 'branding' settings
  key, so custom names never appeared in verification emails or the TOTP
  issuer. Now resolved through a shared getAppName() helper.
- auth.js: lowercase the email in the registration duplicate check so
  case-variant duplicates return a clean 409 instead of a 500 (UNIQUE
  violation).
- federation.js: select the user's "language" column so federation
  invite emails respect the recipient's language instead of always
  defaulting to English.
- calendar.js: a set reminder could not be cleared. COALESCE treated an
  explicit reminder_minutes: null as "keep existing"; use a direct
  assignment that distinguishes "omitted" (keep) from "null" (clear).
- index.js / analytics.js: exclude the BBB learning-analytics callback
  from the global 100kb body limit and give it its own 5mb limit, since
  analytics payloads for large meetings can be several MB.

Cleanup:
- Add server/config/appName.js as the single source of truth for the
  app name (admin setting -> APP_NAME env -> 'Redlight') and use it in
  auth, admin, rooms, calendar and federation, replacing the previous
  mix of wrong DB key, direct app_name reads and bare process.env reads.
- Localise the BBB default welcome message in the room owner's language.
- Remove two unused safeAppName variables in mailer.js.

.gitignore

@@ -3,3 +3,4 @@ dist/
 redlight.db
 uploads/
 .env
+.claude/

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "redlight",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "redlight",
-      "version": "2.1.3",
+      "version": "2.2.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "axios": "^1.7.0",
@@ -798,18 +798,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@types/node": {
-      "version": "25.8.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.8.0.tgz",
-      "integrity": "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": ">=7.24.0 <7.24.7"
-      }
-    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -4647,9 +4635,9 @@
       }
     },
     "node_modules/tmp": {
-      "version": "0.2.5",
+      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
-      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
       "license": "MIT",
       "engines": {
         "node": ">=14.14"
@@ -4719,15 +4707,6 @@
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "license": "MIT"
     },
-    "node_modules/undici-types": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
-      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/unicode-properties": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redlight",
   "private": true,
-  "version": "2.1.3",
+  "version": "2.2.0",
   "license": "GPL-3.0-or-later",
   "type": "module",
   "scripts": {

server/config/appName.js

@@ -0,0 +1,20 @@
+import { getDb } from './database.js';
+
+/**
+ * Resolve the configured application name.
+ * Resolution order: admin-set 'app_name' setting → APP_NAME env var → 'Redlight'.
+ *
+ * The app name is stored in the settings table under the key 'app_name'
+ * (see routes/branding.js). This helper is the single source of truth so the
+ * configured name is used consistently across emails, the 2FA issuer, etc.
+ */
+export async function getAppName() {
+  try {
+    const db = getDb();
+    const row = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
+    if (row?.value) return row.value;
+  } catch {
+    // fall through to env/default if the DB is unavailable
+  }
+  return process.env.APP_NAME || 'Redlight';
+}

server/config/bbb.js

@@ -1,6 +1,7 @@
 import crypto from 'crypto';
 import xml2js from 'xml2js';
 import { log, fmtDuration, fmtStatus, fmtMethod, fmtReturncode, sanitizeBBBParams } from './logger.js';
+import { t } from './emaili18n.js';
 
 const BBB_URL = process.env.BBB_URL || 'https://your-bbb-server.com/bigbluebutton/api/';
 const BBB_SECRET = process.env.BBB_SECRET || '';
@@ -73,15 +74,15 @@ function getRoomPasswords(uid) {
   return { moderatorPW: modPw, attendeePW: attPw };
 }
 
-export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null) {
+export async function createMeeting(room, logoutURL, loginURL = null, presentationUrl = null, analyticsCallbackURL = null, lang = 'en') {
   const { moderatorPW, attendeePW } = getRoomPasswords(room.uid);
 
   // Build welcome message with guest invite link
   // HTML-escape user-controlled content to prevent stored XSS via BBB
-  let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : t('defaultWelcome');
+  let welcome = room.welcome_message ? escapeHtml(room.welcome_message) : escapeHtml(t(lang, 'bbb.defaultWelcome'));
   if (logoutURL) {
     const guestLink = `${logoutURL}/join/${room.uid}`;
-    welcome += `<br><br>To invite other participants, share this link:<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
+    welcome += `<br><br>${escapeHtml(t(lang, 'bbb.inviteHint'))}<br><a href="${escapeHtml(guestLink)}">${escapeHtml(guestLink)}</a>`;
     // Access code is intentionally NOT shown in the welcome message to prevent
     // leaking it to all meeting participants.
   }

server/config/mailer.js

@@ -64,7 +64,6 @@ export async function sendVerificationEmail(to, name, verifyUrl, appName = 'Redl
   const from = process.env.SMTP_FROM || process.env.SMTP_USER;
   const headerAppName = sanitizeHeaderValue(appName);
   const safeName = escapeHtml(name);
-  const safeAppName = escapeHtml(appName);
 
   await transporter.sendMail({
     from: `"${headerAppName}" <${from}>`,
@@ -112,7 +111,6 @@ export async function sendFederationInviteEmail(to, name, fromUser, roomName, me
   const safeFromUser = escapeHtml(fromUser);
   const safeRoomName = escapeHtml(roomName);
   const safeMessage = message ? escapeHtml(message) : null;
-  const safeAppName = escapeHtml(appName);
 
   const introHtml = t(lang, 'email.federationInvite.intro')
     .replace('{fromUser}', `<strong style="color:#cdd6f4;">${safeFromUser}</strong>`);

server/i18n/de.json

@@ -42,5 +42,9 @@
       "note": "Der Termin wurde automatisch aus deinem Kalender entfernt.",
       "footer": "Diese Nachricht wurde automatisch von {appName} versendet."
     }
+  },
+  "bbb": {
+    "defaultWelcome": "Willkommen im Meeting!",
+    "inviteHint": "Lade weitere Teilnehmer ein, indem du diesen Link teilst:"
   }
 }

server/i18n/en.json

@@ -42,5 +42,9 @@
       "note": "The event has been automatically removed from your calendar.",
       "footer": "This message was sent automatically by {appName}."
     }
+  },
+  "bbb": {
+    "defaultWelcome": "Welcome to the meeting!",
+    "inviteHint": "To invite other participants, share this link:"
   }
 }

server/index.js

@@ -51,7 +51,14 @@ const corsOptions = process.env.APP_URL
   ? { origin: process.env.APP_URL, credentials: true }
   : { origin: false };
 app.use(cors(corsOptions));
-app.use(express.json({ limit: '100kb' }));
+// Global JSON body limit kept tight as a hardening measure. The BBB learning
+// analytics callback can send much larger payloads, so it is excluded here and
+// gets its own, more generous limit on the route itself (see routes/analytics.js).
+const jsonParser = express.json({ limit: '100kb' });
+app.use((req, res, next) => {
+  if (req.path.startsWith('/api/analytics/callback/')) return next();
+  return jsonParser(req, res, next);
+});
 // Request/Response logging (filters sensitive fields)
 app.use(requestResponseLogger);
 

server/routes/admin.js

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { getDb } from '../config/database.js';
 import { authenticateToken, requireAdmin, getBaseUrl } from '../middleware/auth.js';
 import { isMailerConfigured, sendInviteEmail } from '../config/mailer.js';
+import { getAppName } from '../config/appName.js';
 import { log } from '../config/logger.js';
 import {
   getOAuthConfig,
@@ -217,9 +218,8 @@ router.post('/invites', authenticateToken, requireAdmin, async (req, res) => {
     const baseUrl = getBaseUrl(req);
     const inviteUrl = `${baseUrl}/register?invite=${token}`;
 
-    // Load app name
+    // Load configured app name (admin setting → env → default)
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'app_name'");
+    const appName = await getAppName();
-    const appName = brandingSetting?.value || 'Redlight';
 
     if (isMailerConfigured()) {
       try {

server/routes/analytics.js

@@ -1,4 +1,4 @@
-import { Router } from 'express';
+import { Router, json } from 'express';
 import crypto from 'crypto';
 import ExcelJS from 'exceljs';
 import PDFDocument from 'pdfkit';
@@ -10,7 +10,9 @@ import { getAnalyticsToken } from '../config/bbb.js';
 const router = Router();
 
 // POST /api/analytics/callback/:uid?token=... - BBB Learning Analytics callback (token-secured)
-router.post('/callback/:uid', async (req, res) => {
+// Excluded from the global 100kb body limit (see index.js): learning analytics
+// payloads for large meetings can be several MB.
+router.post('/callback/:uid', json({ limit: '5mb' }), async (req, res) => {
   try {
     const { token } = req.query;
     const expectedToken = getAnalyticsToken(req.params.uid);

server/routes/auth.js

@@ -13,6 +13,7 @@ import redis from '../config/redis.js';
 import { authenticateToken, generateToken, getBaseUrl } from '../middleware/auth.js';
 import { isMailerConfigured, sendVerificationEmail } from '../config/mailer.js';
 import { getOAuthConfig, discoverOIDC } from '../config/oauth.js';
+import { getAppName } from '../config/appName.js';
 import { log } from '../config/logger.js';
 
 if (!process.env.JWT_SECRET) {
@@ -179,7 +180,8 @@ router.post('/register', registerLimiter, async (req, res) => {
       return res.status(400).json({ error: `Password must not exceed ${MAX_PASSWORD_LENGTH} characters` });
     }
 
-    const existing = await db.get('SELECT id FROM users WHERE email = ?', [email]);
+    // Emails are stored lowercased, so compare lowercased to catch case-variant duplicates
+    const existing = await db.get('SELECT id FROM users WHERE email = ?', [email.toLowerCase()]);
     if (existing) {
       return res.status(409).json({ error: 'Email is already in use' });
     }
@@ -213,12 +215,8 @@ router.post('/register', registerLimiter, async (req, res) => {
       const baseUrl = getBaseUrl(req);
       const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
 
-      // Load app name from branding settings
+      // Load configured app name (admin setting → env → default)
-      const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+      const appName = await getAppName();
-      let appName = 'Redlight';
-      if (brandingSetting?.value) {
-        try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
-      }
 
       try {
         await sendVerificationEmail(email.toLowerCase(), display_name, verifyUrl, appName, 'en');
@@ -327,11 +325,7 @@ router.post('/resend-verification', resendVerificationLimiter, async (req, res)
     const baseUrl = getBaseUrl(req);
     const verifyUrl = `${baseUrl}/verify-email?token=${verificationToken}`;
 
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+    const appName = await getAppName();
-    let appName = 'Redlight';
-    if (brandingSetting?.value) {
-      try { appName = JSON.parse(brandingSetting.value).appName || appName; } catch {}
-    }
 
     try {
       await sendVerificationEmail(email.toLowerCase(), user.display_name || user.name, verifyUrl, appName, user.language || 'en');
@@ -774,12 +768,8 @@ router.post('/2fa/setup', authenticateToken, twoFaLimiter, async (req, res) => {
 
     const secret = new OTPAuth.Secret({ size: 20 });
 
-    // Load app name from branding settings
+    // Use the configured app name as the TOTP issuer (admin setting → env → default)
-    const brandingSetting = await db.get("SELECT value FROM settings WHERE key = 'branding'");
+    const issuer = await getAppName();
-    let issuer = 'Redlight';
-    if (brandingSetting?.value) {
-      try { issuer = JSON.parse(brandingSetting.value).appName || issuer; } catch {}
-    }
 
     const totp = new OTPAuth.TOTP({
       issuer,

server/routes/calendar.js

@@ -4,6 +4,7 @@ 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 { getAppName } from '../config/appName.js';
 import {
   isFederationEnabled,
   getFederationDomain,
@@ -219,7 +220,7 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
         end_time = COALESCE(?, end_time),
         room_uid = ?,
         color = COALESCE(?, color),
-        reminder_minutes = COALESCE(?, reminder_minutes),
+        reminder_minutes = ?,
         reminder_sent_at = ${resetReminder ? 'NULL' : 'reminder_sent_at'},
         updated_at = CURRENT_TIMESTAMP
       WHERE id = ?
@@ -230,7 +231,9 @@ router.put('/events/:id', authenticateToken, async (req, res) => {
       end_time || null,
       room_uid !== undefined ? (room_uid || null) : event.room_uid,
       color || null,
-      validReminder !== undefined ? validReminder : null,
+      // Not in payload → keep existing; present (incl. null) → set/clear directly.
+      // COALESCE can't be used here: it would treat an explicit null as "keep".
+      validReminder !== undefined ? validReminder : event.reminder_minutes,
       req.params.id,
     ]);
 
@@ -323,7 +326,7 @@ router.post('/events/:id/share', authenticateToken, async (req, res) => {
     if (targetUser?.email) {
       const appUrl = getBaseUrl(req);
       const inboxUrl = `${appUrl}/federation/inbox`;
-      const appName = process.env.APP_NAME || 'Redlight';
+      const appName = await getAppName();
       const senderUser = await db.get('SELECT name, display_name FROM users WHERE id = ?', [req.user.id]);
       const fromDisplay = (senderUser?.display_name && senderUser.display_name !== '') ? senderUser.display_name : (senderUser?.name || req.user.name);
       sendCalendarInviteEmail(
@@ -645,7 +648,7 @@ router.post(['/receive-event', '/calendar-event'], calendarFederationLimiter, as
     if (targetUser.email) {
       const appUrl = getBaseUrl(req);
       const inboxUrl = `${appUrl}/federation/inbox`;
-      const appName = process.env.APP_NAME || 'Redlight';
+      const appName = await getAppName();
       sendCalendarInviteEmail(
         targetUser.email, targetUser.name, from_user,
         title, start_time, end_time, description || null,

server/routes/federation.js

@@ -6,6 +6,7 @@ import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { sendFederationInviteEmail, sendCalendarEventDeletedEmail } from '../config/mailer.js';
 import { log } from '../config/logger.js';
 import { createNotification } from '../config/notifications.js';
+import { getAppName } from '../config/appName.js';
 
 // M13: rate limit the unauthenticated federation receive endpoint
 const federationReceiveLimiter = rateLimit({
@@ -40,7 +41,7 @@ export function wellKnownHandler(req, res) {
         federation_api: '/api/federation',
         public_key: getPublicKey(),
         software: 'Redlight',
-        version: '2.1.3',
+        version: '2.2.0',
     });
 }
 
@@ -198,7 +199,7 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
 
         // Look up user by name (case-insensitive)
         const targetUser = await db.get(
-            'SELECT id, name, email FROM users WHERE LOWER(name) = LOWER(?)',
+            'SELECT id, name, email, language FROM users WHERE LOWER(name) = LOWER(?)',
             [username]
         );
 
@@ -238,7 +239,7 @@ router.post('/receive', federationReceiveLimiter, async (req, res) => {
         if (targetUser.email) {
             const appUrl = getBaseUrl(req);
             const inboxUrl = `${appUrl}/federation/inbox`;
-            const appName = process.env.APP_NAME || 'Redlight';
+            const appName = await getAppName();
             sendFederationInviteEmail(
                 targetUser.email, targetUser.name, from_user,
                 room_name, message || null, inboxUrl, appName, targetUser.language || 'en'
@@ -627,7 +628,7 @@ router.post('/calendar-event-deleted', federationReceiveLimiter, async (req, res
 
         // Notify affected users by email (fire-and-forget)
         if (affectedUsers.length > 0) {
-            const appName = process.env.APP_NAME || 'Redlight';
+            const appName = await getAppName();
             for (const u of affectedUsers) {
                 sendCalendarEventDeletedEmail(u.email, u.name, u.from_user, u.title, appName, u.language || 'en')
                     .catch(mailErr => {

server/routes/rooms.js

@@ -9,6 +9,7 @@ import { authenticateToken, getBaseUrl } from '../middleware/auth.js';
 import { log } from '../config/logger.js';
 import { createNotification } from '../config/notifications.js';
 import { sendGuestInviteEmail } from '../config/mailer.js';
+import { getAppName } from '../config/appName.js';
 import {
   createMeeting,
   joinMeeting,
@@ -513,7 +514,9 @@ router.post('/:uid/start', authenticateToken, async (req, res) => {
     const analyticsCallbackURL = room.learning_analytics
       ? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
       : null;
-    await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL);
+    // Localise BBB's default welcome message in the room owner's language
+    const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
+    await createMeeting(room, baseUrl, loginURL, presentationUrl, analyticsCallbackURL, owner?.language || 'en');
     const avatarURL = getUserAvatarURL(req, req.user);
     const displayName = req.user.display_name || req.user.name;
     const joinUrl = await joinMeeting(room.uid, displayName, true, avatarURL);
@@ -662,7 +665,9 @@ router.post('/:uid/guest-join', guestJoinLimiter, async (req, res) => {
       const analyticsCallbackURL = room.learning_analytics
         ? `${baseUrl}/api/analytics/callback/${room.uid}?token=${getAnalyticsToken(room.uid)}`
         : null;
-      await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL);
+      // Localise BBB's default welcome message in the room owner's language
+      const owner = await db.get('SELECT language FROM users WHERE id = ?', [room.user_id]);
+      await createMeeting(room, baseUrl, loginURL, null, analyticsCallbackURL, owner?.language || 'en');
     }
 
     // Check moderator code
@@ -908,7 +913,7 @@ router.post('/invite-email', authenticateToken, async (req, res) => {
       ? `${baseUrl}/join/${room.uid}?ac=${encodeURIComponent(room.access_code)}`
       : `${baseUrl}/join/${room.uid}`;
 
-    const appName = process.env.APP_NAME || 'Redlight';
+    const appName = await getAppName();
     const fromUser = req.user.display_name || req.user.name;
     const lang = req.user.language || 'en';
 

src/components/FederatedRoomCard.jsx

@@ -30,8 +30,21 @@ export default function FederatedRoomCard({ room, onRemove }) {
 
   const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
 
+  const openRoom = () => navigate(`/federation/rooms/${room.id}`);
+
   return (
-    <div className={`card-hover group p-5 cursor-pointer ${isDeleted ? 'opacity-60' : ''}`} onClick={() => navigate(`/federation/rooms/${room.id}`)}>
+    <div
+      role="link"
+      tabIndex={0}
+      aria-label={room.room_name}
+      onClick={openRoom}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
+      }}
+      className={`card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2 ${isDeleted ? 'opacity-60' : ''}`}
+      style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
+    >
       <div className="flex items-start justify-between mb-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
@@ -107,6 +120,7 @@ export default function FederatedRoomCard({ room, onRemove }) {
         <button
           onClick={handleRemove}
           className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
+          aria-label={t('federation.removeRoom')}
           title={t('federation.removeRoom')}
         >
           <Trash2 size={14} />

src/components/Modal.jsx

@@ -1,15 +1,56 @@
+import { useEffect, useId, useRef } from 'react';
 import { X } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';
 
 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?.();
+    };
+  }, []);
+
   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} />
+      <div
-      <div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth}`}>
+        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={titleId}
+        tabIndex={-1}
+        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
-          <h2 className="text-lg font-semibold text-th-text">{title}</h2>
+          <h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
           <button
+            type="button"
             onClick={onClose}
+            aria-label={t('common.close')}
             className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
           >
             <X size={20} />

src/components/Navbar.jsx

@@ -44,6 +44,7 @@ export default function Navbar({ onMenuClick }) {
         <div className="flex items-center gap-3">
           <button
             onClick={onMenuClick}
+            aria-label={t('nav.navigation')}
             className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
           >
             <Menu size={20} />
@@ -59,6 +60,9 @@ export default function Navbar({ onMenuClick }) {
           <div className="relative" ref={dropdownRef}>
             <button
               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"
             >
               <div
@@ -68,7 +72,7 @@ export default function Navbar({ onMenuClick }) {
                 {user?.avatar_image ? (
                   <img
                     src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                    alt="Avatar"
+                    alt=""
                     className="w-full h-full object-cover"
                   />
                 ) : (

src/components/NotificationBell.jsx

@@ -83,6 +83,11 @@ export default function NotificationBell() {
       <button
         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')}
       >
         <Bell size={20} />
@@ -174,6 +179,7 @@ export default function NotificationBell() {
                       <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"
+                        aria-label={t('notifications.delete')}
                         title={t('notifications.delete')}
                       >
                         <X size={13} />

src/components/RoomCard.jsx

@@ -43,8 +43,21 @@ export default function RoomCard({ room, onDelete }) {
     return () => clearInterval(interval);
   }, [room.uid]);
 
+  const openRoom = () => navigate(`/rooms/${room.uid}`);
+
   return (
-    <div className="card-hover group p-5 cursor-pointer" onClick={() => navigate(`/rooms/${room.uid}`)}>
+    <div
+      role="link"
+      tabIndex={0}
+      aria-label={room.name}
+      onClick={openRoom}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRoom(); }
+      }}
+      className="card-hover group p-5 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2"
+      style={{ '--tw-ring-offset-color': 'var(--bg-primary)' }}
+    >
       <div className="flex items-start justify-between mb-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
@@ -121,6 +134,9 @@ export default function RoomCard({ room, onDelete }) {
           <button
             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')}
           >
             <Copy size={14} />
@@ -148,6 +164,7 @@ export default function RoomCard({ room, onDelete }) {
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(room); }}
             className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
+            aria-label={t('common.delete')}
             title={t('common.delete')}
           >
             <Trash2 size={14} />

src/components/Sidebar.jsx

@@ -60,6 +60,7 @@ export default function Sidebar({ open, onClose }) {
             <BrandLogo size="md" className="flex-1 min-w-0" />
             <button
               onClick={onClose}
+              aria-label={t('common.close')}
               className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
             >
               <X size={18} />
@@ -112,7 +113,7 @@ export default function Sidebar({ open, onClose }) {
                 {user?.avatar_image ? (
                   <img
                     src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                    alt="Avatar"
+                    alt=""
                     className="w-full h-full object-cover"
                   />
                 ) : (

src/components/ThemeSelector.jsx

@@ -10,17 +10,23 @@ export default function ThemeSelector({ 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} />
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} aria-hidden="true" />
 
-      <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+      <div
+        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"
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
           <div>
-            <h2 className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
+            <h2 id="theme-selector-title" className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
             <p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
           </div>
           <button
             onClick={onClose}
+            aria-label={t('common.close')}
             className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
           >
             <X size={20} />

src/i18n/de.json

@@ -23,7 +23,9 @@
     "protected": "Geschützt",
     "live": "Live",
     "error": "Fehler",
-    "success": "Erfolg"
+    "success": "Erfolg",
+    "gridView": "Rasteransicht",
+    "listView": "Listenansicht"
   },
   "nav": {
     "dashboard": "Dashboard",

src/i18n/en.json

@@ -23,7 +23,9 @@
     "protected": "Protected",
     "live": "Live",
     "error": "Error",
-    "success": "Success"
+    "success": "Success",
+    "gridView": "Grid view",
+    "listView": "List view"
   },
   "nav": {
     "dashboard": "Dashboard",

src/index.css

@@ -45,6 +45,12 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  /* Restore Tailwind v3 default: buttons get a pointer cursor */
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]) {
+    cursor: pointer;
+  }
 }
 
 @utility btn-primary {
@@ -52,7 +58,7 @@
     bg-th-accent text-th-accent-t hover:bg-th-accent-h
     transition-all duration-200 ease-out
     focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
   --tw-ring-offset-color: var(--bg-primary);
 }
 
@@ -61,7 +67,7 @@
     bg-th-bg-s text-th-text border border-th-border
     hover:bg-th-hover transition-all duration-200 ease-out
     focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
   --tw-ring-offset-color: var(--bg-primary);
 }
 
@@ -70,7 +76,7 @@
     bg-th-error text-white hover:opacity-90
     transition-all duration-200 ease-out
     focus:outline-hidden focus:ring-2 focus:ring-th-error focus:ring-offset-2
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
   --tw-ring-offset-color: var(--bg-primary);
 }
 
@@ -79,7 +85,7 @@
     text-th-text-s hover:bg-th-hover hover:text-th-text
     transition-all duration-200 ease-out
     focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
   --tw-ring-offset-color: var(--bg-primary);
 }
 

src/pages/Admin.jsx

@@ -423,17 +423,18 @@ export default function Admin() {
         <div className="grid gap-6 sm:grid-cols-2">
           {/* Logo upload */}
           <div>
-            <label className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</label>
+            <p className="block text-sm font-medium text-th-text mb-2">{t('admin.logoLabel')}</p>
             <div className="flex items-center gap-4">
               {hasLogo && logoUrl ? (
                 <div className="relative group">
                   <img
                     src={`${logoUrl}?t=${Date.now()}`}
-                    alt="Logo"
+                    alt=""
                     className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
                   />
                   <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"
                   >
                     <XIcon size={12} />
@@ -471,11 +472,12 @@ export default function Admin() {
 
           {/* App name */}
           <div>
-            <label className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
+            <label htmlFor="admin-app-name" className="block text-sm font-medium text-th-text mb-2">{t('admin.appNameLabel')}</label>
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
-                <Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Type size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="admin-app-name"
                   type="text"
                   value={editAppName}
                   onChange={e => setEditAppName(e.target.value)}
@@ -520,12 +522,13 @@ export default function Admin() {
         {/* Default theme */}
         <div className="mt-6 pt-6 border-t border-th-border">
           <div className="flex items-center gap-2 mb-1">
-            <Palette size={16} className="text-th-accent" />
+            <Palette size={16} className="text-th-accent" aria-hidden="true" />
-            <label className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
+            <label htmlFor="admin-default-theme" className="block text-sm font-medium text-th-text">{t('admin.defaultThemeLabel')}</label>
           </div>
           <p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p>
           <div className="flex items-center gap-2">
             <select
+              id="admin-default-theme"
               value={editDefaultTheme}
               onChange={e => setEditDefaultTheme(e.target.value)}
               className="input-field text-sm flex-1"
@@ -549,16 +552,17 @@ export default function Admin() {
         {/* Legal links */}
         <div className="mt-6 pt-6 border-t border-th-border">
           <div className="flex items-center gap-2 mb-1">
-            <LinkIcon size={16} className="text-th-accent" />
+            <LinkIcon size={16} className="text-th-accent" aria-hidden="true" />
-            <label className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</label>
+            <p className="block text-sm font-medium text-th-text">{t('admin.legalLinksTitle')}</p>
           </div>
           <p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p>
           <div className="grid gap-4 sm:grid-cols-2">
             {/* Imprint */}
             <div>
-              <label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
+              <label htmlFor="admin-imprint-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.imprintUrl')}</label>
               <div className="flex items-center gap-2">
                 <input
+                  id="admin-imprint-url"
                   type="url"
                   value={editImprintUrl}
                   onChange={e => setEditImprintUrl(e.target.value)}
@@ -577,9 +581,10 @@ export default function Admin() {
             </div>
             {/* Privacy Policy */}
             <div>
-              <label className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
+              <label htmlFor="admin-privacy-url" className="block text-xs font-medium text-th-text-s mb-1">{t('admin.privacyUrl')}</label>
               <div className="flex items-center gap-2">
                 <input
+                  id="admin-privacy-url"
                   type="url"
                   value={editPrivacyUrl}
                   onChange={e => setEditPrivacyUrl(e.target.value)}
@@ -647,13 +652,14 @@ export default function Admin() {
         {/* Send invite form */}
         <form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6">
           <div className="relative flex-1">
-            <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
+            <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
             <input
               type="email"
               value={inviteEmail}
               onChange={e => setInviteEmail(e.target.value)}
               className="input-field pl-9 text-sm"
               placeholder={t('auth.emailPlaceholder')}
+              aria-label={t('auth.email')}
               required
             />
           </div>
@@ -738,8 +744,9 @@ export default function Admin() {
           <form onSubmit={handleOauthSave} className="space-y-4">
             <div className="grid gap-4 sm:grid-cols-2">
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
+                <label htmlFor="admin-oauth-issuer" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
                 <input
+                  id="admin-oauth-issuer"
                   type="url"
                   value={oauthForm.issuer}
                   onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))}
@@ -750,8 +757,9 @@ export default function Admin() {
                 <p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
+                <label htmlFor="admin-oauth-client-id" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
                 <input
+                  id="admin-oauth-client-id"
                   type="text"
                   value={oauthForm.clientId}
                   onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))}
@@ -764,9 +772,11 @@ export default function Admin() {
 
             <div className="grid gap-4 sm:grid-cols-2">
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
+                <label htmlFor="admin-oauth-client-secret" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
                 <input
+                  id="admin-oauth-client-secret"
                   type="password"
+                  autoComplete="new-password"
                   value={oauthForm.clientSecret}
                   onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
                   className="input-field text-sm"
@@ -777,8 +787,9 @@ export default function Admin() {
                 )}
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
+                <label htmlFor="admin-oauth-display-name" className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
                 <input
+                  id="admin-oauth-display-name"
                   type="text"
                   value={oauthForm.displayName}
                   onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
@@ -941,13 +952,14 @@ export default function Admin() {
       {/* Search */}
       <div className="card p-4 mb-6">
         <div className="relative">
-          <Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+          <Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
           <input
-            type="text"
+            type="search"
             value={search}
             onChange={e => setSearch(e.target.value)}
             className="input-field pl-11"
             placeholder={t('admin.searchUsers')}
+            aria-label={t('admin.searchUsers')}
           />
         </div>
       </div>
@@ -1099,14 +1111,16 @@ export default function Admin() {
       {/* Reset password modal */}
       {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)} />
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setResetPwModal(null)} aria-hidden="true" />
-          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-sm p-6">
+          <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">
-            <h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.resetPasswordTitle')}</h3>
+            <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">
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
+                <label htmlFor="admin-reset-pw" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.newPasswordLabel')}</label>
                 <input
+                  id="admin-reset-pw"
                   type="password"
+                  autoComplete="new-password"
                   value={newPassword}
                   onChange={e => setNewPassword(e.target.value)}
                   className="input-field"
@@ -1131,16 +1145,18 @@ export default function Admin() {
       {/* Create user modal */}
       {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)} />
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={() => setShowCreateUser(false)} aria-hidden="true" />
-          <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-md p-6">
+          <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">
-            <h3 className="text-lg font-semibold text-th-text mb-4">{t('admin.createUserTitle')}</h3>
+            <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>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+                <label htmlFor="admin-new-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
                 <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="admin-new-username"
                     type="text"
+                    autoComplete="off"
                     value={newUser.name}
                     onChange={e => setNewUser({ ...newUser, name: e.target.value })}
                     className="input-field pl-11"
@@ -1151,11 +1167,13 @@ export default function Admin() {
                 <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+                <label htmlFor="admin-new-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
                 <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="admin-new-display-name"
                     type="text"
+                    autoComplete="off"
                     value={newUser.display_name}
                     onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
                     className="input-field pl-11"
@@ -1164,11 +1182,13 @@ export default function Admin() {
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                <label htmlFor="admin-new-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                 <div className="relative">
-                  <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="admin-new-email"
                     type="email"
+                    autoComplete="off"
                     value={newUser.email}
                     onChange={e => setNewUser({ ...newUser, email: e.target.value })}
                     className="input-field pl-11"
@@ -1178,11 +1198,13 @@ export default function Admin() {
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+                <label htmlFor="admin-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
                 <div className="relative">
-                  <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="admin-new-password"
                     type="password"
+                    autoComplete="new-password"
                     value={newUser.password}
                     onChange={e => setNewUser({ ...newUser, password: e.target.value })}
                     className="input-field pl-11"
@@ -1193,8 +1215,9 @@ export default function Admin() {
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
+                <label htmlFor="admin-new-role" className="block text-sm font-medium text-th-text mb-1.5">{t('admin.role')}</label>
                 <select
+                  id="admin-new-role"
                   value={newUser.role}
                   onChange={e => setNewUser({ ...newUser, role: e.target.value })}
                   className="input-field"
@@ -1227,19 +1250,20 @@ export default function Admin() {
                 <h3 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)} className="p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors">
+              <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">
                 <XIcon size={18} />
               </button>
             </div>
             <div className="p-4 border-b border-th-border">
               <div className="relative">
-                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
-                  type="text"
+                  type="search"
                   value={allRoomsSearch}
                   onChange={e => setAllRoomsSearch(e.target.value)}
                   className="input-field pl-9 text-sm"
                   placeholder={t('admin.searchRooms')}
+                  aria-label={t('admin.searchRooms')}
                   autoFocus
                 />
               </div>

src/pages/Calendar.jsx

@@ -515,8 +515,9 @@ export default function Calendar() {
         <Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}>
           <form onSubmit={handleSave} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
+              <label htmlFor="calendar-event-title" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.eventTitle')} *</label>
               <input
+                id="calendar-event-title"
                 type="text"
                 value={form.title}
                 onChange={e => setForm({ ...form, title: e.target.value })}
@@ -527,8 +528,9 @@ export default function Calendar() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
+              <label htmlFor="calendar-event-description" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.description')}</label>
               <textarea
+                id="calendar-event-description"
                 value={form.description}
                 onChange={e => setForm({ ...form, description: e.target.value })}
                 className="input-field resize-none"
@@ -560,8 +562,9 @@ export default function Calendar() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
+              <label htmlFor="calendar-event-room" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
               <select
+                id="calendar-event-room"
                 value={form.room_uid}
                 onChange={e => setForm({ ...form, room_uid: e.target.value })}
                 className="input-field"
@@ -575,10 +578,11 @@ export default function Calendar() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
+              <label htmlFor="calendar-event-reminder" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.reminderLabel')}</label>
               <div className="relative">
-                <Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" />
+                <Bell size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" aria-hidden="true" />
                 <select
+                  id="calendar-event-reminder"
                   value={form.reminder_minutes ?? ''}
                   onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })}
                   className="input-field pl-9"
@@ -595,13 +599,16 @@ export default function Calendar() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</label>
+              <p id="calendar-event-color-label" className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.color')}</p>
-              <div className="flex gap-2">
+              <div role="radiogroup" aria-labelledby="calendar-event-color-label" className="flex gap-2">
                 {COLORS.map(c => (
                   <button
                     key={c}
                     type="button"
                     onClick={() => setForm({ ...form, color: c })}
+                    role="radio"
+                    aria-checked={form.color === c}
+                    aria-label={c}
                     className={`w-7 h-7 rounded-full border-2 transition-all ${form.color === c ? 'border-th-text scale-110' : 'border-transparent'}`}
                     style={{ backgroundColor: c }}
                   />
@@ -826,8 +833,9 @@ export default function Calendar() {
           <p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
           <form onSubmit={handleFedSend} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+              <label htmlFor="calendar-fed-share-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
               <input
+                id="calendar-fed-share-address"
                 type="text"
                 value={fedAddress}
                 onChange={e => setFedAddress(e.target.value)}

src/pages/Dashboard.jsx

@@ -103,9 +103,11 @@ export default function Dashboard() {
         </div>
         <div className="flex items-center gap-2">
           {/* View toggle */}
-          <div className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
+          <div role="group" aria-label={t('common.gridView') + ' / ' + t('common.listView')} className="hidden sm:flex items-center bg-th-bg-s rounded-lg border border-th-border p-0.5">
             <button
               onClick={() => setViewMode('grid')}
+              aria-label={t('common.gridView')}
+              aria-pressed={viewMode === 'grid'}
               className={`p-1.5 rounded-md transition-colors ${
                 viewMode === 'grid' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
               }`}
@@ -114,6 +116,8 @@ export default function Dashboard() {
             </button>
             <button
               onClick={() => setViewMode('list')}
+              aria-label={t('common.listView')}
+              aria-pressed={viewMode === 'list'}
               className={`p-1.5 rounded-md transition-colors ${
                 viewMode === 'list' ? 'bg-th-accent text-th-accent-t' : 'text-th-text-s hover:text-th-text'
               }`}
@@ -197,8 +201,9 @@ export default function Dashboard() {
         <Modal title={t('dashboard.createRoom')} onClose={() => setShowCreate(false)}>
           <form onSubmit={handleCreate} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
+              <label htmlFor="create-room-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')} *</label>
               <input
+                id="create-room-name"
                 type="text"
                 value={newRoom.name}
                 onChange={e => setNewRoom({ ...newRoom, name: e.target.value })}
@@ -210,8 +215,9 @@ export default function Dashboard() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
+              <label htmlFor="create-room-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.welcomeMessage')}</label>
               <textarea
+                id="create-room-welcome"
                 value={newRoom.welcome_message}
                 onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })}
                 className="input-field resize-none"
@@ -222,8 +228,9 @@ export default function Dashboard() {
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
+                <label htmlFor="create-room-max" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.maxParticipants')}</label>
                 <input
+                  id="create-room-max"
                   type="number"
                   value={newRoom.max_participants}
                   onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -233,8 +240,9 @@ export default function Dashboard() {
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
+                <label htmlFor="create-room-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.accessCode')}</label>
                 <input
+                  id="create-room-access-code"
                   type="text"
                   value={newRoom.access_code}
                   onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })}

src/pages/GuestJoin.jsx

@@ -230,11 +230,13 @@ export default function GuestJoin() {
           ) : (
             <form onSubmit={handleJoin} className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
+                <label htmlFor="guest-name" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
                 <div className="relative">
-                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="guest-name"
                     type="text"
+                    autoComplete="name"
                     value={name}
                     onChange={e => !isLoggedIn && setName(e.target.value)}
                     readOnly={isLoggedIn}
@@ -248,11 +250,13 @@ export default function GuestJoin() {
 
               {roomInfo.has_access_code && (
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
+                  <label htmlFor="guest-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
                   <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="guest-access-code"
                       type="text"
+                      autoComplete="off"
                       value={accessCode}
                       onChange={e => setAccessCode(e.target.value)}
                       className="input-field pl-11"
@@ -263,14 +267,16 @@ export default function GuestJoin() {
               )}
 
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">
+                <label htmlFor="guest-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">
                   {t('room.guestModeratorCode')}
                   <span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
                 </label>
                 <div className="relative">
-                  <Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                  <Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                   <input
+                    id="guest-moderator-code"
                     type="text"
+                    autoComplete="off"
                     value={moderatorCode}
                     onChange={e => setModeratorCode(e.target.value)}
                     className="input-field pl-11"

src/pages/Login.jsx

@@ -189,11 +189,13 @@ export default function Login() {
 
               <form onSubmit={handleSubmit} className="space-y-5">
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                  <label htmlFor="login-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                   <div className="relative">
-                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="login-email"
                       type="email"
+                      autoComplete="email"
                       value={email}
                       onChange={e => setEmail(e.target.value)}
                       className="input-field pl-11"
@@ -204,11 +206,13 @@ export default function Login() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+                  <label htmlFor="login-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
                   <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="login-password"
                       type="password"
+                      autoComplete="current-password"
                       value={password}
                       onChange={e => setPassword(e.target.value)}
                       className="input-field pl-11"

src/pages/Register.jsx

@@ -104,11 +104,13 @@ export default function Register() {
 
           <form onSubmit={handleSubmit} className="space-y-5">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+              <label htmlFor="register-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
               <div className="relative">
-                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="register-username"
                   type="text"
+                  autoComplete="username"
                   value={username}
                   onChange={e => setUsername(e.target.value)}
                   className="input-field pl-11"
@@ -120,11 +122,13 @@ export default function Register() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+              <label htmlFor="register-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
               <div className="relative">
-                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="register-display-name"
                   type="text"
+                  autoComplete="name"
                   value={displayName}
                   onChange={e => setDisplayName(e.target.value)}
                   className="input-field pl-11"
@@ -135,11 +139,13 @@ export default function Register() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+              <label htmlFor="register-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
               <div className="relative">
-                <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="register-email"
                   type="email"
+                  autoComplete="email"
                   value={email}
                   onChange={e => setEmail(e.target.value)}
                   className="input-field pl-11"
@@ -150,11 +156,13 @@ export default function Register() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+              <label htmlFor="register-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
               <div className="relative">
-                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="register-password"
                   type="password"
+                  autoComplete="new-password"
                   value={password}
                   onChange={e => setPassword(e.target.value)}
                   className="input-field pl-11"
@@ -166,11 +174,13 @@ export default function Register() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
+              <label htmlFor="register-confirm-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
               <div className="relative">
-                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                 <input
+                  id="register-confirm-password"
                   type="password"
+                  autoComplete="new-password"
                   value={confirmPassword}
                   onChange={e => setConfirmPassword(e.target.value)}
                   className="input-field pl-11"

src/pages/RoomDetail.jsx

@@ -580,8 +580,9 @@ export default function RoomDetail() {
       {activeTab === 'settings' && isOwner && editRoom && (
         <form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
           <div>
-            <label className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
+            <label htmlFor="room-settings-name" className="block text-sm font-medium text-th-text mb-1.5">{t('dashboard.roomName')}</label>
             <input
+              id="room-settings-name"
               type="text"
               value={editRoom.name}
               onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
@@ -592,8 +593,9 @@ export default function RoomDetail() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
+            <label htmlFor="room-settings-welcome" className="block text-sm font-medium text-th-text mb-1.5">{t('room.welcomeMsg')}</label>
             <textarea
+              id="room-settings-welcome"
               value={editRoom.welcome_message || ''}
               onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
               className="input-field resize-none"
@@ -603,8 +605,9 @@ export default function RoomDetail() {
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
+              <label htmlFor="room-settings-max" className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
               <input
+                id="room-settings-max"
                 type="number"
                 value={editRoom.max_participants}
                 onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -613,8 +616,9 @@ export default function RoomDetail() {
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
+              <label htmlFor="room-settings-access-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
               <input
+                id="room-settings-access-code"
                 type="text"
                 value={editRoom.access_code || ''}
                 onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
@@ -681,8 +685,9 @@ export default function RoomDetail() {
             </label>
             {!!editRoom.learning_analytics && (
               <div className="ml-7">
-                <label className="block text-xs font-medium text-th-text-s mb-1">{t('room.analyticsVisibility')}</label>
+                <label htmlFor="room-settings-analytics-visibility" className="block text-xs font-medium text-th-text-s mb-1">{t('room.analyticsVisibility')}</label>
                 <select
+                  id="room-settings-analytics-visibility"
                   value={editRoom.analytics_visibility || 'owner'}
                   onChange={e => setEditRoom({ ...editRoom, analytics_visibility: e.target.value })}
                   className="input-field text-sm py-1.5 max-w-xs"
@@ -700,8 +705,9 @@ export default function RoomDetail() {
             <h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
+              <label htmlFor="room-settings-moderator-code" className="block text-sm font-medium text-th-text mb-1.5">{t('room.moderatorCode')}</label>
               <input
+                id="room-settings-moderator-code"
                 type="text"
                 value={editRoom.moderator_code || ''}
                 onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })}
@@ -883,8 +889,9 @@ export default function RoomDetail() {
           <p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
           <form onSubmit={handleFedInvite} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+              <label htmlFor="fed-invite-address" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
               <input
+                id="fed-invite-address"
                 type="text"
                 value={fedAddress}
                 onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }}
@@ -902,8 +909,9 @@ export default function RoomDetail() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
+              <label htmlFor="fed-invite-emails" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.emailLabel')}</label>
               <input
+                id="fed-invite-emails"
                 type="text"
                 value={fedEmails}
                 onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }}
@@ -915,8 +923,9 @@ export default function RoomDetail() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
+              <label htmlFor="fed-invite-message" className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
               <textarea
+                id="fed-invite-message"
                 value={fedMessage}
                 onChange={e => setFedMessage(e.target.value)}
                 className="input-field resize-none"

src/pages/Settings.jsx

@@ -301,7 +301,7 @@ export default function Settings() {
                     {user?.avatar_image ? (
                       <img
                         src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
-                        alt="Avatar"
+                        alt=""
                         className="w-16 h-16 rounded-full object-cover"
                       />
                     ) : (
@@ -316,6 +316,7 @@ export default function Settings() {
                       type="button"
                       onClick={() => fileInputRef.current?.click()}
                       disabled={uploadingAvatar}
+                      aria-label={t('settings.uploadImage')}
                       className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                     >
                       {uploadingAvatar ? (
@@ -360,12 +361,15 @@ export default function Settings() {
 
               {/* Avatar Color (fallback) */}
               <div className="mb-6">
-                <label className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</label>
+                <p id="avatar-color-label" className="block text-sm font-medium text-th-text mb-3">{t('settings.avatarColor')}</p>
-                <div className="flex flex-wrap gap-2">
+                <div role="radiogroup" aria-labelledby="avatar-color-label" className="flex flex-wrap gap-2">
                   {avatarColors.map(color => (
                     <button
                       key={color}
                       onClick={() => handleAvatarColor(color)}
+                      role="radio"
+                      aria-checked={user?.avatar_color === color}
+                      aria-label={color}
                       className={`w-7 h-7 rounded-full ring-2 ring-offset-2 transition-all ${
                         user?.avatar_color === color ? 'ring-th-accent' : 'ring-transparent hover:ring-th-border'
                       }`}
@@ -378,11 +382,13 @@ export default function Settings() {
 
               <form onSubmit={handleProfileSave} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
+                  <label htmlFor="settings-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
                   <div className="relative">
-                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-username"
                       type="text"
+                      autoComplete="username"
                       value={profile.name}
                       onChange={e => setProfile({ ...profile, name: e.target.value })}
                       className="input-field pl-11"
@@ -392,11 +398,13 @@ export default function Settings() {
                   <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
+                  <label htmlFor="settings-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
                   <div className="relative">
-                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-display-name"
                       type="text"
+                      autoComplete="name"
                       value={profile.display_name}
                       onChange={e => setProfile({ ...profile, display_name: e.target.value })}
                       className="input-field pl-11"
@@ -404,11 +412,13 @@ export default function Settings() {
                   </div>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+                  <label htmlFor="settings-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
                   <div className="relative">
-                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-email"
                       type="email"
+                      autoComplete="email"
                       value={profile.email}
                       onChange={e => setProfile({ ...profile, email: e.target.value })}
                       className="input-field pl-11"
@@ -430,11 +440,13 @@ export default function Settings() {
               <h2 className="text-lg font-semibold text-th-text mb-6">{t('settings.changePassword')}</h2>
               <form onSubmit={handlePasswordSave} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
+                  <label htmlFor="settings-current-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
                   <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-current-password"
                       type="password"
+                      autoComplete="current-password"
                       value={passwords.currentPassword}
                       onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })}
                       className="input-field pl-11"
@@ -443,11 +455,13 @@ export default function Settings() {
                   </div>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
+                  <label htmlFor="settings-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.newPassword')}</label>
                   <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-new-password"
                       type="password"
+                      autoComplete="new-password"
                       value={passwords.newPassword}
                       onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })}
                       className="input-field pl-11"
@@ -458,11 +472,13 @@ export default function Settings() {
                   </div>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
+                  <label htmlFor="settings-confirm-new-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.confirmNewPassword')}</label>
                   <div className="relative">
-                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                    <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                     <input
+                      id="settings-confirm-new-password"
                       type="password"
+                      autoComplete="new-password"
                       value={passwords.confirmPassword}
                       onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })}
                       className="input-field pl-11"
@@ -514,11 +530,13 @@ export default function Settings() {
                       <form onSubmit={handleDisable2FA} className="space-y-4 p-4 rounded-xl bg-th-bg-t border border-th-border">
                         <p className="text-sm text-th-text-s">{t('settings.security.disableConfirm')}</p>
                         <div>
-                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
+                          <label htmlFor="twofa-disable-password" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
                           <div className="relative">
-                            <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                            <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
                             <input
+                              id="twofa-disable-password"
                               type="password"
+                              autoComplete="current-password"
                               value={twoFaDisablePassword}
                               onChange={e => setTwoFaDisablePassword(e.target.value)}
                               className="input-field pl-11"
@@ -527,8 +545,9 @@ export default function Settings() {
                           </div>
                         </div>
                         <div>
-                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
+                          <label htmlFor="twofa-disable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
                           <input
+                            id="twofa-disable-code"
                             type="text"
                             inputMode="numeric"
                             autoComplete="one-time-code"
@@ -570,6 +589,7 @@ export default function Settings() {
                         <button
                           onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }}
                           className="btn-ghost py-1.5 px-2 shrink-0"
+                          aria-label={t('room.copyLink')}
                         >
                           <Copy size={14} />
                         </button>
@@ -577,8 +597,9 @@ export default function Settings() {
                     </div>
                     <form onSubmit={handleEnable2FA} className="space-y-3">
                       <div>
-                        <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
+                        <label htmlFor="twofa-enable-code" className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
                         <input
+                          id="twofa-enable-code"
                           type="text"
                           inputMode="numeric"
                           autoComplete="one-time-code"