From 2725ae6d6c7377c2c3d4d3f6c2bab59561dc48ce Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sun, 26 Jul 2026 23:37:06 +0200
Subject: [PATCH] fix: expose Checkbox as a checkbox with a name and state
 (WCAG 4.1.2) (#27494)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On latest `dev`, `common/Checkbox.svelte` renders a `<button type="button">` containing only `aria-hidden="true"` SVGs. It has no `role`, no `aria-checked` and no accessible name, and the component has no `$$restProps` spread, so a caller cannot supply a name either.

Assistive technology announces every one of these as an unnamed "button". A screen reader user cannot tell that the control is a checkbox, cannot tell whether it is on or off, and cannot tell what it toggles. The visible label is always an unassociated sibling element, for example `Capabilities.svelte` puts it in a preceding `<div>` with no `id`, and `Groups/Users.svelte` puts it in a different table cell from the checkbox.

Breaks WCAG 4.1.2 Name, Role, Value (Level A) on all three counts at once.

Fix: expose `role="checkbox"` and `aria-checked` on the control, add an `ariaLabel` prop, and pass the label text that is already in scope at each call site. `aria-checked` mirrors the component's existing icon logic exactly, so the indeterminate dash reports `mixed` rather than `false`. The `ariaLabel={ariaLabel || undefined}` shape matches the sibling `common/Switch.svelte`. Every label expression is the same one that renders the visible text next to the checkbox, so the accessible name always matches what is on screen.

Three call sites are deliberately left out of this PR, because they nest `Checkbox` inside another `<button>`, which is invalid HTML and independently broken:

- `workspace/Knowledge/KnowledgeBase.svelte` — the Checkbox's `on:change` sets `includeContent = true` and then the same click bubbles to the outer button, which flips it back with `includeContent = !includeContent`. Clicking the checkbox square is a no-op today, only the text label works. Giving it a confident name would advertise a control that does nothing.
- `workspace/common/MemberSelector.svelte` (two instances) — the inner Checkbox has no `on:change` at all and only works because its click bubbles to the row button. Naming it would create two focusable controls per row with the same name.

Both need the nesting resolved first, so that the row button carries the checkbox semantics. That is a behavioural fix and belongs in its own PR.

Severity: Serious. Affects model capabilities, default features, builtin tools, tool/filter/skill/action selectors and group membership.

### Contributor License Agreement

<!--
🚨 DO NOT DELETE THE TEXT BELOW 🚨
Keep the "Contributor License Agreement" confirmation text intact.
Deleting it will trigger the CLA-Bot to INVALIDATE your PR.

Your PR will NOT be reviewed or merged until you check the box below confirming that you have read and agree to the terms of the CLA.
-->

- [x] By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms.

> [!NOTE]
> Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.
---
 src/lib/components/admin/Users/Groups/Users.svelte            | 1 +
 src/lib/components/common/Checkbox.svelte                     | 4 ++++
 src/lib/components/workspace/Models/ActionsSelector.svelte    | 1 +
 src/lib/components/workspace/Models/BuiltinTools.svelte       | 1 +
 src/lib/components/workspace/Models/Capabilities.svelte       | 1 +
 src/lib/components/workspace/Models/DefaultFeatures.svelte    | 1 +
 .../components/workspace/Models/DefaultFiltersSelector.svelte | 1 +
 src/lib/components/workspace/Models/FiltersSelector.svelte    | 1 +
 src/lib/components/workspace/Models/SkillsSelector.svelte     | 1 +
 src/lib/components/workspace/Models/ToolsSelector.svelte      | 1 +
 10 files changed, 13 insertions(+)

diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
index 6ee7f427a4..ca60647265 100644
--- a/src/lib/components/admin/Users/Groups/Users.svelte
+++ b/src/lib/components/admin/Users/Groups/Users.svelte
@@ -238,6 +238,7 @@
 								<td class=" px-3 py-1 w-8">
 									<div class="flex w-full justify-center">
 										<Checkbox
+											ariaLabel={user.name}
 											state={(user?.group_ids ?? []).includes(groupId) ? 'checked' : 'unchecked'}
 											on:change={(e) => {
 												toggleMember(user.id, e.detail);
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
index 785302fb8e..a044974e97 100644
--- a/src/lib/components/common/Checkbox.svelte
+++ b/src/lib/components/common/Checkbox.svelte
@@ -5,6 +5,7 @@
 	export let state = 'unchecked';
 	export let indeterminate = false;
 	export let disabled = false;
+	export let ariaLabel = '';
 
 	export let disabledClassName = 'opacity-50 cursor-not-allowed';
 
@@ -37,6 +38,9 @@
 		}
 	}}
 	type="button"
