mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-16 06:24:12 +02:00
Change layout architecture of legend + delete button to fix accessibility issue (legend needs to be direct child of fieldset)
This commit is contained in:
parent
d48572e193
commit
2c4ad262b4
4 changed files with 25 additions and 43 deletions
|
@ -338,30 +338,6 @@ function markForm(e, formLabel){
|
||||||
|
|
||||||
// Set display to 'none'
|
// Set display to 'none'
|
||||||
formToRemove.style.display = 'none';
|
formToRemove.style.display = 'none';
|
||||||
|
|
||||||
//
|
|
||||||
// This next block is a hack to fix a page jump when a fielset is set to display none at the start of the formset but still takes
|
|
||||||
// a bit of space in the DOM, causing the content to jump down a bit
|
|
||||||
//
|
|
||||||
// Get the first hidden fieldset
|
|
||||||
const hiddenFieldset = document.querySelector('.repeatable-form[style="display: none;"]');
|
|
||||||
let targetFieldset = null;
|
|
||||||
// If that first hidden fieldset does not have any sibling out of all the previous siblings that's visible, get the next visible fieldset
|
|
||||||
if (hiddenFieldset && !hiddenFieldset.previousElementSibling.matches('.repeatable-form:not([style="display: none;"])')) {
|
|
||||||
let currentSibling = hiddenFieldset.nextElementSibling;
|
|
||||||
// Iterate through siblings until a visible fieldset is found
|
|
||||||
while (currentSibling) {
|
|
||||||
if (currentSibling.matches(':not([style="display: none;"])')) {
|
|
||||||
targetFieldset = currentSibling;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
currentSibling = currentSibling.nextElementSibling;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (targetFieldset) {
|
|
||||||
// Account for the space the hidden fieldsets at the top of the formset are occupying in the DOM
|
|
||||||
targetFieldset.querySelector('h2').style.marginTop = '1rem';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update h2s on the visible forms only. We won't worry about the forms' identifiers
|
// Update h2s on the visible forms only. We won't worry about the forms' identifiers
|
||||||
|
|
|
@ -4,6 +4,10 @@
|
||||||
.sr-only {
|
.sr-only {
|
||||||
@include sr-only;
|
@include sr-only;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear-both {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
|
@ -31,3 +31,10 @@
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
legend.float-left-tablet + button.float-right-tablet {
|
||||||
|
margin-top: .5rem;
|
||||||
|
@include at-media('tablet') {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
|
@ -34,31 +34,26 @@
|
||||||
{{ forms.1.management_form }}
|
{{ forms.1.management_form }}
|
||||||
{# forms.1 is a formset and this iterates over its forms #}
|
{# forms.1 is a formset and this iterates over its forms #}
|
||||||
{% for form in forms.1.forms %}
|
{% for form in forms.1.forms %}
|
||||||
<fieldset class="usa-fieldset repeatable-form">
|
<fieldset class="usa-fieldset repeatable-form padding-y-1">
|
||||||
|
|
||||||
<div class="grid-row grid-gap-2 flex-end">
|
<legend class="float-left-tablet">
|
||||||
|
<h2 class="margin-top-1">Organization contact {{ forloop.counter }}</h2>
|
||||||
|
</legend>
|
||||||
|
|
||||||
<div class="tablet:grid-col-8">
|
<button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2">
|
||||||
<legend>
|
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||||
<h2>Organization contact {{ forloop.counter }}</h2>
|
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
|
||||||
</legend>
|
</svg><span class="margin-left-05">Delete</span>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="tablet:grid-col-4">
|
|
||||||
<button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2">
|
|
||||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
|
||||||
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
|
|
||||||
</svg><span class="margin-left-05">Delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if forms.1.can_delete %}
|
{% if forms.1.can_delete %}
|
||||||
{{ form.DELETE }}
|
{{ form.DELETE }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% input_with_errors form.first_name %}
|
<div class="padding-top-1 clear-both">
|
||||||
|
{% input_with_errors form.first_name %}
|
||||||
|
</div>
|
||||||
|
|
||||||
{% input_with_errors form.middle_name %}
|
{% input_with_errors form.middle_name %}
|
||||||
|
|
||||||
|
@ -71,11 +66,11 @@
|
||||||
affecting the margin of this block. The wrapper div is a
|
affecting the margin of this block. The wrapper div is a
|
||||||
temporary workaround. {% endcomment %}
|
temporary workaround. {% endcomment %}
|
||||||
<div class="margin-top-3">
|
<div class="margin-top-3">
|
||||||
{% input_with_errors form.email %}
|
{% input_with_errors form.email %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% with add_class="usa-input--medium" %}
|
{% with add_class="usa-input--medium" %}
|
||||||
{% input_with_errors form.phone %}
|
{% input_with_errors form.phone %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue