New component: RadioButton (not RadioButtons)

[olemartinorg]

Background

When analyzing these two issues closely, a misunderstanding on my part is uncovered:

• Oppstilling av statiske enkeltfelter i datamodell slik at de fremstår som tabell i GUI #298
• New component: Grid #583

It is noted in #298 that it should be possible to include a radio button in the Grid/table. From this, I assumed we meant our existing RadioButtons component - however in my imagination I could't quite see how that would look nice. RadioButtons is akin to a radio group, and contains multiple radio buttons, and Grid is specified to be configurable to display one layout component per cell. Displaying multiple radio buttons per cell of a Grid might work, at least with some layout tweaking.

However, what was really requested here was to have one radio button per cell, while each one of them belong to a larger radio group. One way to solve that would be to use the Likert component, but that might not be flexible enough when it comes to the setup (what if you want the radio group to span an entire column instead of a row?).

This issue is for implementing a component that represents a single radio button. Having multiple of these components bound to the same data model binding would implicitly make them a radio group (akin to RadioButtons). Using such a component in a stand-alone configuration might not behave the way you'd like it to, but in combination with other components its usefulness shines:

Use case 1 (in Grid)

It should be possible to add this component to a Grid cell, and having multiple of them behave like a radio group when bound to the same location in the data model. No title or label should be displayed, just the radio button (we'll assume the app developer configures a header on the row/column).

Use case 2 (in repeating Group table)

After #579 is implemented, a single RadioButton component as a child of a repeating group, hidden inside the group itself but visible in the table overview, could be used to fulfill the use-case of selecting a single row, and as such overlap with the List component in functionality (especially if the List component gets support for referencing a repeating group as its data source).

For this use-case, every RadioButton inside the repeating group would have to have a data model binding outside the repeating group (not just something like Group.IsSelected, which might work for a single checkbox - but that would implement multi-selection of rows). For it to be possible to select a row, a unique property inside the row has to be bound as a value to the radio button.

Considerations

• WCAG/UU
  • Screen readers/Aria probably expects us to identify which radio buttons belong together, along with a user-readable label for what each button convey. When shown in a Grid, this might be the column/row header, but in a standalone mode, this is most likely a value in textResourceBinding.
• Design
  • How would this look when in a standalone configuration? Do we display both a title above the component and a label beside the compoent, or do we simply disallow standalone usage?
• If multiple such components with the same binding are set as required, do we print validation errors for all of them if not set?
• If multiple such components with the same binding have different required or readOnly settings, how do we resolve that?

Configuration suggestion

{
  "id": "my-radio-button",
  "type": "RadioButton",
  "textResourceBindings": {
    "title": "Yes" // <-- Used for WCAG/UU, but not displayed?
  },
  "dataModelBindings": {
    "simpleBinding": "My.Model.SomeYesNoValue"
  },
  "value": "yes", // <-- When in use case 1, or any other static value is needed
  "value": ["dataModel", "My.Model.Group.UniqueRowIndentifier"], // <-- When in use case 2
  "required": false, // <-- See 'considerations'
  "readOnly": false
}

Relevant issues

• New component: Grid #583
• Oppstilling av statiske enkeltfelter i datamodell slik at de fremstår som tabell i GUI #298
• New component: Checkbox (not Checkboxes) #681
  • Somewhat similar issue, but for checkboxes
• Simplified/improved Likert #936
  • Relevant issue, as solving this might solve some of the same use-cases.