+	role="checkbox"
+	aria-checked={indeterminate && _state !== 'checked' ? 'mixed' : _state === 'checked'}
+	aria-label={ariaLabel || undefined}
 	{disabled}
 >
 	<div class="top-0 left-0 absolute w-full flex justify-center">
diff --git a/src/lib/components/workspace/Models/ActionsSelector.svelte b/src/lib/components/workspace/Models/ActionsSelector.svelte
index fe1bb88779..9c6ee8d93b 100644
--- a/src/lib/components/workspace/Models/ActionsSelector.svelte
+++ b/src/lib/components/workspace/Models/ActionsSelector.svelte
@@ -65,6 +65,7 @@
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox
+								ariaLabel={action.name}
 								state="checked"
 								disabled={action.is_global}
 								on:change={(e) => {
diff --git a/src/lib/components/workspace/Models/BuiltinTools.svelte b/src/lib/components/workspace/Models/BuiltinTools.svelte
index c507c33465..c321714257 100644
--- a/src/lib/components/workspace/Models/BuiltinTools.svelte
+++ b/src/lib/components/workspace/Models/BuiltinTools.svelte
@@ -81,6 +81,7 @@
 					</Tooltip>
 				</div>
 				<Checkbox
+					ariaLabel={$i18n.t(toolLabels[tool].label)}
 					state={builtinTools[tool] !== false ? 'checked' : 'unchecked'}
 					on:change={(e) => {
 						if (e.detail === 'checked') {
diff --git a/src/lib/components/workspace/Models/Capabilities.svelte b/src/lib/components/workspace/Models/Capabilities.svelte
index 7f7141f8b7..9808aa1123 100644
--- a/src/lib/components/workspace/Models/Capabilities.svelte
+++ b/src/lib/components/workspace/Models/Capabilities.svelte
@@ -93,6 +93,7 @@
 					</Tooltip>
 				</div>
 				<Checkbox
+					ariaLabel={$i18n.t(capabilityLabels[capability].label)}
 					state={capabilities[capability] ? 'checked' : 'unchecked'}
 					on:change={(e) => {
 						capabilities[capability] = e.detail === 'checked';
diff --git a/src/lib/components/workspace/Models/DefaultFeatures.svelte b/src/lib/components/workspace/Models/DefaultFeatures.svelte
index 5d48173556..e4ea8f8a08 100644
--- a/src/lib/components/workspace/Models/DefaultFeatures.svelte
+++ b/src/lib/components/workspace/Models/DefaultFeatures.svelte
@@ -36,6 +36,7 @@
 					</Tooltip>
 				</div>
 				<Checkbox
+					ariaLabel={$i18n.t(featureLabels[feature].label)}
 					state={featureIds.includes(feature) ? 'checked' : 'unchecked'}
 					on:change={(e) => {
 						if (e.detail === 'checked') {
diff --git a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
index 9742b16727..80fd6ee862 100644
--- a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
@@ -62,6 +62,7 @@
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox
+								ariaLabel={filter.name}
 								state={isSelected ? 'checked' : 'unchecked'}
 								on:change={(e) => {
 									if (e.detail === 'checked') {
diff --git a/src/lib/components/workspace/Models/FiltersSelector.svelte b/src/lib/components/workspace/Models/FiltersSelector.svelte
index 56ff12e5f8..ac2da17042 100644
--- a/src/lib/components/workspace/Models/FiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/FiltersSelector.svelte
@@ -67,6 +67,7 @@
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox
+								ariaLabel={filter.name}
 								state={isSelected ? 'checked' : 'unchecked'}
 								disabled={filter.is_global}
 								on:change={(e) => {
diff --git a/src/lib/components/workspace/Models/SkillsSelector.svelte b/src/lib/components/workspace/Models/SkillsSelector.svelte
index 69a31746f8..271aac79f1 100644
--- a/src/lib/components/workspace/Models/SkillsSelector.svelte
+++ b/src/lib/components/workspace/Models/SkillsSelector.svelte
@@ -58,6 +58,7 @@
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox
+								ariaLabel={skill.name}
 								state="checked"
 								on:change={(e) => {
 									if (e.detail === 'unchecked') {
diff --git a/src/lib/components/workspace/Models/ToolsSelector.svelte b/src/lib/components/workspace/Models/ToolsSelector.svelte
index e754087987..9fe8a9a1ba 100644
--- a/src/lib/components/workspace/Models/ToolsSelector.svelte
+++ b/src/lib/components/workspace/Models/ToolsSelector.svelte
@@ -56,6 +56,7 @@
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
 							<Checkbox
+								ariaLabel={tool.name}
 								state="checked"
 								on:change={(e) => {
 									if (e.detail === 'unchecked') {