darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make footer popup forms groups & add labelling

Browse Source 
The existing behaviour focused the form control
for each popup (radios or textbox) when opened.

This gives no indication the submit button or
cancel link have been added to the page.

These changes:
- make the parent element a region to group all
  the new content
- label the region to link it to the button that
  opened it
- add a description to the region so users know
  how to use it and that all the controls have
  been added to the page
This commit is contained in:
Tom Byers
2020-09-22 11:45:55 +01:00
parent 5819b5da2d
commit 87dcea779e
4 changed files with 251 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/templates/views/templates/_move_to.html
View File

@@ -5,7 +5,7 @@
<button type="submit" name="operation" value="unknown" hidden></button>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if templates_and_folders_form.move_to.choices and template_list.templates_to_show %}
<div id="move_to_folder_radios">
<div id="move_to_folder_radios" class="sticky-template-form" role="region" aria-label="Choose the folder to move selected items to">
<div class="js-will-stick-at-bottom-when-scrolling">
{{ radios_nested(templates_and_folders_form.move_to, move_to_children, option_hints=option_hints) }}
</div>
@@ -13,22 +13,20 @@
{{ page_footer('Move', button_name='operation', button_value='move-to-existing-folder', button_text_hidden_suffix=' selection to folder') }}
</div>
</div>
<div id="move_to_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="govuk-visually-hidden">Add to new folder</legend>
<div id="move_to_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder to move selected items to">
<div class="js-will-stick-at-bottom-when-scrolling">
{{ templates_and_folders_form.move_to_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
{{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
</fieldset>
</div>
</div>
{% endif %}
<div id="add_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="govuk-visually-hidden">Add new folder</legend>
<div id="add_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder">
<div class="js-will-stick-at-bottom-when-scrolling">
{{ templates_and_folders_form.add_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
{{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
</fieldset>
</div>
</div>
<div id="add_new_template_form" {% if single_notification_channel %}data-channel="{{single_notification_channel}}" data-service="{{current_service.id}}"{% endif %}>
<div id="add_new_template_form" class="sticky-template-form" role="region" aria-label="Choose template type" {% if single_notification_channel %}data-channel="{{single_notification_channel}}" data-service="{{current_service.id}}"{% endif %}>
<div class="js-will-stick-at-bottom-when-scrolling">
{{ radios(templates_and_folders_form.add_template_by_template_type) }}
</div>