search

proton-ui / proton

A collection of renderless UI components for Vue.js.
https://proton-ui.com
MIT License
110 stars 11 forks source link

a11y: Use of tabindex on labels #39

Open sirrah-tam opened 4 years ago

sirrah-tam commented 4 years ago

Issue

The use of tabindex="0" on label elements for checkbox and radio input fields is not necessary and adds to the cognitive load of the page by requiring keyboard-only users to move twice for each field.

Actual Behavior

Keyboard-only users should only have to interact with the input field directly.

Steps to Reproduce the Problem

  1. Start focus before a set of checkbox or radio elements
  2. Begin tabbing through each element
  3. Notice how focus lands on both label field and input field

Recommendations

Remove tabindex attribute from label field.