Make select choices easier to select

getodk / web-forms

ODK Web Forms enables form filling and submission editing of ODK forms in a web browser. It's coming soon! ✨

https://getodk.org

Apache License 2.0

5 stars 0 forks source link

Make select choices easier to select #86

Open lognaturel opened 2 months ago

lognaturel commented 2 months ago

User story

As a user on a tablet or desktop I want to be able to easily select answers (without accidentally selecting something) so that I can quickly fill out my form without having to directly interact with the radio button or checkbox

Given I want to select an option on desktop When I hover I see a light blue fill Then when I select the outline is ODK blue with a light blue fill

Notes:

We also decided if it's less than 50% then the container is only half and if it's more than 50% it's full width
Needs discussion on likert scale, auto-filtering a list, selecting SVG shapes

Figma

sadiqkhoja commented 6 days ago

Given I want to select an option and I'm using my keyboard When I tab through the different options I see a ODK blue outline with a light blue fill When I press enter I proceed to the next question

Currently, tab behaviour is different for select_one (radio buttons) and select_multiple (checkboxes). For select_one, tab navigates to the next question, up and down arrow keys can be used to move focus between options; and for select_multiple tab focuses next option, space selects and deselects the option. Enter key does nothing for either question types. Can we move keyboard navigation to a separate issue?

lognaturel commented 6 days ago

Can we move keyboard navigation to a separate issue?

That sounds like a good idea! 👍