a11y: Checkboxes not working correctly with keyboard #3350

Activity

1. Chartman123

   added a parent issue on May 22, 2026

   • Accessibility issues #2858
2. Chartman123

   added this to A11Y initiative 2026on May 22, 2026
3. Chartman123

   added

   bugSomething isn't workingSomething isn't working

   javascriptJavascript related ticketJavascript related ticket

   upstreamBlocked or cause by an upstream issueBlocked or cause by an upstream issue

   on May 22, 2026
4. Chartman123

   added the

   Bug

   issue type on May 22, 2026
5. Chartman123

   added

   a11yrelated to accessibilityrelated to accessibility

   on May 22, 2026
6. github-project-automation

   moved this to Todo in A11Y initiative 2026on May 22, 2026
7. Chartman123

   added this to the 5.3 milestone on May 22, 2026
8. Chartman123

   added

   1. to developAccepted and waiting to be taken care ofAccepted and waiting to be taken care of

   on May 25, 2026
9. Chartman123 commented on Jun 2, 2026

   

   Chartman123

   on Jun 2, 2026

   CollaboratorAuthor

   More actions

   Copilot thinks that this comes from a problem in the nextcloud-vue lib:

   The component only attaches change (and click for button variants) via listeners on the inner . Keyboard Space toggles are handled by the browser and produce a change later, so the component relies on the change path and the parent update cycle to reflect the new checked state.

   That creates a timing/race: the native input.checked (and screen reader) change immediately on Space, but the component's isChecked (based on internalModelValue) only updates after the component emits update:modelValue and the parent re-renders. That can produce the symptom you saw (SR announces checked on first press, visible tick only after second press).
   Minimal, reliable fix

   Handle Space at the component level and invoke the same toggle logic synchronously, preventing the native toggle so the component is the single source of truth. Concretely, add a keydown handler on the internal input:
   In NcCheckboxRadioSwitch.vue, change the input element to include:

   @keydown.space.prevent="onToggle"
   Example (near the existing input):

   before:
   v-on="listeners"
   after:
   v-on="listeners" @keydown.space.prevent="onToggle"
   Why this fixes it

   Preventing the native Space toggle and calling the existing onToggle immediately means we update internalModelValue (via the setter) and emit update:modelValue before any native DOM change. The visual state is then controlled by Vue's reactivity consistently, avoiding the one-press-only mismatch between SR and rendered UI.
10. Chartman123

    linked a pull request that will close this issuefix(NcCheckboxRadioSwitch): use reactive state for group checkbox toggle #8324on Jun 5, 2026
11. github-project-automation

    moved this from Todo to In Progress in A11Y initiative 2026on Jun 5, 2026
12. Chartman123 commented on Jun 5, 2026

    

    Chartman123

    on Jun 5, 2026

    CollaboratorAuthor

    More actions

    Fixed upstream
13. Chartman123

    closed this as completedon Jun 5, 2026
14. github-project-automation

    moved this from In Progress to Done in A11Y initiative 2026on Jun 5, 2026