mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-23 20:01:01 -05:00
42a9a0cf23
Live regions need to be in the original HTML of the page to work. We were generating the summary in JS. This changes the JS to only generate the contents of the summary so changes to its contents are announces by the existing live-region.
97 lines
3.7 KiB
HTML
97 lines
3.7 KiB
HTML
{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
|
|
{% call select_wrapper(
|
|
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
|
|
) %}
|
|
{% for option in field %}
|
|
{{ select_input(option, disable, option_hints, input=input) }}
|
|
{% endfor %}
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio") %}
|
|
<ul>
|
|
{% for option in options %}
|
|
{% if child_map[option.data] %}
|
|
{% call select_input(option, disable, option_hints, as_list_item=True, input=input) %}
|
|
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input) }}
|
|
{% endcall %}
|
|
{% else %}
|
|
{{ select_input(option, disable, option_hints, as_list_item=True, input=input) }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro select_nested(field, child_map, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
|
|
{% call select_wrapper(
|
|
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
|
|
) %}
|
|
<div class="{{ "radios" if input == "radio" else "checkboxes" }}-nested">
|
|
{{ select_list(child_map[None], child_map, disable, option_hints, input=input) }}
|
|
</div>
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
|
|
{% set is_collapsible = collapsible_opts|length %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
|
|
{% if is_collapsible %}
|
|
<div class="selection-summary" role="region" aria-live="polite"></div>
|
|
{% endif %}
|
|
<fieldset id="{{ field.id }}">
|
|
<legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
|
|
{% if hide_legend %}<span class="visually-hidden">{% endif %}
|
|
{{ field.label.text|safe }}
|
|
{% if hide_legend %}</span>{% endif %}
|
|
{% if hint %}
|
|
<span class="form-hint">
|
|
{{ hint }}
|
|
</span>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{{ caller() }}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
|
|
{% if as_list_item %}
|
|
<li class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% else %}
|
|
<div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% endif %}
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
{% if caller %}
|
|
{{ caller() }}
|
|
{% endif %}
|
|
{% if as_list_item %}
|
|
</li>
|
|
{% else %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|