From 8ce7d23a631a23a78589d6728322faf5687b49cd Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 25 Aug 2026 01:40:39 -0400
Subject: [PATCH] Supply aria-label to Switch and Checkbox to avoid Reka's
 innerText fallback

---
 .../components/fieldtypes/ToggleFieldtype.vue  |  1 +
 resources/js/components/ui/Checkbox/Item.vue   |  6 ++++--
 .../js/tests/components/CheckboxItem.test.js   | 18 ++++++++++++++++++
 resources/js/tests/components/Switch.test.js   | 17 +++++++++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/tests/components/Switch.test.js

diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index cf1c35aee4d..3b08975f8a4 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -4,6 +4,7 @@
             @update:model-value="update"
             :disabled="config.disabled || isReadOnly"
             :id="fieldId"
+            :aria-label="__(config.display)"
             :model-value="value"
             :read-only="isReadOnly"
         />
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 804b6a44727..d94b35ac9b0 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
-import { computed, useAttrs, useId } from 'vue';
+import { computed, useAttrs, useId, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import { injectCheckboxContext } from './Group.vue';
@@ -8,6 +8,7 @@ import { injectCheckboxContext } from './Group.vue';
 defineOptions({ inheritAttrs: false });
 
 const attrs = useAttrs();
+const slots = useSlots();
 
 const props = defineProps({
     /** Optional ID for the checkbox input */
@@ -100,7 +101,8 @@ const conditionalProps = computed(() => {
         props_obj['aria-describedby'] = `${props.id}-description`;
     }
 
-    if (props.solo && (props.label || props.value)) {
+    // Providing the name ourselves stops Reka from deriving it from the label's innerText, which forces a layout.
+    if ((props.solo || !slots.default) && (props.label || props.value)) {
         props_obj['aria-label'] = props.label || props.value;
     }
 
diff --git a/resources/js/tests/components/CheckboxItem.test.js b/resources/js/tests/components/CheckboxItem.test.js
index 97b9e0be517..572ef332123 100644
--- a/resources/js/tests/components/CheckboxItem.test.js
+++ b/resources/js/tests/components/CheckboxItem.test.js
@@ -30,3 +30,21 @@ test('aria-describedby and the description element share the custom id', () => {
     expect(wrapper.find('[role="checkbox"]').attributes('aria-describedby')).toBe('custom-checkbox-id-description');
     expect(wrapper.find('p').attributes('id')).toBe('custom-checkbox-id-description');
 });
+
+test('the label prop is rendered as the aria-label', () => {
+    const wrapper = mount(Checkbox, {
+        props: { label: 'Subscribe' },
+    });
+
+    expect(wrapper.find('[role="checkbox"]').attributes('aria-label')).toBe('Subscribe');
+});
+
+test('no aria-label is rendered when the label comes from the slot', () => {
+    const wrapper = mount(Checkbox, {
+        props: { value: 'subscribe' },
+        slots: { default: () => 'Subscribe' },
+    });
+
+    expect(wrapper.find('[role="checkbox"]').attributes('aria-label')).toBeUndefined();
+});
+
diff --git a/resources/js/tests/components/Switch.test.js b/resources/js/tests/components/Switch.test.js
new file mode 100644
index 00000000000..930adec5c1a
--- /dev/null
+++ b/resources/js/tests/components/Switch.test.js
@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import Switch from '@/components/ui/Switch.vue';
+
+test('an aria-label attribute falls through to the switch element', () => {
+    const wrapper = mount(Switch, {
+        attrs: { 'aria-label': 'Publish this entry' },
+    });
+
+    expect(wrapper.find('[role="switch"]').attributes('aria-label')).toBe('Publish this entry');
+});
+
+test('no aria-label is rendered when no aria-label attribute is given', () => {
+    const wrapper = mount(Switch);
+
+    expect(wrapper.find('[role="switch"]').attributes('aria-label')).toBeUndefined();
+});