Daily Accessibility ReviewCheckbox component: aria-checked incorrectly uses !!value instead of isChecked

[github-actions[bot]]

Summary

The custom Checkbox component (pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue) sets aria-checked="!!value" on the role="checkbox" span. This is incorrect when the checkbox uses an array value or a custom valueWhenTrue, because !!value evaluates truthiness of the raw prop rather than the actual checked state. Screen readers will announce the wrong checked state.

WCAG 2.2 Violation

• 4.1.2 Name, Role, Value (Level A): For all user interface components, the current state (checked/unchecked) must be programmatically determinable. aria-checked must reflect the actual state, not a truthy coercion of the raw value.

---

Relevant Code

pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue, line 305:

<span
  ref="checkbox"
  class="checkbox-custom"
  :aria-checked="!!value"     <!-- ← BUG: should use isChecked -->
  role="checkbox"
  ...
/>

The component already computes isChecked correctly (line 171–173):

isChecked(): boolean {
  return this.isMulti(this.value)
    ? this.findTrueValues(this.value)
    : this.value === this.valueWhenTrue;
}

How the Bug Manifests

value prop	valueWhenTrue	!!value	isChecked
[] (empty array)	true	true (array is truthy!)	false ✅
['other']	'mine'	true	false ✅
false	true	false	false ✅
true	true	true	true ✅

When using an array value or a custom valueWhenTrue, aria-checked will report true while the checkbox is visually unchecked.

Suggested Fix

Replace !!value with the computed isChecked property:

<span
  ref="checkbox"
  class="checkbox-custom"
  :aria-checked="isChecked"
  role="checkbox"
  ...
/>

Steps to Reproduce

Use the checkbox in multi-value mode (pass an empty array as value) and inspect aria-checked with a screen reader or DevTools — it will report true despite the checkbox being unchecked.

Generated by Daily Accessibility Review · ● 3.3M · ◷

• expires on May 30, 2026, 8:08 AM UTC