search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
10 stars 1 forks source link

Radio Group #129

Open Robbert opened 3 years ago

Robbert commented 3 years ago

Naam

Radio Group

Notities

Naming

To keep in line with the naming convention where we use radio and checkbox from <input type="radio"/> and >input type="checkbox"/> let's name this component radio-group instead of radio-button-group

julezrulez commented 3 years ago

I sometimes receive questions about keyboard navigation and the behaviour of a radio button group. Grouped radio buttons should work as follows (tested with Chrome 90 on Windows 10: Initial state

  1. Initially none of the radio buttons is selected.
  2. When tabbing via [Tab] through a form entering a group sets focus to the first radio button.
  3. When tabbing backwards [Shift]+[Tab] through a form entering the group sets focus to the last radio button.
  4. With spacebar the current focused radio button will be checked.
  5. When tabbing and entering a group with one radio button checked, the focus is set on that radio button.
  6. When tabbing out of the group with none of the radio buttons selected, all radio buttons in the group stay the unselected. In a radio button group navigation you must use the arrow keys to walk through the radio buttons.
    • As soon as you use an arrow key in a radio button group the next or previous radio button is checked, even none was checked on forehand. Note that the user won't be able to see anymore what the initial checked radio button was. This is a flaw in operating systems while an input field has something as [Ctrl]+[Z] in Windows to undo a typed change.
    • You can use either up or right arrow key and down or left arrow key for navigating through a group.
    • Leaving a radio group via [Tab] or [Shift]+[Tab] will leave the group in the state it is at that moment, the last checked radio button stays checked.
Robbert commented 1 year ago

We moeten onderzoek doen voor de richtlijn of één radio button uit een groep al geselecteerd is, of dat er juist geen enkele optie geselecteerd is.