Accessibility pattern for an input that opens a dialog containing radio groups
15:39 05 Jun 2026

We need to implement a new component consisting of a button or read-only input that opens a dialog. The trigger displays a textual summary derived from two selected values, each belonging to a separate category.

The dialog contains two small radio groups, allowing the user to select one value per category. The combined selections are then reflected in the trigger. A simplified example is shown below:

Design of the component to be implemented

From an accessibility perspective, we need to determine the most appropriate ARIA pattern for this component, given that the visual design is fixed and cannot be changed.

My initial consideration was to use role="combobox" with aria-haspopup="dialog" on the trigger. However, the interaction involves selecting values across multiple independent categories, rather than choosing a single value from a list of options. This may not align well with the combobox pattern and could create confusion for assistive technologies.

An alternative approach would be to avoid using the combobox role altogether and instead treat the trigger as a button with aria-haspopup="dialog", where the dialog contains the form controls for selection.

The question is: which approach best reflects the actual interaction model and provides the most appropriate accessibility semantics under these constraints?

web combobox radio-button accessibility wai-aria