Follow-up question
A follow-up question appears after I've answered another question in a specific way.
The Follow-up question component progressively discloses a clarifying question. It only appears if an initial question is answered in a specific way. It and the question preceding it are visible on the same page.
Details
- Honeycrisp: Follow-up question molecule
- Customization: Design tokens and Styles
- Modifier:
.cfa-follow-up-question .cfa-follow-up-question__region
The Follow-up question is a custom component. It includes the form group component, fieldset component, and any other components necessary to create a form. The visual appearance uses design tokens from the Honeycrisp Follow-up question molecule. Further customization is applied using the CSS modifiers .cfa-follow-up-question .cfa-follow-up-question__region
to add styles defined in a custom stylesheet.
Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.
Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.
Examples
Guidance
Usage. The Follow-up question component should be used sparingly to avoid the risk of users accidentally missing questions contained in the follow-up region. Alternatively, use a form card with a single question, yes, and no links instead.
ARIA attributes. The aria-expanded
attribute is not included in this component because it is currently an invalid attribute for radio elements.
Additional references
Accessibility
Checklist Key
Design library component
Source and usage
- Sass stylesheet:
./_cfa-follow-up-question.scss
- Thymeleaf template fragment:
./cfa-follow-up-question.th.html
- Embedded Ruby (ERB) partial template:
./_cfa-follow-up-question.html.erb
- JavaScript enables the expansion and collapse of the follow-up region. It also toggles the following attributes on child elements inside the follow-up region; tabindex on potentially focusable children and disabled attribute on form element children. The module can be found at
./cfa-follow-up-question.js
. Guidance on individual module loading will added. Currently, there is one script that imports all modules. The source is located at@codeforamerica/js/index.js
. This entrypoint is compiled using Rollup.js and distributed to@codeforamerica/dist/js/default.js
.