Merge pull request #3560 from cisagov/nl/2855-add-searchbar-visible-labels

#2855 - Update search bar with visible label for org and non-org [-NL]

src/registrar/assets/src/sass/_theme/_base.scss

@@ -99,9 +99,7 @@ body {
     }
     .section-outlined__search {
       flex-grow: 4;
-      // Align right
       max-width: 383px;
-      margin-left: auto;
     }
   }
 }

src/registrar/templates/home.html

@@ -15,14 +15,14 @@
       {% include "includes/form_messages.html" %}
     {% endblock %}
   
-    <h1>Manage your domains</h1>
-
-    <p class="margin-top-4">
-      <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
-      >
+    <div class="grid-row margin-bottom-3">
+      <h1 class="flex-fill">Manage your domains</h1>
+      <div>
+        <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link">
           Start a new domain request
         </button>
-    </p>
+      </div>
+    </div>
 
     {% include "includes/domains_table.html" with user_domain_count=user_domain_count %}
     {% include "includes/domain_requests_table.html" %}

src/registrar/templates/includes/domain_requests_table.html

@@ -4,49 +4,20 @@
 {% url 'get_domain_requests_json' as url %}
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
-<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
-    <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
+<section class="section-outlined domain-requests {% if portfolio %}margin-top-0 section-outlined--border-base-light{% endif %}" id="domain-requests">
+    <div class="section-outlined__header margin-bottom-3 grid-row">
         {% if not portfolio %}
-            <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
+        <div class="grid-row grid-col-12">
+            <h2 id="domain-requests-header" class="display-inline-block flex-fill">Domain requests</h2>
+        </div>
         {% else %}
         <!-- Embedding the portfolio value in a data attribute -->
         <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="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" 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>                
-                    <input
-                        class="usa-input"
-                        id="domain-requests__search-field"
-                        type="search"
-                        name="domain-requests-search"
-                        {% if portfolio %}
-                        placeholder="Search by domain name or creator"
-                        {% else %}
-                        placeholder="Search by domain name"
-                        {% endif %}
-                        aria-labelledby="domain-requests-search-component"
-                    />
-                    <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"
-                            alt="Search"
-                        />
-                    </button>
-                </form>
-            </section>
-        </div>
-
+        <!-- ---------- SEARCH ---------- -->
+        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_name="domain-requests" aria_label_text="Domain requests search component"%}
+            {% include "includes/search.html" %}
+        {% endwith %}
     </div>
 
     {% if portfolio %}

src/registrar/templates/includes/domains_table.html

@@ -26,56 +26,32 @@
 {% endif %}
 
 <section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
-  <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
+  <div class="section-outlined__header margin-bottom-3 grid-row">
     {% if not portfolio %}
