QRadio / Accessibility: Behavior not the same as in plain HTML



  • Using plain HTML, the user can navigate/choose the options (which share the same name attribute) with their arrow keys (up/down or left/right) when one of the inputs has the focus. By default, it’s also possible to cycle through all the options using the arrow keys. Hitting the TAB key moves the focus to the next form field.

    Using Quasar / QRadio elements, this is unfortunately not possible: To be able to navigate/choose the radios/options, the user must hit the TAB key instead of the default arrow keys behavior.

    Example/comparison: https://codepen.io/matthiasmeier/pen/jRRMdy?editors=1010

    As choosing an option with the arrow keys is the default browser behavior, I think this should be addressed in Quasar as the current behavior has a negative impact on accessibility. (E.g. for blind users, it is currently not clear that the options/radios belong together.)

    Edit: Radios grouped with QOptionGroup behave the same.


Log in to reply