zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-12 12:39:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

JS refactor

Browse source
This commit is contained in:
Rachid Mrad 2024-10-21 15:34:25 -04:00
parent a8fec4fcca
commit ebd4b17d80
No known key found for this signature in database
5 changed files with 252 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/registrar/assets/js/get-gov.js
View file

@ -1003,25 +1003,24 @@ function unloadModals() {
} }
class LoadTableBase { class LoadTableBase {
constructor(tableSelector, tableWrapperSelector, searchFieldId, searchSubmitId, resetSearchBtn, resetFiltersBtn, noDataDisplay, noSearchresultsDisplay) { constructor(sectionSelector) {
this.tableWrapper = document.querySelector(tableWrapperSelector); this.tableWrapper = document.getElementById(`${sectionSelector}__table-wrapper`);
this.tableHeaders = document.querySelectorAll(`${tableSelector} th[data-sortable]`); this.tableHeaders = document.querySelectorAll(`#${sectionSelector} th[data-sortable]`);
this.currentSortBy = 'id'; this.currentSortBy = 'id';
this.currentOrder = 'asc'; this.currentOrder = 'asc';
this.currentStatus = []; this.currentStatus = [];
this.currentSearchTerm = ''; this.currentSearchTerm = '';
this.scrollToTable = false; this.scrollToTable = false;
this.searchInput = document.querySelector(searchFieldId); this.searchInput = document.getElementById(`${sectionSelector}__search-field`);
this.searchSubmit = document.querySelector(searchSubmitId); this.searchSubmit = document.getElementById(`${sectionSelector}__search-field-submit`);
this.tableAnnouncementRegion = document.querySelector(`${tableWrapperSelector} .usa-table__announcement-region`); this.tableAnnouncementRegion = document.getElementById(`${sectionSelector}__usa-table__announcement-region`);
this.resetSearchButton = document.querySelector(resetSearchBtn); this.resetSearchButton = document.getElementById(`${sectionSelector}__reset-search`);
this.resetFiltersButton = document.querySelector(resetFiltersBtn); this.resetFiltersButton = document.getElementById(`${sectionSelector}__reset-filters`);
// NOTE: these 3 can't be used if filters are active on a page with more than 1 table this.statusCheckboxes = document.querySelectorAll(`.${sectionSelector} input[name="filter-status"]`);
this.statusCheckboxes = document.querySelectorAll('input[name="filter-status"]'); this.statusIndicator = document.getElementById(`${sectionSelector}__filter-indicator`);
this.statusIndicator = document.querySelector('.filter-indicator'); this.statusToggle = document.getElementById(`${sectionSelector}__usa-button--filter`);
this.statusToggle = document.querySelector('.usa-button--filter'); this.noTableWrapper = document.getElementById(`${sectionSelector}__no-data`);
this.noTableWrapper = document.querySelector(noDataDisplay); this.noSearchResultsWrapper = document.getElementById(`${sectionSelector}__no-search-results`);
this.noSearchResultsWrapper = document.querySelector(noSearchresultsDisplay);
this.portfolioElement = document.getElementById('portfolio-js-value'); this.portfolioElement = document.getElementById('portfolio-js-value');
this.portfolioValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-portfolio') : null; this.portfolioValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-portfolio') : null;
this.initializeTableHeaders(); this.initializeTableHeaders();
@ -1363,7 +1362,7 @@ class LoadTableBase {
class DomainsTable extends LoadTableBase { class DomainsTable extends LoadTableBase {
constructor() { constructor() {
super('.domains__table', '.domains__table-wrapper', '#domains__search-field', '#domains__search-field-submit', '.domains__reset-search', '.domains__reset-filters', '.domains__no-data', '.domains__no-search-results'); super('domains');
} }
/** /**
* Loads rows in the domains list, as well as updates pagination around the domains list * Loads rows in the domains list, as well as updates pagination around the domains list
@ -1415,7 +1414,7 @@ class DomainsTable extends LoadTableBase {
this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm); this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
// identify the DOM element where the domain list will be inserted into the DOM // identify the DOM element where the domain list will be inserted into the DOM
const domainList = document.querySelector('.domains__table tbody'); const domainList = document.querySelector('#domains tbody');
domainList.innerHTML = ''; domainList.innerHTML = '';
data.domains.forEach(domain => { data.domains.forEach(domain => {
@ -1501,7 +1500,7 @@ class DomainsTable extends LoadTableBase {
class DomainRequestsTable extends LoadTableBase { class DomainRequestsTable extends LoadTableBase {
constructor() { constructor() {
super('.domain-requests__table', '.domain-requests__table-wrapper', '#domain-requests__search-field', '#domain-requests__search-field-submit', '.domain-requests__reset-search', '.domain-requests__reset-filters', '.domain-requests__no-data', '.domain-requests__no-search-results'); super('domain-requests');
} }
toggleExportButton(requests) { toggleExportButton(requests) {
@ -1567,7 +1566,7 @@ class DomainRequestsTable extends LoadTableBase {
this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm); this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
// identify the DOM element where the domain request list will be inserted into the DOM // identify the DOM element where the domain request list will be inserted into the DOM
const tbody = document.querySelector('.domain-requests__table tbody'); const tbody = document.querySelector('#domain-requests tbody');
tbody.innerHTML = ''; tbody.innerHTML = '';
// Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases // Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases
@ -1599,7 +1598,7 @@ class DomainRequestsTable extends LoadTableBase {
delheader.setAttribute('class', 'delete-header'); delheader.setAttribute('class', 'delete-header');
delheader.innerHTML = ` delheader.innerHTML = `
<span class="usa-sr-only">Delete Action</span>`; <span class="usa-sr-only">Delete Action</span>`;
let tableHeaderRow = document.querySelector('.domain-requests__table thead tr'); let tableHeaderRow = document.querySelector('#domain-requests thead tr');
tableHeaderRow.appendChild(delheader); tableHeaderRow.appendChild(delheader);
} }
} }
@ -1871,7 +1870,7 @@ class DomainRequestsTable extends LoadTableBase {
class MembersTable extends LoadTableBase { class MembersTable extends LoadTableBase {
constructor() { constructor() {
super('.members__table', '.members__table-wrapper', '#members__search-field', '#members__search-field-submit', '.members__reset-search', '.members__reset-filters', '.members__no-data', '.members__no-search-results'); super('members');
} }
/** /**
* Loads rows in the members list, as well as updates pagination around the members list * Loads rows in the members list, as well as updates pagination around the members list
@ -1923,7 +1922,7 @@ class MembersTable extends LoadTableBase {
this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm); this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
// identify the DOM element where the domain list will be inserted into the DOM // identify the DOM element where the domain list will be inserted into the DOM
const memberList = document.querySelector('.members__table tbody'); const memberList = document.querySelector('#members tbody');
memberList.innerHTML = ''; memberList.innerHTML = '';
const invited = 'Invited'; const invited = 'Invited';
@ -2017,7 +2016,8 @@ class MembersTable extends LoadTableBase {
class MemberDomainsTable extends LoadTableBase { class MemberDomainsTable extends LoadTableBase {
constructor() { constructor() {
super('.member-domains__table', '.member-domains__table-wrapper', '#member-domains__search-field', '#member-domains__search-field-submit', '.member-domains__reset-search', '.member-domains__reset-filters', '.member-domains__no-data', '.member-domains__no-search-results'); super('member-domains');
this.currentSortBy = 'name';
} }
/** /**
* Loads rows in the members list, as well as updates pagination around the members list * Loads rows in the members list, as well as updates pagination around the members list
@ -2029,7 +2029,7 @@ class MemberDomainsTable extends LoadTableBase {
* @param {*} searchTerm - the search term * @param {*} searchTerm - the search term
* @param {*} portfolio - the portfolio id * @param {*} portfolio - the portfolio id
*/ */
loadTable(page, sortBy = 'name', order = this.currentOrder, scroll = this.scrollToTable, searchTerm =this.currentSearchTerm, portfolio = this.portfolioValue) { loadTable(page, sortBy = this.currentSortBy, order = this.currentOrder, scroll = this.scrollToTable, searchTerm =this.currentSearchTerm, portfolio = this.portfolioValue) {
// --------- SEARCH // --------- SEARCH
let searchParams = new URLSearchParams( let searchParams = new URLSearchParams(
@ -2080,7 +2080,7 @@ class MemberDomainsTable extends LoadTableBase {
this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm); this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
// identify the DOM element where the domain list will be inserted into the DOM // identify the DOM element where the domain list will be inserted into the DOM
const memberDomainsList = document.querySelector('.member-domains__table tbody'); const memberDomainsList = document.querySelector('#member-domains tbody');
memberDomainsList.innerHTML = ''; memberDomainsList.innerHTML = '';

26
src/registrar/templates/includes/domain_requests_table.html
View file

@ -17,22 +17,24 @@
<section aria-label="Domain requests search component" class="margin-top-2"> <section aria-label="Domain requests search component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 domain-requests__reset-search display-none" type="button"> <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use> <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg> </svg>
Reset Reset
</button> </button>
<label class="usa-sr-only" for="domain-requests__search-field">
{% if portfolio %} {% if portfolio %}
<label class="usa-sr-only" for="domain-requests__search-field">Search by domain name or creator</label> Search by domain name or creator
{% else %} {% else %}
<label class="usa-sr-only" for="domain-requests__search-field">Search by domain name</label> Search by domain name
{% endif %} {% endif %}
</label>
<input <input
class="usa-input" class="usa-input"
id="domain-requests__search-field" id="domain-requests__search-field"
type="search" type="search"
name="search" name="domain-requests-search"
{% if portfolio %} {% if portfolio %}
placeholder="Search by domain name or creator" placeholder="Search by domain name or creator"
{% else %} {% else %}
@ -70,10 +72,11 @@
<button <button
type="button" type="button"
class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button" class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button"
id="domain-requests__usa-button--filter"
aria-expanded="false" aria-expanded="false"
aria-controls="filter-status" aria-controls="filter-status"
> >
<span class="filter-indicator text-bold display-none"></span> Status <span class="text-bold display-none" id="domain-requests__filter-indicator"></span> Status
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use> <use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg> </svg>
@ -158,7 +161,8 @@
</div> </div>
<button <button
type="button" type="button"
class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domain-requests__reset-filters display-none" class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter display-none"
id="domain-requests__reset-filters"
> >
Clear filters Clear filters
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
@ -168,8 +172,8 @@
</div> </div>
{% endif %} {% endif %}
<div class="domain-requests__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0"> <div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domain-requests__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domain-requests__table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your domain requests</caption> <caption class="sr-only">Your domain requests</caption>
<thead> <thead>
<tr> <tr>
@ -187,14 +191,14 @@
<!-- AJAX will populate this tbody --> <!-- AJAX will populate this tbody -->
</tbody> </tbody>
</table> </table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div> <div class="usa-sr-only usa-table__announcement-region" aria-live="polite" id="domain-requests__usa-table__announcement-region"></div>
</div> </div>
<div class="domain-requests__no-data display-none"> <div class="display-none" id="domain-requests__no-data">
<p>You haven't requested any domains.</p> <p>You haven't requested any domains.</p>
</div> </div>
<div class="domain-requests__no-search-results display-none"> <div class="display-none" id="domain-requests__no-search-results">
<p>No results found</p> <p>No results found</p>
</div> </div>
</section> </section>

26
src/registrar/templates/includes/domains_table.html
View file

@ -17,7 +17,7 @@
<section aria-label="Domains search component" class="margin-top-2"> <section aria-label="Domains search component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 domains__reset-search display-none" type="button"> <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use> <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg> </svg>
@ -28,7 +28,7 @@
class="usa-input" class="usa-input"
id="domains__search-field" id="domains__search-field"
type="search" type="search"
name="search" name="domains-search"
placeholder="Search by domain name" placeholder="Search by domain name"
/> />
<button class="usa-button" type="submit" id="domains__search-field-submit"> <button class="usa-button" type="submit" id="domains__search-field-submit">
@ -61,10 +61,11 @@
<button <button
type="button" type="button"
class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button" class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button"
id="domains__usa-button--filter"
aria-expanded="false" aria-expanded="false"
aria-controls="filter-status" aria-controls="filter-status"
> >
<span class="filter-indicator text-bold display-none"></span> Status <span class="text-bold display-none" id="domains__filter-indicator"></span> Status
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use> <use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg> </svg>
@ -139,7 +140,8 @@
</div> </div>
<button <button
type="button" type="button"
class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domains__reset-filters display-none" class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter display-none"
id="domains__reset-filters"
> >
Clear filters Clear filters
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
@ -148,8 +150,8 @@
</button> </button>
</div> </div>
{% endif %} {% endif %}
<div class="domains__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0"> <div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domains__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domains__table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your registered domains</caption> <caption class="sr-only">Your registered domains</caption>
<thead> <thead>
<tr> <tr>
@ -172,11 +174,11 @@
</tbody> </tbody>
</table> </table>
<div <div
class="usa-sr-only usa-table__announcement-region" class="usa-sr-only usa-table__announcement-region" id="domains__usa-table__announcement-region"
aria-live="polite" aria-live="polite"
></div> ></div>
</div> </div>
<div class="domains__no-data display-none"> <div class="display-none" id="domains__no-data">
<p>You don't have any registered domains.</p> <p>You don't have any registered domains.</p>
<p class="maxw-none clearfix"> <p class="maxw-none clearfix">
<a href="https://get.gov/help/faq/#do-not-see-my-domain" class="float-right-tablet usa-link usa-link--icon" target="_blank"> <a href="https://get.gov/help/faq/#do-not-see-my-domain" class="float-right-tablet usa-link usa-link--icon" target="_blank">
@ -187,15 +189,15 @@
</a> </a>
</p> </p>
</div> </div>
<div class="domains__no-search-results display-none"> <div class="display-none" id="domains__no-search-results">
<p>No results found</p> <p>No results found</p>
</div> </div>
</section> </section>
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination"> <nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination">
<span class="usa-pagination__counter text-base-dark padding-left-2 margin-bottom-1"> <span class="usa-pagination__counter text-base-dark padding-left-2 margin-bottom-1">
<!-- Count will be dynamically populated by JS --> <!-- Count will be dynamically populated by JS -->
</span> </span>
<ul class="usa-pagination__list"> <ul class="usa-pagination__list">
<!-- Pagination links will be dynamically populated by JS --> <!-- Pagination links will be dynamically populated by JS -->
</ul> </ul>
</nav> </nav>

21
src/registrar/templates/includes/member_domains_table.html
View file

@ -40,13 +40,15 @@
<section aria-label="Members search component" class="margin-top-2"> <section aria-label="Members search component" class="margin-top-2">
<form class="usa-search usa-search--show-label" method="POST" role="search"> <form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %} {% csrf_token %}
<label class="usa-label display-block margin-bottom-05" for="member-domains__search-field">
{% if has_edit_members_portfolio_permission %} {% if has_edit_members_portfolio_permission %}
<label class="usa-label display-block" for="member-domains__search-field">Search all domains</label> Search all domains
{% else %} {% else %}
<label class="usa-label display-block" for="member-domains__search-field">Search domains assigned to ovietta.evans@gsa.gov</label> Search domains assigned to ovietta.evans@gsa.gov
{% endif %} {% endif %}
</label>
<div class="usa-search--show-label__input-wrapper"> <div class="usa-search--show-label__input-wrapper">
<button class="usa-button usa-button--unstyled margin-right-3 member-domains__reset-search display-none" type="button"> <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="member-domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use> <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg> </svg>
@ -56,7 +58,7 @@
class="usa-input" class="usa-input"
id="member-domains__search-field" id="member-domains__search-field"
type="search" type="search"
name="search" name="member-domains-search"
/> />
<button class="usa-button" type="submit" id="member-domains__search-field-submit"> <button class="usa-button" type="submit" id="member-domains__search-field-submit">
<span class="usa-search__submit-text">Search </span> <span class="usa-search__submit-text">Search </span>
@ -73,11 +75,12 @@
</div> </div>
<!-- ---------- MAIN TABLE ---------- --> <!-- ---------- MAIN TABLE ---------- -->
<div class="member-domains__table-wrapper display-none margin-top-0"> <div class="display-none margin-top-0" id="member-domains__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked member-domains__table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">member domains</caption> <caption class="sr-only">member domains</caption>
<thead> <thead>
<tr> <tr>
<!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
<th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th> <th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
</tr> </tr>
</thead> </thead>
@ -86,14 +89,14 @@
</tbody> </tbody>
</table> </table>
<div <div
class="usa-sr-only usa-table__announcement-region" class="usa-sr-only usa-table__announcement-region" id="member-domains__usa-table__announcement-region"
aria-live="polite" aria-live="polite"
></div> ></div>
</div> </div>
<div class="member-domains__no-data display-none"> <div class="display-none" id="member-domains__no-data">
<p>This member does not manage any domains. Click the Edit domain assignments buttons to assign domains.</p> <p>This member does not manage any domains. Click the Edit domain assignments buttons to assign domains.</p>
</div> </div>
<div class="member-domains__no-search-results display-none"> <div class="display-none" id="member-domains__no-search-results">
<p>No results found</p> <p>No results found</p>
</div> </div>
</section> </section>

14
src/registrar/templates/includes/members_table.html
View file

@ -12,7 +12,7 @@
<section aria-label="Members search component" class="margin-top-2"> <section aria-label="Members search component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 members__reset-search display-none" type="button"> <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use> <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg> </svg>
@ -23,7 +23,7 @@
class="usa-input" class="usa-input"
id="members__search-field" id="members__search-field"
type="search" type="search"
name="search" name="members-search"
placeholder="Search by member name" placeholder="Search by member name"
/> />
<button class="usa-button" type="submit" id="members__search-field-submit"> <button class="usa-button" type="submit" id="members__search-field-submit">
@ -39,8 +39,8 @@
</div> </div>
<!-- ---------- MAIN TABLE ---------- --> <!-- ---------- MAIN TABLE ---------- -->
<div class="members__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0"> <div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="members__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked members__table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your registered members</caption> <caption class="sr-only">Your registered members</caption>
<thead> <thead>
<tr> <tr>
@ -59,14 +59,14 @@
</tbody> </tbody>
</table> </table>
<div <div
class="usa-sr-only usa-table__announcement-region" class="usa-sr-only usa-table__announcement-region" id="members__usa-table__announcement-region"
aria-live="polite" aria-live="polite"
></div> ></div>
</div> </div>
<div class="members__no-data display-none"> <div class="display-none" id="members__no-data">
<p>You don't have any members.</p> <p>You don't have any members.</p>
</div> </div>
<div class="members__no-search-results display-none"> <div class="display-none" id="members__no-search-results">
<p>No results found</p> <p>No results found</p>
</div> </div>
</section> </section>