Altinn / Altinn/app-frontend-react
New component: `RadioButton` (not `RadioButtons`)
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
## Background
When analyzing these two issues closely, a misunderstanding on my part is uncovered:
- #298
- #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](https://docs.altinn.studio/app/development/ux/components/listcomponent/) 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
```json
{
"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
- #583
- #298
- #681
- Somewhat similar issue, but for checkboxes
- #936
- Relevant issue, as solving this might solve some of the same use-cases.
Contributor guide
Research direction
Start by reviewing the existing RadioButtons, Likert, Grid, Group, and List components, along with issues #298, #579, #583, #681, and #936. Resolve the proposed binding, accessibility, standalone, validation, required, and read-only behavior before implementation. Done means the RadioButton supports the described Grid and repeating-group use cases with agreed acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100