Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Enhance accessibility and improve form semantics across multiple pages
Build & Push Docker Image / build (push) Successful in 4m4s
Details

Browse Source 
- Added `htmlFor` attributes to labels for better accessibility in Calendar, Dashboard, GuestJoin, Login, Register, RoomDetail, and Settings pages.
- Included `aria-hidden` attributes for icons to improve screen reader experience.
- Set `autoComplete` attributes for input fields to enhance user experience during form filling.
- Implemented `role` and `aria` attributes for radio groups and buttons to improve accessibility compliance.
This commit is contained in:
Michelle
2026-05-28 10:07:19 +02:00
parent cff5398ebd
commit 7f48685717
18 changed files with 288 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+3 -24
View File
@@ -798,18 +798,6 @@
"tslib": "^2.4.0" "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": { "node_modules/@types/react": {
"version": "19.2.14", "version": "19.2.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -4647,9 +4635,9 @@
} }
}, },
"node_modules/tmp": { "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", "license": "MIT",
"engines": { "engines": {
"node": ">=14.14" "node": ">=14.14"
@@ -4719,15 +4707,6 @@
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==", "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
"license": "MIT" "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": { "node_modules/unicode-properties": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz", "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
src/components/FederatedRoomCard.jsx
+15 -1
View File
@@ -30,8 +30,21 @@ export default function FederatedRoomCard({ room, onRemove }) {
const recordingOn = room.allow_recording === 1 || room.allow_recording === true; const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
const openRoom = () => navigate(`/federation/rooms/${room.id}`);
return ( 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 items-start justify-between mb-3">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -107,6 +120,7 @@ export default function FederatedRoomCard({ room, onRemove }) {
<button <button
onClick={handleRemove} onClick={handleRemove}
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error" 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')} title={t('federation.removeRoom')}
> >
<Trash2 size={14} /> <Trash2 size={14} />
src/components/Modal.jsx
+37 -3
View File
@@ -1,15 +1,49 @@
import { useEffect, useId, useRef } from 'react';
import { X } from 'lucide-react'; import { X } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';
export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) { 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);
useEffect(() => {
previouslyFocused.current = document.activeElement;
const handleKey = (e) => {
if (e.key === 'Escape') onClose?.();
};
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?.();
};
}, [onClose]);
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <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 */} {/* 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">
<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 <button
type="button"
onClick={onClose} onClick={onClose}
aria-label={t('common.close')}
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors" className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
> >
<X size={20} /> <X size={20} />
src/components/Navbar.jsx
+5 -1
View File
@@ -44,6 +44,7 @@ export default function Navbar({ onMenuClick }) {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={onMenuClick} onClick={onMenuClick}
aria-label={t('nav.navigation')}
className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors" className="lg:hidden p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
> >
<Menu size={20} /> <Menu size={20} />
@@ -59,6 +60,9 @@ export default function Navbar({ onMenuClick }) {
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<button <button
onClick={() => setDropdownOpen(!dropdownOpen)} 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" className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-th-hover transition-colors"
> >
<div <div
@@ -68,7 +72,7 @@ export default function Navbar({ onMenuClick }) {
{user?.avatar_image ? ( {user?.avatar_image ? (
<img <img
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`} src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
alt="Avatar" alt=""
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
src/components/NotificationBell.jsx
+6
View File
@@ -83,6 +83,11 @@ export default function NotificationBell() {
<button <button
onClick={() => setOpen(prev => !prev)} onClick={() => setOpen(prev => !prev)}
className="relative p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors" 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')} title={t('notifications.bell')}
> >
<Bell size={20} /> <Bell size={20} />
@@ -174,6 +179,7 @@ export default function NotificationBell() {
<button <button
onClick={(e) => handleDelete(e, n.id)} 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 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')} title={t('notifications.delete')}
> >
<X size={13} /> <X size={13} />
src/components/RoomCard.jsx
+18 -1
View File
@@ -43,8 +43,21 @@ export default function RoomCard({ room, onDelete }) {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [room.uid]); }, [room.uid]);
const openRoom = () => navigate(`/rooms/${room.uid}`);
return ( 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 items-start justify-between mb-3">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -121,6 +134,9 @@ export default function RoomCard({ room, onDelete }) {
<button <button
onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }} onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
className="btn-ghost text-xs py-1.5 px-2" 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')} title={t('room.copyLink')}
> >
<Copy size={14} /> <Copy size={14} />
@@ -148,6 +164,7 @@ export default function RoomCard({ room, onDelete }) {
<button <button
onClick={(e) => { e.stopPropagation(); onDelete(room); }} onClick={(e) => { e.stopPropagation(); onDelete(room); }}
className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error" 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')} title={t('common.delete')}
> >
<Trash2 size={14} /> <Trash2 size={14} />
src/components/Sidebar.jsx
+2 -1
View File
@@ -60,6 +60,7 @@ export default function Sidebar({ open, onClose }) {
<BrandLogo size="md" className="flex-1 min-w-0" /> <BrandLogo size="md" className="flex-1 min-w-0" />
<button <button
onClick={onClose} 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" className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
> >
<X size={18} /> <X size={18} />
@@ -112,7 +113,7 @@ export default function Sidebar({ open, onClose }) {
{user?.avatar_image ? ( {user?.avatar_image ? (
<img <img
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`} src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
alt="Avatar" alt=""
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
src/components/ThemeSelector.jsx
+9 -3
View File
@@ -10,17 +10,23 @@ export default function ThemeSelector({ onClose }) {
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <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 */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-th-border"> <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
<div> <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> <p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
aria-label={t('common.close')}
className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors" className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
> >
<X size={20} /> <X size={20} />
src/i18n/de.json
+3 -1
View File
@@ -23,7 +23,9 @@
"protected": "Geschützt", "protected": "Geschützt",
"live": "Live", "live": "Live",
"error": "Fehler", "error": "Fehler",
"success": "Erfolg" "success": "Erfolg",
"gridView": "Rasteransicht",
"listView": "Listenansicht"
}, },
"nav": { "nav": {
"dashboard": "Dashboard", "dashboard": "Dashboard",
src/i18n/en.json
+3 -1
View File
@@ -23,7 +23,9 @@
"protected": "Protected", "protected": "Protected",
"live": "Live", "live": "Live",
"error": "Error", "error": "Error",
"success": "Success" "success": "Success",
"gridView": "Grid view",
"listView": "List view"
}, },
"nav": { "nav": {
"dashboard": "Dashboard", "dashboard": "Dashboard",
src/pages/Admin.jsx
+60 -36
View File
@@ -423,17 +423,18 @@ export default function Admin() {
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
{/* Logo upload */} {/* Logo upload */}
<div> <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"> <div className="flex items-center gap-4">
{hasLogo && logoUrl ? ( {hasLogo && logoUrl ? (
<div className="relative group"> <div className="relative group">
<img <img
src={`${logoUrl}?t=${Date.now()}`} 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" className="w-14 h-14 rounded-xl object-contain border border-th-border bg-th-bg p-1"
/> />
<button <button
onClick={handleLogoRemove} 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 transition-opacity"
> >
<XIcon size={12} /> <XIcon size={12} />
@@ -471,11 +472,12 @@ export default function Admin() {
{/* App name */} {/* App name */}
<div> <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="flex items-center gap-2">
<div className="relative flex-1"> <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 <input
id="admin-app-name"
type="text" type="text"
value={editAppName} value={editAppName}
onChange={e => setEditAppName(e.target.value)} onChange={e => setEditAppName(e.target.value)}
@@ -520,12 +522,13 @@ export default function Admin() {
{/* Default theme */} {/* Default theme */}
<div className="mt-6 pt-6 border-t border-th-border"> <div className="mt-6 pt-6 border-t border-th-border">
<div className="flex items-center gap-2 mb-1"> <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> </div>
<p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p> <p className="text-xs text-th-text-s mb-3">{t('admin.defaultThemeDesc')}</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<select <select
id="admin-default-theme"
value={editDefaultTheme} value={editDefaultTheme}
onChange={e => setEditDefaultTheme(e.target.value)} onChange={e => setEditDefaultTheme(e.target.value)}
className="input-field text-sm flex-1" className="input-field text-sm flex-1"
@@ -549,16 +552,17 @@ export default function Admin() {
{/* Legal links */} {/* Legal links */}
<div className="mt-6 pt-6 border-t border-th-border"> <div className="mt-6 pt-6 border-t border-th-border">
<div className="flex items-center gap-2 mb-1"> <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> </div>
<p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p> <p className="text-xs text-th-text-s mb-4">{t('admin.legalLinksDesc')}</p>
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
{/* Imprint */} {/* Imprint */}
<div> <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"> <div className="flex items-center gap-2">
<input <input
id="admin-imprint-url"
type="url" type="url"
value={editImprintUrl} value={editImprintUrl}
onChange={e => setEditImprintUrl(e.target.value)} onChange={e => setEditImprintUrl(e.target.value)}
@@ -577,9 +581,10 @@ export default function Admin() {
</div> </div>
{/* Privacy Policy */} {/* Privacy Policy */}
<div> <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"> <div className="flex items-center gap-2">
<input <input
id="admin-privacy-url"
type="url" type="url"
value={editPrivacyUrl} value={editPrivacyUrl}
onChange={e => setEditPrivacyUrl(e.target.value)} onChange={e => setEditPrivacyUrl(e.target.value)}
@@ -647,13 +652,14 @@ export default function Admin() {
{/* Send invite form */} {/* Send invite form */}
<form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6"> <form onSubmit={handleSendInvite} className="flex items-center gap-2 mb-6">
<div className="relative flex-1"> <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 <input
type="email" type="email"
value={inviteEmail} value={inviteEmail}
onChange={e => setInviteEmail(e.target.value)} onChange={e => setInviteEmail(e.target.value)}
className="input-field pl-9 text-sm" className="input-field pl-9 text-sm"
placeholder={t('auth.emailPlaceholder')} placeholder={t('auth.emailPlaceholder')}
aria-label={t('auth.email')}
required required
/> />
</div> </div>
@@ -738,8 +744,9 @@ export default function Admin() {
<form onSubmit={handleOauthSave} className="space-y-4"> <form onSubmit={handleOauthSave} className="space-y-4">
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div> <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 <input
id="admin-oauth-issuer"
type="url" type="url"
value={oauthForm.issuer} value={oauthForm.issuer}
onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))} 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> <p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
</div> </div>
<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 <input
id="admin-oauth-client-id"
type="text" type="text"
value={oauthForm.clientId} value={oauthForm.clientId}
onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))} 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 className="grid gap-4 sm:grid-cols-2">
<div> <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 <input
id="admin-oauth-client-secret"
type="password" type="password"
autoComplete="new-password"
value={oauthForm.clientSecret} value={oauthForm.clientSecret}
onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))} onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
className="input-field text-sm" className="input-field text-sm"
@@ -777,8 +787,9 @@ export default function Admin() {
)} )}
</div> </div>
<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 <input
id="admin-oauth-display-name"
type="text" type="text"
value={oauthForm.displayName} value={oauthForm.displayName}
onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))} onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
@@ -941,13 +952,14 @@ export default function Admin() {
{/* Search */} {/* Search */}
<div className="card p-4 mb-6"> <div className="card p-4 mb-6">
<div className="relative"> <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 <input
type="text" type="search"
value={search} value={search}
onChange={e => setSearch(e.target.value)} onChange={e => setSearch(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
placeholder={t('admin.searchUsers')} placeholder={t('admin.searchUsers')}
aria-label={t('admin.searchUsers')}
/> />
</div> </div>
</div> </div>
@@ -1099,14 +1111,16 @@ export default function Admin() {
{/* Reset password modal */} {/* Reset password modal */}
{resetPwModal && ( {resetPwModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <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}> <form onSubmit={handleResetPassword}>
<div className="mb-4"> <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 <input
id="admin-reset-pw"
type="password" type="password"
autoComplete="new-password"
value={newPassword} value={newPassword}
onChange={e => setNewPassword(e.target.value)} onChange={e => setNewPassword(e.target.value)}
className="input-field" className="input-field"
@@ -1131,16 +1145,18 @@ export default function Admin() {
{/* Create user modal */} {/* Create user modal */}
{showCreateUser && ( {showCreateUser && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <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"> <form onSubmit={handleCreateUser} className="space-y-4">
<div> <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"> <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 <input
id="admin-new-username"
type="text" type="text"
autoComplete="off"
value={newUser.name} value={newUser.name}
onChange={e => setNewUser({ ...newUser, name: e.target.value })} onChange={e => setNewUser({ ...newUser, name: e.target.value })}
className="input-field pl-11" 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> <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
</div> </div>
<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"> <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 <input
id="admin-new-display-name"
type="text" type="text"
autoComplete="off"
value={newUser.display_name} value={newUser.display_name}
onChange={e => setNewUser({ ...newUser, display_name: e.target.value })} onChange={e => setNewUser({ ...newUser, display_name: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -1164,11 +1182,13 @@ export default function Admin() {
</div> </div>
</div> </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"> <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 <input
id="admin-new-email"
type="email" type="email"
autoComplete="off"
value={newUser.email} value={newUser.email}
onChange={e => setNewUser({ ...newUser, email: e.target.value })} onChange={e => setNewUser({ ...newUser, email: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -1178,11 +1198,13 @@ export default function Admin() {
</div> </div>
</div> </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"> <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 <input
id="admin-new-password"
type="password" type="password"
autoComplete="new-password"
value={newUser.password} value={newUser.password}
onChange={e => setNewUser({ ...newUser, password: e.target.value })} onChange={e => setNewUser({ ...newUser, password: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -1193,8 +1215,9 @@ export default function Admin() {
</div> </div>
</div> </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 <select
id="admin-new-role"
value={newUser.role} value={newUser.role}
onChange={e => setNewUser({ ...newUser, role: e.target.value })} onChange={e => setNewUser({ ...newUser, role: e.target.value })}
className="input-field" className="input-field"
@@ -1227,19 +1250,20 @@ export default function Admin() {
<h3 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3> <h3 className="text-lg font-semibold text-th-text">{t('admin.roomsTitle')}</h3>
<span className="text-sm text-th-text-s">({adminRooms.length})</span> <span className="text-sm text-th-text-s">({adminRooms.length})</span>
</div> </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} /> <XIcon size={18} />
</button> </button>
</div> </div>
<div className="p-4 border-b border-th-border"> <div className="p-4 border-b border-th-border">
<div className="relative"> <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 <input
type="text" type="search"
value={allRoomsSearch} value={allRoomsSearch}
onChange={e => setAllRoomsSearch(e.target.value)} onChange={e => setAllRoomsSearch(e.target.value)}
className="input-field pl-9 text-sm" className="input-field pl-9 text-sm"
placeholder={t('admin.searchRooms')} placeholder={t('admin.searchRooms')}
aria-label={t('admin.searchRooms')}
autoFocus autoFocus
/> />
</div> </div>
src/pages/Calendar.jsx
+16 -8
View File
@@ -515,8 +515,9 @@ export default function Calendar() {
<Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}> <Modal title={editingEvent ? t('calendar.editEvent') : t('calendar.createEvent')} onClose={() => { setShowCreate(false); setEditingEvent(null); }}>
<form onSubmit={handleSave} className="space-y-4"> <form onSubmit={handleSave} className="space-y-4">
<div> <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 <input
id="calendar-event-title"
type="text" type="text"
value={form.title} value={form.title}
onChange={e => setForm({ ...form, title: e.target.value })} onChange={e => setForm({ ...form, title: e.target.value })}
@@ -527,8 +528,9 @@ export default function Calendar() {
</div> </div>
<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 <textarea
id="calendar-event-description"
value={form.description} value={form.description}
onChange={e => setForm({ ...form, description: e.target.value })} onChange={e => setForm({ ...form, description: e.target.value })}
className="input-field resize-none" className="input-field resize-none"
@@ -560,8 +562,9 @@ export default function Calendar() {
</div> </div>
<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 <select
id="calendar-event-room"
value={form.room_uid} value={form.room_uid}
onChange={e => setForm({ ...form, room_uid: e.target.value })} onChange={e => setForm({ ...form, room_uid: e.target.value })}
className="input-field" className="input-field"
@@ -575,10 +578,11 @@ export default function Calendar() {
</div> </div>
<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"> <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 <select
id="calendar-event-reminder"
value={form.reminder_minutes ?? ''} value={form.reminder_minutes ?? ''}
onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })} onChange={e => setForm({ ...form, reminder_minutes: e.target.value === '' ? null : Number(e.target.value) })}
className="input-field pl-9" className="input-field pl-9"
@@ -595,13 +599,16 @@ export default function Calendar() {
</div> </div>
<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 => ( {COLORS.map(c => (
<button <button
key={c} key={c}
type="button" type="button"
onClick={() => setForm({ ...form, color: c })} 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'}`} className={`w-7 h-7 rounded-full border-2 transition-all ${form.color === c ? 'border-th-text scale-110' : 'border-transparent'}`}
style={{ backgroundColor: c }} 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> <p className="text-sm text-th-text-s mb-4">{t('calendar.sendFederatedDesc')}</p>
<form onSubmit={handleFedSend} className="space-y-4"> <form onSubmit={handleFedSend} className="space-y-4">
<div> <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 <input
id="calendar-fed-share-address"
type="text" type="text"
value={fedAddress} value={fedAddress}
onChange={e => setFedAddress(e.target.value)} onChange={e => setFedAddress(e.target.value)}
src/pages/Dashboard.jsx
+13 -5
View File
@@ -103,9 +103,11 @@ export default function Dashboard() {
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* View toggle */} {/* 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 <button
onClick={() => setViewMode('grid')} onClick={() => setViewMode('grid')}
aria-label={t('common.gridView')}
aria-pressed={viewMode === 'grid'}
className={`p-1.5 rounded-md transition-colors ${ 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' 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>
<button <button
onClick={() => setViewMode('list')} onClick={() => setViewMode('list')}
aria-label={t('common.listView')}
aria-pressed={viewMode === 'list'}
className={`p-1.5 rounded-md transition-colors ${ 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' 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)}> <Modal title={t('dashboard.createRoom')} onClose={() => setShowCreate(false)}>
<form onSubmit={handleCreate} className="space-y-4"> <form onSubmit={handleCreate} className="space-y-4">
<div> <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 <input
id="create-room-name"
type="text" type="text"
value={newRoom.name} value={newRoom.name}
onChange={e => setNewRoom({ ...newRoom, name: e.target.value })} onChange={e => setNewRoom({ ...newRoom, name: e.target.value })}
@@ -210,8 +215,9 @@ export default function Dashboard() {
</div> </div>
<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 <textarea
id="create-room-welcome"
value={newRoom.welcome_message} value={newRoom.welcome_message}
onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })} onChange={e => setNewRoom({ ...newRoom, welcome_message: e.target.value })}
className="input-field resize-none" className="input-field resize-none"
@@ -222,8 +228,9 @@ export default function Dashboard() {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <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 <input
id="create-room-max"
type="number" type="number"
value={newRoom.max_participants} value={newRoom.max_participants}
onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })} onChange={e => setNewRoom({ ...newRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -233,8 +240,9 @@ export default function Dashboard() {
/> />
</div> </div>
<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 <input
id="create-room-access-code"
type="text" type="text"
value={newRoom.access_code} value={newRoom.access_code}
onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })} onChange={e => setNewRoom({ ...newRoom, access_code: e.target.value })}
src/pages/GuestJoin.jsx
+12 -6
View File
@@ -230,11 +230,13 @@ export default function GuestJoin() {
) : ( ) : (
<form onSubmit={handleJoin} className="space-y-4"> <form onSubmit={handleJoin} className="space-y-4">
<div> <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"> <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 <input
id="guest-name"
type="text" type="text"
autoComplete="name"
value={name} value={name}
onChange={e => !isLoggedIn && setName(e.target.value)} onChange={e => !isLoggedIn && setName(e.target.value)}
readOnly={isLoggedIn} readOnly={isLoggedIn}
@@ -248,11 +250,13 @@ export default function GuestJoin() {
{roomInfo.has_access_code && ( {roomInfo.has_access_code && (
<div> <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"> <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 <input
id="guest-access-code"
type="text" type="text"
autoComplete="off"
value={accessCode} value={accessCode}
onChange={e => setAccessCode(e.target.value)} onChange={e => setAccessCode(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -263,14 +267,16 @@ export default function GuestJoin() {
)} )}
<div> <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')} {t('room.guestModeratorCode')}
<span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span> <span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
</label> </label>
<div className="relative"> <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 <input
id="guest-moderator-code"
type="text" type="text"
autoComplete="off"
value={moderatorCode} value={moderatorCode}
onChange={e => setModeratorCode(e.target.value)} onChange={e => setModeratorCode(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
src/pages/Login.jsx
+8 -4
View File
@@ -189,11 +189,13 @@ export default function Login() {
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
<div> <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"> <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 <input
id="login-email"
type="email" type="email"
autoComplete="email"
value={email} value={email}
onChange={e => setEmail(e.target.value)} onChange={e => setEmail(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -204,11 +206,13 @@ export default function Login() {
</div> </div>
<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"> <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 <input
id="login-password"
type="password" type="password"
autoComplete="current-password"
value={password} value={password}
onChange={e => setPassword(e.target.value)} onChange={e => setPassword(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
src/pages/Register.jsx
+20 -10
View File
@@ -104,11 +104,13 @@ export default function Register() {
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
<div> <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"> <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 <input
id="register-username"
type="text" type="text"
autoComplete="username"
value={username} value={username}
onChange={e => setUsername(e.target.value)} onChange={e => setUsername(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -120,11 +122,13 @@ export default function Register() {
</div> </div>
<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"> <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 <input
id="register-display-name"
type="text" type="text"
autoComplete="name"
value={displayName} value={displayName}
onChange={e => setDisplayName(e.target.value)} onChange={e => setDisplayName(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -135,11 +139,13 @@ export default function Register() {
</div> </div>
<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"> <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 <input
id="register-email"
type="email" type="email"
autoComplete="email"
value={email} value={email}
onChange={e => setEmail(e.target.value)} onChange={e => setEmail(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -150,11 +156,13 @@ export default function Register() {
</div> </div>
<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"> <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 <input
id="register-password"
type="password" type="password"
autoComplete="new-password"
value={password} value={password}
onChange={e => setPassword(e.target.value)} onChange={e => setPassword(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -166,11 +174,13 @@ export default function Register() {
</div> </div>
<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"> <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 <input
id="register-confirm-password"
type="password" type="password"
autoComplete="new-password"
value={confirmPassword} value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)} onChange={e => setConfirmPassword(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
src/pages/RoomDetail.jsx
+18 -9
View File
@@ -580,8 +580,9 @@ export default function RoomDetail() {
{activeTab === 'settings' && isOwner && editRoom && ( {activeTab === 'settings' && isOwner && editRoom && (
<form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl"> <form onSubmit={handleSaveSettings} className="card p-6 space-y-5 max-w-2xl">
<div> <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 <input
id="room-settings-name"
type="text" type="text"
value={editRoom.name} value={editRoom.name}
onChange={e => setEditRoom({ ...editRoom, name: e.target.value })} onChange={e => setEditRoom({ ...editRoom, name: e.target.value })}
@@ -592,8 +593,9 @@ export default function RoomDetail() {
</div> </div>
<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 <textarea
id="room-settings-welcome"
value={editRoom.welcome_message || ''} value={editRoom.welcome_message || ''}
onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })} onChange={e => setEditRoom({ ...editRoom, welcome_message: e.target.value })}
className="input-field resize-none" className="input-field resize-none"
@@ -603,8 +605,9 @@ export default function RoomDetail() {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <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 <input
id="room-settings-max"
type="number" type="number"
value={editRoom.max_participants} value={editRoom.max_participants}
onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })} onChange={e => setEditRoom({ ...editRoom, max_participants: parseInt(e.target.value) || 0 })}
@@ -613,8 +616,9 @@ export default function RoomDetail() {
/> />
</div> </div>
<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 <input
id="room-settings-access-code"
type="text" type="text"
value={editRoom.access_code || ''} value={editRoom.access_code || ''}
onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })} onChange={e => setEditRoom({ ...editRoom, access_code: e.target.value })}
@@ -681,8 +685,9 @@ export default function RoomDetail() {
</label> </label>
{!!editRoom.learning_analytics && ( {!!editRoom.learning_analytics && (
<div className="ml-7"> <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 <select
id="room-settings-analytics-visibility"
value={editRoom.analytics_visibility || 'owner'} value={editRoom.analytics_visibility || 'owner'}
onChange={e => setEditRoom({ ...editRoom, analytics_visibility: e.target.value })} onChange={e => setEditRoom({ ...editRoom, analytics_visibility: e.target.value })}
className="input-field text-sm py-1.5 max-w-xs" 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> <h3 className="text-sm font-semibold text-th-text">{t('room.guestAccessTitle')}</h3>
<div> <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 <input
id="room-settings-moderator-code"
type="text" type="text"
value={editRoom.moderator_code || ''} value={editRoom.moderator_code || ''}
onChange={e => setEditRoom({ ...editRoom, moderator_code: e.target.value })} 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> <p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
<form onSubmit={handleFedInvite} className="space-y-4"> <form onSubmit={handleFedInvite} className="space-y-4">
<div> <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 <input
id="fed-invite-address"
type="text" type="text"
value={fedAddress} value={fedAddress}
onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }} onChange={e => { setFedAddress(e.target.value); if (e.target.value) setFedEmails(''); }}
@@ -902,8 +909,9 @@ export default function RoomDetail() {
</div> </div>
<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 <input
id="fed-invite-emails"
type="text" type="text"
value={fedEmails} value={fedEmails}
onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }} onChange={e => { setFedEmails(e.target.value); if (e.target.value) setFedAddress(''); }}
@@ -915,8 +923,9 @@ export default function RoomDetail() {
</div> </div>
<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 <textarea
id="fed-invite-message"
value={fedMessage} value={fedMessage}
onChange={e => setFedMessage(e.target.value)} onChange={e => setFedMessage(e.target.value)}
className="input-field resize-none" className="input-field resize-none"
src/pages/Settings.jsx
+40 -19
View File
@@ -301,7 +301,7 @@ export default function Settings() {
{user?.avatar_image ? ( {user?.avatar_image ? (
<img <img
src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`} src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
alt="Avatar" alt=""
className="w-16 h-16 rounded-full object-cover" className="w-16 h-16 rounded-full object-cover"
/> />
) : ( ) : (
@@ -316,6 +316,7 @@ export default function Settings() {
type="button" type="button"
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
disabled={uploadingAvatar} 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" 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 ? ( {uploadingAvatar ? (
@@ -360,12 +361,15 @@ export default function Settings() {
{/* Avatar Color (fallback) */} {/* Avatar Color (fallback) */}
<div className="mb-6"> <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 => ( {avatarColors.map(color => (
<button <button
key={color} key={color}
onClick={() => handleAvatarColor(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 ${ 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' 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"> <form onSubmit={handleProfileSave} className="space-y-4">
<div> <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"> <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 <input
id="settings-username"
type="text" type="text"
autoComplete="username"
value={profile.name} value={profile.name}
onChange={e => setProfile({ ...profile, name: e.target.value })} onChange={e => setProfile({ ...profile, name: e.target.value })}
className="input-field pl-11" 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> <p className="text-xs text-th-text-s mt-1">{t('auth.usernameHint')}</p>
</div> </div>
<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"> <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 <input
id="settings-display-name"
type="text" type="text"
autoComplete="name"
value={profile.display_name} value={profile.display_name}
onChange={e => setProfile({ ...profile, display_name: e.target.value })} onChange={e => setProfile({ ...profile, display_name: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -404,11 +412,13 @@ export default function Settings() {
</div> </div>
</div> </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"> <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 <input
id="settings-email"
type="email" type="email"
autoComplete="email"
value={profile.email} value={profile.email}
onChange={e => setProfile({ ...profile, email: e.target.value })} onChange={e => setProfile({ ...profile, email: e.target.value })}
className="input-field pl-11" 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> <h2 className="text-lg font-semibold text-th-text mb-6">{t('settings.changePassword')}</h2>
<form onSubmit={handlePasswordSave} className="space-y-4"> <form onSubmit={handlePasswordSave} className="space-y-4">
<div> <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"> <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 <input
id="settings-current-password"
type="password" type="password"
autoComplete="current-password"
value={passwords.currentPassword} value={passwords.currentPassword}
onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })} onChange={e => setPasswords({ ...passwords, currentPassword: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -443,11 +455,13 @@ export default function Settings() {
</div> </div>
</div> </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"> <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 <input
id="settings-new-password"
type="password" type="password"
autoComplete="new-password"
value={passwords.newPassword} value={passwords.newPassword}
onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })} onChange={e => setPasswords({ ...passwords, newPassword: e.target.value })}
className="input-field pl-11" className="input-field pl-11"
@@ -458,11 +472,13 @@ export default function Settings() {
</div> </div>
</div> </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"> <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 <input
id="settings-confirm-new-password"
type="password" type="password"
autoComplete="new-password"
value={passwords.confirmPassword} value={passwords.confirmPassword}
onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })} onChange={e => setPasswords({ ...passwords, confirmPassword: e.target.value })}
className="input-field pl-11" 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"> <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> <p className="text-sm text-th-text-s">{t('settings.security.disableConfirm')}</p>
<div> <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"> <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 <input
id="twofa-disable-password"
type="password" type="password"
autoComplete="current-password"
value={twoFaDisablePassword} value={twoFaDisablePassword}
onChange={e => setTwoFaDisablePassword(e.target.value)} onChange={e => setTwoFaDisablePassword(e.target.value)}
className="input-field pl-11" className="input-field pl-11"
@@ -527,8 +545,9 @@ export default function Settings() {
</div> </div>
</div> </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 <input
id="twofa-disable-code"
type="text" type="text"
inputMode="numeric" inputMode="numeric"
autoComplete="one-time-code" autoComplete="one-time-code"
@@ -570,6 +589,7 @@ export default function Settings() {
<button <button
onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }} onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }}
className="btn-ghost py-1.5 px-2 shrink-0" className="btn-ghost py-1.5 px-2 shrink-0"
aria-label={t('room.copyLink')}
> >
<Copy size={14} /> <Copy size={14} />
</button> </button>
@@ -577,8 +597,9 @@ export default function Settings() {
</div> </div>
<form onSubmit={handleEnable2FA} className="space-y-3"> <form onSubmit={handleEnable2FA} className="space-y-3">
<div> <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 <input
id="twofa-enable-code"
type="text" type="text"
inputMode="numeric" inputMode="numeric"
autoComplete="one-time-code" autoComplete="one-time-code"