Merge branch 'main' into ad/3256-new-changes-on-name-servers-page

This commit is contained in:
David Kennedy 2025-03-04 14:44:58 -05:00
commit dd79477157
No known key found for this signature in database
GPG key ID: 6528A5386E66B96B
7 changed files with 55 additions and 35 deletions

View file

@ -215,7 +215,18 @@ export function initFormsetsForms() {
// For the other contacts form, we need to update the fieldset headers based on what's visible vs hidden,
// since the form on the backend employs Django's DELETE widget.
let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length;
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${totalShownForms + 1}`);
let newFormCount = totalShownForms + 1;
// update the header
let header = newForm.querySelector('legend h3');
header.textContent = `${formLabel} ${newFormCount}`;
header.id = `org-contact-${newFormCount}`;
// update accessibility elements on the delete buttons
let deleteDescription = newForm.querySelector('.delete-button-description');
deleteDescription.textContent = 'Delete new contact';
deleteDescription.id = `org-contact-${newFormCount}__name`;
let deleteButton = newForm.querySelector('button');
deleteButton.setAttribute("aria-labelledby", header.id);
deleteButton.setAttribute("aria-describedby", deleteDescription.id);
} else {
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`);
}

View file

@ -61,7 +61,7 @@
<fieldset class="usa-fieldset margin-top-1 dotgov-domain-form" id="form-container">
<legend>
<h2>Alternative domains (optional)</h2>
<h2 id="alternative-domains-title">Alternative domains (optional)</h2>
</legend>
<p id="alt_domain_instructions" class="margin-top-05">Are there other domains youd like if we cant give
@ -80,18 +80,22 @@
{% endwith %}
{% endwith %}
<button type="button" value="save" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
<div class="usa-sr-only" id="alternative-domains__add-another-alternative">Add another alternative domain</div>
<button aria-labelledby="alternative-domains-title" aria-describedby="alternative-domains__add-another-alternative" type="button" value="save" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
</svg><span class="margin-left-05">Add another alternative</span>
</button>
<div class="margin-bottom-3">
<div class="usa-sr-only" id="alternative-domains__check-availability">Check domain availability</div>
<button
id="validate-alt-domains-availability"
type="button"
class="usa-button usa-button--outline"
validate-for="{{ forms.1.requested_domain.auto_id }}"
aria-labelledby="alternative-domains-title"
aria-describedby="alternative-domains__check-availability"
>Check availability</button>
</div>

View file

@ -31,10 +31,14 @@
<fieldset class="usa-fieldset repeatable-form padding-y-1">
<legend class="float-left-tablet">
<h3 class="margin-top-05">Organization contact {{ forloop.counter }}</h2>
<h3 class="margin-top-05" id="org-contact-{{ forloop.counter }}">Organization contact {{ forloop.counter }}</h2>
</legend>
<button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-top-1 text-secondary line-height-sans-5 usa-button--with-icon">
{% if form.first_name or form.last_name %}
<span class="usa-sr-only delete-button-description" id="org-contact-{{ forloop.counter }}__name">Delete {{form.first_name.value }} {{ form.last_name.value }}</span>
{% else %}
<span class="usa-sr-only" id="org-contact-{{ forloop.counter }}__name">Delete new contact</span>
{% endif %}
<button aria-labelledby="org-contact-{{ forloop.counter }}" aria-describedby="org-contact-{{ forloop.counter }}__name" type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-top-1 text-secondary line-height-sans-5 usa-button--with-icon">
<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>Delete

View file

@ -14,22 +14,15 @@
{% endif %}
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domain requests search component" class="margin-top-2">
<section aria-label="Domain requests search component" id="domain-requests-search-component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button" aria-labelledby="domain-requests-search-component">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<label id="domain-requests__search-label" class="usa-sr-only" for="domain-requests__search-field">
{% if portfolio %}
Search by domain name or creator
{% else %}
Search by domain name
{% endif %}
</label>
<input
class="usa-input"
id="domain-requests__search-field"
@ -40,8 +33,10 @@
{% else %}
placeholder="Search by domain name"
{% endif %}
aria-labelledby="domain-requests-search-component"
/>
<button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests__search-label">
<div class="usa-sr-only" id="domain-requests-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests-search-component" aria-describedby="domain-requests-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"

View file

@ -34,24 +34,25 @@
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
{% endif %}
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domains search component" class="margin-top-2">
<section aria-label="Domains search component" class="margin-top-2" id="domains-search-component">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button" aria-labelledby="domains-search-component">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<label id="domains__search-label" class="usa-sr-only" for="domains__search-field">Search by domain name</label>
<input
class="usa-input"
id="domains__search-field"
type="search"
name="domains-search"
placeholder="Search by domain name"
aria-labelledby="domains-search-component"
/>
<button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains__search-label">
<div class="usa-sr-only" id="domains-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains-search-component" aria-describedby="domains-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
@ -63,12 +64,13 @@
</div>
{% if user_domain_count and user_domain_count > 0 %}
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Domains report component" class="margin-top-205">
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
<section aria-label="Domains report component" class="margin-top-205" id="domains-report-component">
<div class="usa-sr-only" id="domains-export-button__description">Click to export as csv</div>
<button data-href="{% url 'export_data_type_user' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="domains-report-component" aria-describedby="domains-export-button__description">
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg>Export as CSV
</a>
</button>
</section>
</div>
{% endif %}

View file

@ -1,16 +1,18 @@
{% if form.errors %}
<div id="form-errors">
{% for error in form.non_field_errors %}
<div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
<div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert" tabindex="0">
<div class="usa-alert__body">
<span class="usa-sr-only">Error:</span>
{{ error|escape }}
</div>
</div>
{% endfor %}
{% for field in form %}
{% for error in field.errors %}
<div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2">
<div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" tabindex="0">
<div class="usa-alert__body">
<span class="usa-sr-only">Error:</span>
{{ error|escape }}
</div>
</div>

View file

@ -9,24 +9,25 @@
<div class="section-outlined__header margin-bottom-3 grid-row">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 section-outlined__search--widescreen">
<section aria-label="Members search component" class="margin-top-2">
<section aria-label="Members search component" class="margin-top-2" id="members-search-component">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button" aria-labelledby="members-search-component">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<label class="usa-sr-only" for="members__search-field">Search by member name</label>
<input
class="usa-input"
id="members__search-field"
type="search"
name="members-search"
placeholder="Search by member name"
aria-labelledby="members-search-component"
/>
<button class="usa-button" type="submit" id="members__search-field-submit">
<div class="usa-sr-only" id="members-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="members__search-field-submit" aria-labelledby="members-search-component" aria-describedby="members-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
@ -37,12 +38,13 @@
</section>
</div>
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Domains report component" class="margin-top-205">
<a href="{% url 'export_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
<section aria-label="Members report component" class="margin-top-205" id="members-report-component">
<div class="usa-sr-only" id="members-export-button__description">Click to export as csv</div>
<button href="{% url 'export_members_portfolio' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="members-report-component" aria-describedby="members-export-button__description">
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg>Export as CSV
</a>
</button>
</section>
</div>
</div>