Button uniqueness, fix search buttons

This commit is contained in:
zandercymatics 2025-02-27 13:42:16 -07:00
parent 09289769b8
commit a7170dde54
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
5 changed files with 31 additions and 19 deletions

View file

@ -292,7 +292,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 {
// Nameservers form is cloned from index 2 which has the word optional on init, does not have the word optional
// if indices 0 or 1 have been deleted

View file

@ -245,6 +245,7 @@ class Domain(TimeStampedModel, DomainHelper):
is called in the validate function on the request/domain page
throws- RegistryError or InvalidDomainError"""
return True
if not cls.string_could_be_domain(domain):
logger.warning("Not a valid domain: %s" % str(domain))
# throw invalid domain error so that it can be caught in

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" class="margin-top-2" id="domain-requests-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="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 %}
Domain requests table: Search by domain name or creator
{% else %}
Domain requests table: Search by domain name
{% endif %}
</label>
</button>
<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">Domains table: 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"