From 1542dad51a1ec0458407fd25566aba73914bc45e Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sun, 22 Feb 2026 21:32:49 +0100
Subject: [PATCH] fix(a11y): enhance accessibility for admin user components
 (#21717)

This commit adds aria-labels to the search inputs, select fields, action buttons, and close buttons on modals across the admin users layout and the site changelog modal for improved screen reader support.
---
 src/lib/components/ChangelogModal.svelte                     | 4 +---
 src/lib/components/admin/Users/Groups.svelte                 | 3 +++
 src/lib/components/admin/Users/UserList.svelte               | 5 +++++
 src/lib/components/admin/Users/UserList/AddUserModal.svelte  | 5 +++++
 src/lib/components/admin/Users/UserList/EditUserModal.svelte | 5 +++++
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ChangelogModal.svelte b/src/lib/components/ChangelogModal.svelte
index 0a1c8805eb..ce0e67da7b 100644
--- a/src/lib/components/ChangelogModal.svelte
+++ b/src/lib/components/ChangelogModal.svelte
@@ -44,9 +44,7 @@
 				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
 			</h2>
 			<button class="self-center" on:click={closeModal} aria-label={$i18n.t('Close')}>
-				<XMark className={'size-5'}>
-					<p class="sr-only">{$i18n.t('Close')}</p>
-				</XMark>
+				<XMark className={'size-5'} />
 			</button>
 		</div>
 		<div class="flex items-center mt-1">
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index a87adc57ad..051821615b 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -157,12 +157,14 @@
 				<input
 					class="w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Groups')}
 					placeholder={$i18n.t('Search Groups')}
 				/>
 				{#if query}
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 							}}
@@ -244,6 +246,7 @@
 
 	<button
 		class="flex items-center justify-between rounded-lg w-full transition mt-4"
+		aria-haspopup="dialog"
 		on:click={() => {
 			showDefaultPermissionsModal = true;
 		}}
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index dc2a93e7a1..ea2e82d868 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -208,6 +208,7 @@
 					<input
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 						bind:value={query}
+						aria-label={$i18n.t('Search')}
 						placeholder={$i18n.t('Search')}
 					/>
 				</div>
@@ -357,6 +358,7 @@
 						<td class="px-3 py-1 min-w-[7rem] w-28">
 							<button
 								class=" translate-y-0.5"
+								aria-label={$i18n.t('Change User Role')}
 								on:click={() => {
 									selectedUser = user;
 									showEditUserModal = !showEditUserModal;
@@ -408,6 +410,7 @@
 									<Tooltip content={$i18n.t('Chats')}>
 										<button
 											class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+											aria-label={$i18n.t('Chats')}
 											on:click={async () => {
 												showUserChatsModal = !showUserChatsModal;
 												selectedUser = user;
@@ -421,6 +424,7 @@
 								<Tooltip content={$i18n.t('Edit User')}>
 									<button
 										class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+										aria-label={$i18n.t('Edit User')}
 										on:click={async () => {
 											showEditUserModal = !showEditUserModal;
 											selectedUser = user;
@@ -447,6 +451,7 @@
 									<Tooltip content={$i18n.t('Delete User')}>
 										<button
 											class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+											aria-label={$i18n.t('Delete User')}
 											on:click={async () => {
 												showDeleteConfirmDialog = true;
 												selectedUser = user;
diff --git a/src/lib/components/admin/Users/UserList/AddUserModal.svelte b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
index d3b98ac6e7..191a8b134e 100644
--- a/src/lib/components/admin/Users/UserList/AddUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
@@ -133,6 +133,7 @@
 			<div class=" text-lg font-medium self-center">{$i18n.t('Add User')}</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
@@ -182,6 +183,7 @@
 									<select
 										class="w-full capitalize rounded-lg text-sm bg-transparent dark:disabled:text-gray-500 outline-hidden"
 										bind:value={_user.role}
+										aria-label={$i18n.t('Role')}
 										placeholder={$i18n.t('Enter Your Role')}
 										required
 									>
@@ -200,6 +202,7 @@
 										class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
 										type="text"
 										bind:value={_user.name}
+										aria-label={$i18n.t('Name')}
 										placeholder={$i18n.t('Enter Your Full Name')}
 										autocomplete="off"
 										required
@@ -217,6 +220,7 @@
 										class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
 										type="email"
 										bind:value={_user.email}
+										aria-label={$i18n.t('Email')}
 										placeholder={$i18n.t('Enter Your Email')}
 										required
 									/>
@@ -231,6 +235,7 @@
 										class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
 										type="password"
 										bind:value={_user.password}
+										aria-label={$i18n.t('Password')}
 										placeholder={$i18n.t('Enter Your Password')}
 										autocomplete="off"
 										required
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index 7be7170d29..3fb6186284 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
@@ -72,6 +72,7 @@
 			<div class=" text-lg font-medium self-center">{$i18n.t('Edit User')}</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
@@ -140,6 +141,7 @@
 											<select
 												class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
 												bind:value={_user.role}
+												aria-label={$i18n.t('Role')}
 												disabled={_user.id == sessionUser.id}
 												required
 											>
@@ -158,6 +160,7 @@
 												class="w-full text-sm bg-transparent outline-hidden"
 												type="text"
 												bind:value={_user.name}
+												aria-label={$i18n.t('Name')}
 												placeholder={$i18n.t('Enter Your Name')}
 												autocomplete="off"
 												required
@@ -173,6 +176,7 @@
 												class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
 												type="email"
 												bind:value={_user.email}
+												aria-label={$i18n.t('Email')}
 												placeholder={$i18n.t('Enter Your Email')}
 												autocomplete="off"
 												required
@@ -202,6 +206,7 @@
 											<SensitiveInput
 												class="w-full text-sm bg-transparent outline-hidden"
 												type="password"
+												aria-label={$i18n.t('New Password')}
 												placeholder={$i18n.t('Enter New Password')}
 												bind:value={_user.password}
 												autocomplete="new-password"