Radios can be associated with a 'conditionally revealed' content block – for example, a radio for 'Phone' could reveal an additional form field for the user to enter their phone number.
These associations are made using a data-aria-controls attribute, which
is promoted to an aria-controls attribute during initialisation.
We also need to restore the state of any conditional reveals on the page (for example if the user has navigated back), and set up event handlers to keep the reveal in sync with the radio state.
HTML element to use for radios
Protected_Private$inputsStaticelementStaticmoduleName for the component used when initialising using data-module attributes.
Protected$rootProtectedReturns the root element of the component
PrivatehandlePrivateClick event handler
Handle a click within the component root – if the click occurred on a radio, sync the state of the conditional reveal for all radio buttons in the same form with the same name (because checking one radio could have un-checked a radio under the root of another Radio component)
Click event
PrivatesyncPrivateSync the conditional reveal states for all radio buttons in this component.
PrivatesyncPrivateSync conditional reveal with the input state
Synchronise the visibility of the conditional reveal, and its accessible state, with the input's checked state.
Radio input
Staticcheck
Radios component