Altinn / Altinn/app-frontend-react

New component: `RadioButton` (not `RadioButtons`)

Open
#937 1 comment 0 reactions 0 assignees View on GitHub
area/accessibility area/data-storage area/layout area/table kind/feature-request status/for-consideration
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.