Merge pull request #216 from cisagov/160-213-accessibility-fixes

Issues 160, 213: Ignore GSC verification in pa11y, change btn type to submit for availability form
cisagov · Jan 30, 2024 · a246c65 · a246c65
2 parents 9c85411 + 5c9e37f
commit a246c65
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,13 @@ For more about the template and it's functionality see [here](https://github.com
 
 #### Run with 'clean' to force reset the assets
 
-`npm run dev:clean`
+If you are having issues with assets being locally cached/not updating:
+
+`npm run clean && npm run dev`
+
+### Run Pa11y
+
+`npm run pa11y`
 
 ## Adding new content and front matter
 You can create new pages by creating a new markdown file (.md) and adding “front matter” to the top of the markdown file. The front matter section starts and ends with three hyphens (---). It consists of key-value pairs that define some meta-data and options for the page. 

diff --git a/_includes/domain-search.html b/_includes/domain-search.html
@@ -5,6 +5,9 @@
 
 <script>
     function checkDomainAvailability() {
+        // Cancel the default action
+        event.preventDefault();
+
         const baseUrl = "https://manage.get.gov/api/v1/available/?domain="
 
         var requested_domain = document.getElementById('domain-input').value
@@ -54,28 +57,18 @@
     }
 
     function render_result(content, append = true){
-      document.getElementById('domain-available-message').innerHTML = (append == true) ? content : `<div></div>`;
+      document.getElementById('usa-search--domain_message').innerHTML = (append == true) ? content : `<div></div>`;
     }
-
-    document.addEventListener("keypress", function(event) {
-        // If the user presses the "Enter" key on the keyboard
-        if (event.key === "Enter") {
-            // Cancel the default action
-            event.preventDefault();
-            // Click the "check availability" button
-            document.getElementById("check-domain-availability-button").click();
-        }
-    });
 
 </script>
 
 <section class="usa-section domain-section padding-bottom-5 bg-accent-cool-lighter">
     <div class="grid-container">
-        <div class="domain-search-image">
+        <div class="domain-section__image">
             <h2>
                 Start your .gov domain search
             </h2>
-            <h3 class="domain-search-subtitle
+            <h3 class="domain-section__subtitle
             line-height-heading-3
             margin-top-0 margin-bottom-3
             text-normal"
@@ -86,24 +79,23 @@ <h2>
                     Read more about choosing your .gov domain.
                 </a>
             </h3>
-            <form class="usa-search domain-search domain-search-wrapper" role="search">
+            <form class="usa-search usa-search--domain" role="search">
                 <label class="usa-sr-only" for="domain-input">Search</label>
-                <div class="domain-search-input-wrapper">
-                <input 
-                    class="usa-input usagov-search-autocomplete" 
-                    id="domain-input"
-                    type="search" 
-                    name="query" 
-                    autocomplete="off"
-                    aria-label="Check Domain Name input"
-                    title="Check Domain input"
-                >
+                <div class="usa-search--domain__form-group">
+                    <input 
+                        class="usa-input usagov-search-autocomplete" 
+                        id="domain-input"
+                        type="search" 
+                        name="query" 
+                        autocomplete="off"
+                        aria-label="Check Domain Name input"
+                        title="Check Domain input"
+                    >
                     <span class="usa-search__submit-text">.gov</span>
                 </div>
                     <button 
-                    id="check-domain-availability-button"
-                    class="usa-button availability-button" 
-                    type="button"
+                    class="usa-button usa-search--domain__submit" 
+                    type="submit"
                     onclick="checkDomainAvailability()"
                     onsubmit="return false"
                     aria-label="Check availability of Domain Name"
@@ -112,7 +104,7 @@ <h2>
                         Check availability
                     </button>
             </form>
-            <div class="domain-alert" id="domain-available-message"></div>
+            <div class="usa-search--domain_message" id="usa-search--domain_message"></div>
         </div>
     </div>
 </section>
diff --git a/googlea7b9a2b812e0d81e.html b/googlea7b9a2b812e0d81e.html
diff --git a/pages/privacy-policy.md b/pages/privacy-policy.md
@@ -45,7 +45,7 @@ The information requested will be shared as a routine use to the Census Bureau a
 
 Providing this information is voluntary. However, failure to provide this information will prevent CISA from fulfilling your request for a .gov domain and supporting services.
 
-<a name="pra"></a> 
+<span id="pra"></span>
 ### PRA burden statement for the domain request form 
 
 The public reporting burden to complete this information collection is estimated at 15 minutes per response, including the time completing and reviewing the collected information. The collection of this information is voluntary. An agency may not conduct or sponsor, and a person is not required to respond to a collection of information unless it displays a currently valid OMB control number and expiration date. 

diff --git a/styles/_uswds-theme-custom-styles.scss b/styles/_uswds-theme-custom-styles.scss
@@ -230,43 +230,38 @@ HOME
 }
 
 // ## DOMAIN SEARCH ---------------------------------------
-.availability-button {
-  margin-right: 0;
+.usa-search--domain {
+  flex-direction: column;
+  gap: 16px;
+  line-height: 1;
+  font-size: 1rem;
+  align-items: center;
   @include at-media(mobile-lg) {
-    margin-left: units(2);
+    flex-direction: row;
   }
-  padding-right: 1rem;
-  padding-left: 1rem;
-  height: 2.25rem;
-  line-height: 0.5;
 }
 
-.domain-search-input-wrapper {
+.usa-search--domain__form-group {
   width: 100%;
   @include at-media(mobile-lg) {
     width: auto;
   }
 }
 
-.domain-search {
-  line-height: 1;
-  font-size: 1rem;
-  align-items: center;
-}
-
-.domain-search input {
+.usa-search--domain input {
   height: 2.125rem;
   @include at-media(mobile-lg) {
     width: 13.75rem;
   }
 }
 
-.domain-search input:not([disabled]):focus {
+.usa-search--domain input:not([disabled]):focus {
   outline: 0rem;
   border: 0.25rem solid #2491ff;
 }
 
-.domain-search span {
+// .gov
+.usa-search--domain span {
   display: flex;
   background-color: #AFD5E6;
   padding-left: 1rem;
@@ -279,22 +274,20 @@ HOME
   height: 2.125rem;
 }
 
-.domain-search-wrapper {
-  flex-direction: column;
-  gap: 16px;
-  @include at-media(mobile-lg) {
-    flex-direction: row;
-  }
-}
-
-.domain-search-heading {
+.usa-search .usa-search--domain__submit {
+  margin-right: 0;
   @include at-media(mobile-lg) {
-    max-width: 60%;
+    margin-left: units(2);
   }
-  font-size: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  height: 2.25rem;
+  line-height: 0.5;
+  border-bottom-left-radius: units(0.5);
+  border-top-left-radius: units(0.5);
 }
 
-.domain-search-image {
+.domain-section__image {
   @include at-media(mobile-lg) {
     background-image: url('../_img/dotgov_availability.svg');
     background-position: 100% 30%;
@@ -314,15 +307,15 @@ HOME
   margin-bottom: 0.75rem;
 }
 
-.domain-search-subtitle {
+.domain-section__subtitle {
   @include at-media(mobile-lg) {
     max-width: 50%;
   }
   font-size: 1.06rem;
   line-height: 1.59rem;
 }
 
-.domain-alert {
+.usa-search--domain_message {
   @include at-media(mobile-lg) {
     max-width: 50%;
   }
@@ -470,4 +463,3 @@ CHECKLIST
     padding-left: units(3);
   }
 }
-