-      <h2 id="domains-header" class="display-inline-block">Domains</h2>
+      <div class="grid-row grid-col-12">
+        <h2 id="domains-header" class="display-inline-block flex-fill">Domains</h2>
+        <!-- ---------- EXPORT (non-org placement) ---------- -->
+        {% if user_domain_count and user_domain_count > 0 %}
+          {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+              {% include "includes/export.html" %}
+          {% endwith %}
+        {% endif %}
+      </div>
     {% else %}
       <!-- Embedding the portfolio value in a data attribute -->
       <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" 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" 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>
-          <input
-            class="usa-input"
-            id="domains__search-field"
-            type="search"
-            name="domains-search"
-            placeholder="Search by domain name"
-            aria-labelledby="domains-search-component"
-          />
-          <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"
-              alt="Search"
-            />
-          </button>
-        </form>
-      </section>
-    </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" 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
-        </button>
-      </section>
-    </div>
+    <!-- ---------- SEARCH ---------- -->
+    {% with label_text="Search by domain name" item_name="domains" aria_label_text="Domains search component"%}
+      {% include "includes/search.html" %}
+    {% endwith %}
+    <!-- ---------- EXPORT (org placement) ---------- -->
+    {% if user_domain_count and user_domain_count > 0 and portfolio%}
+      {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+          {% include "includes/export.html" %}
+      {% endwith %}
     {% endif %}
   </div>
-
   <!-- Non org model banner -->
   {% if num_expiring_domains > 0 and not portfolio %}
   <section class="usa-site-alert--slim usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">

src/registrar/templates/includes/export.html

@@ -0,0 +1,12 @@
+{% load static %}
+<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} flex-auto desktop:padding-left-3{% endif %} margin-top-0">
+    <section aria-label="{{export_aria}}" class="margin-top-205">
+        <button data-href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right use-button-as-link">
+            <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
+        </button>
+    </section>
+</div>
+
+    

src/registrar/templates/includes/members_table.html

@@ -8,45 +8,12 @@
 <section class="section-outlined members margin-top-0 section-outlined--border-base-light" id="members">
   <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" 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" 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>
-            <input
-              class="usa-input"
-              id="members__search-field"
-              type="search"
-              name="members-search"
-              placeholder="Search by member name"
-              aria-labelledby="members-search-component"
-            />
-            <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"
-                alt="Search"
-              />
-            </button>
-          </form>
-        </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="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
-          </button>
-        </section>
-      </div>
+    {% with label_text="Search by member name" item_name="members" aria_label_text="Members search component"%}
+        {% include "includes/search.html" %}
+    {% endwith %}
+    {% with export_aria="Members report component" export_url='export_members_portfolio' %}
+        {% include "includes/export.html" %}
+    {% endwith %}
   </div>
 
     <!-- ---------- MAIN TABLE ---------- -->

src/registrar/templates/includes/search.html

@@ -1,26 +1,28 @@
 {% load static %}
 
-<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
+<div class="section-outlined__search tablet:grid-col">
     <section aria-label="{{aria_label_text}}">
-        <form class="usa-search usa-search--show-label" method="POST" role="search">
+        <form class="usa-search {% if use_search_icon %} usa-search--small {% else %} usa-search--default {% endif %}usa-search--show-label" method="POST" role="search">
             {% csrf_token %}
-            <label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
+            <label id="{{item_name}}__search-label" class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_name}}__search-field">
                 {{ label_text }}
             </label> 
-            <div class="usa-search--show-label__input-wrapper flex-align-self-end">
+            <div class="usa-search--show-label__input-wrapper">
                 <input
                 class="usa-input minw-15"
                 id="{{item_name}}__search-field"
                 type="search"
                 name="{{item_name}}-search"
                 />
-                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
-                    <span class="usa-search__submit-text">Search </span>
+                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_name}}__search-label">
                     <img
                         src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                         class="usa-search__submit-icon"
                         alt="Search"
                     />
+                    {% if not use_search_icon %} 
+                    <span class="usa-search__submit-text">Search </span>
+                    {% endif %}
                 </button>
                 <button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
                     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">

src/registrar/templates/portfolio_requests.html

@@ -16,15 +16,14 @@
 {% endblock messages%}
 
 <div id="main-content">
+    <div class="grid-row grid-gap margin-bottom-3">
+        <div class="mobile:grid-col-12 tablet:grid-col-6"> 
             <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
-    <div class="grid-row grid-gap">
+                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+        </div>
        
         {% if has_edit_request_portfolio_permission %}
             <div class="mobile:grid-col-12 tablet:grid-col-6">
-                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
-            </div>
-            <div class="mobile:grid-col-12 tablet:grid-col-6">
- 
                 <p class="float-right-tablet tablet:margin-y-0">
                     <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
                     >
@@ -32,12 +31,11 @@
                     </button>
                 </p>
             </div>
-        {% else %}
-            <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
         {% endif %}
     </div>
 
     
+    
     {% include "includes/domain_requests_table.html" with portfolio=portfolio %}
 </div>
 {% endblock %}