Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-02-24 04:00:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): enhance accessibility for admin user components (#21717)

Browse Source 
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.
This commit is contained in:
Classic298
2026-02-22 21:32:49 +01:00
committed by GitHub
parent 2ef55972ff
commit 1542dad51a
5 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/ChangelogModal.svelte
View File

@@ -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">

3
src/lib/components/admin/Users/Groups.svelte
View File

@@ -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;
}}

5
src/lib/components/admin/Users/UserList.svelte
View File

@@ -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;

5
src/lib/components/admin/Users/UserList/AddUserModal.svelte
View File

@@ -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

5
src/lib/components/admin/Users/UserList/EditUserModal.svelte
View File

@@ -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"