Merge pull request #504 from GSA-TTS/LG-14588_update-axe-wcag-tags

LG-14588 Update Accessibility tests to include all base tests
GSA-TTS · Oct 28, 2024 · 0dc8d1b · 0dc8d1b
2 parents 30dbfc8 + 42070e9
commit 0dc8d1b
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 176 deletions.
diff --git a/_includes/accordion.html b/_includes/accordion.html
@@ -5,16 +5,15 @@
 - title
 - id
 {% endcomment %}
-<h4 class="usa-accordion__heading" id="{{ include.id }}">
+<dt class="usa-accordion__heading" id="{{ include.id }}">
     <button
       type="button"
       class="usa-accordion__button"
-      aria-expanded="false"
       aria-controls="{{ include.accordion_id }}"
     >
       {{ include.title }}
     </button>
-</h4>
-<div id="{{ include.accordion_id }}" class="usa-accordion__content usa-prose">
+</dt>
+<dd id="{{ include.accordion_id }}" class="usa-accordion__content usa-prose">
     {{ include.content | markdownify }}
-</div>
+</dd>
diff --git a/_includes/snippets/auth_content/service_levels.md b/_includes/snippets/auth_content/service_levels.md
@@ -4,7 +4,7 @@
 - **`http://idmanagement.gov/ns/assurance/ial/1`**
     Basic identity assurance, does not require identity verification (this is the most common value).
 - **`http://idmanagement.gov/ns/assurance/ial/2`**
-    Requires that the user has gone through identity verification<sup role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup>
+    Requires that the user has gone through identity verification<sup><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup>
 {% endcapture %}
 <div markdown="1">
 {{ type_of_service | markdownify }}

diff --git a/_includes/support/oidc.html b/_includes/support/oidc.html
@@ -1,27 +1,27 @@
 <div>
   <h3>OpenID Connect Errors</h3>
   <h4>Authorization</h4>
-  <div class="usa-accordion usa-accordion--bordered">
+  <dl class="usa-accordion usa-accordion--bordered">
     {% for error in site.data.errors.oidc.auth %}
       {% include accordion.html content=error.content accordion_id=error.accordion-id  title=error.title id=error.id %}
     {% endfor %}
-  </div>
+  </dl>
   <h4>Logout</h4>
-  <div class="usa-accordion usa-accordion--bordered">
+  <dl class="usa-accordion usa-accordion--bordered">
     {% for error in site.data.errors.oidc.logout %}
       {% include accordion.html content=error.content accordion_id=error.accordion-id  title=error.title id=error.id %}
     {% endfor %}
-  </div>
+  </dl>
   <h4>Token</h4>
-  <div class="usa-accordion usa-accordion--bordered">
+  <dl class="usa-accordion usa-accordion--bordered">
     {% for error in site.data.errors.oidc.token %}
       {% include accordion.html content=error.content accordion_id=error.accordion-id  title=error.title id=error.id %}
     {% endfor %}
-  </div>
+  </dl>
   <h4>Userinfo endpoint</h4>
-  <div class="usa-accordion usa-accordion--bordered">
+  <dl class="usa-accordion usa-accordion--bordered">
     {% for error in site.data.errors.oidc.userinfo %}
       {% include accordion.html content=error.content accordion_id=error.accordion-id  title=error.title id=error.id %}
     {% endfor %}
-  </div>
+  </dl>
 </div>
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -93,15 +93,15 @@
     <div class="usa-overlay"></div>
       <header class="usa-header usa-header--extended" role="banner">
           <div class="usa-navbar">
-            <div class="usa-logo" id="basic-logo">
+            <h1 class="usa-logo" id="basic-logo">
               <a href="{{ '/' | prepend: site.baseurl }}" title="Home" aria-label="Home">
                 <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
                   class="usa-logo__img"
                   alt="Login.gov"
                   role="img">
                 <em class="usa-logo__text">Developers</em>
               </a>
-            </div>
+            </h1>
             <section class="desktop:display-block mobile:display-none" aria-label="Search component">
               {% include search.html id="header-nav" %}
             </section>
@@ -116,7 +116,7 @@
               </button>
               <div class="usa-nav__secondary desktop:padding-right-2">
                 <section class="mobile:display-block desktop:display-none" aria-hidden="true">
-                  {% include search.html id="header-nav" %}
+                  {% include search.html id="header-nav-mobile" %}
                 </section>
               </div>
               <ul class="usa-nav__primary usa-accordion flex-justify">
@@ -132,19 +132,19 @@
               </ul>
             </div>
           </nav>
-      </header>
-      {% if page.lead %}
-      <header aria-label="hero" class="usa-dark-background usa-section usa-section--dark">
-          <div class="grid-container">
-            <div class="grid-row">
-              <div class="grid-col-9 grid-offset-2">
-                    <h1 class="usa-display">{{ page.title }}</h1>
-                    <div class="usa-intro">{{ page.lead | markdownify }}</div>
+          {% if page.lead %}
+          <div aria-label="hero" class="usa-dark-background usa-section usa-section--dark">
+              <div class="grid-container">
+                <div class="grid-row">
+                  <div class="grid-col-9 grid-offset-2">
+                        <h1 class="usa-display">{{ page.title }}</h1>
+                        <div class="usa-intro">{{ page.lead | markdownify }}</div>
+                  </div>
+                </div>
               </div>
-            </div>
           </div>
+          {% endif %}
       </header>
-      {% endif %}
 
     {{ content }}
 

diff --git a/_pages/oidc/authorization.md b/_pages/oidc/authorization.md
@@ -119,18 +119,18 @@ In an **unsuccessful authorization**, the URI will contain the parameters `error
       <h4 id="acr_values" class="parameters">acr_values</h4>
     </div>
     <div class="grid-col-7">
-        The Authentication Context Class Reference requests can be used to specify the type of service level<sup role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup> or the AAL (Authentication Assurance Level) for the user. These and the <code class="language-plaintext highlighter-rouge">scope</code> determine which <a class="usa-link" href="{{ '/attributes/' | prepend: site.baseurl }}">user attributes</a> will be available in the <a class="usa-link" href="{{ '/oidc/user-info/#user-info-response' | prepend: site.baseurl }}">user info response</a>.
+        The Authentication Context Class Reference requests can be used to specify the type of service level<sup><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup> or the AAL (Authentication Assurance Level) for the user. These and the <code class="language-plaintext highlighter-rouge">scope</code> determine which <a class="usa-link" href="{{ '/attributes/' | prepend: site.baseurl }}">user attributes</a> will be available in the <a class="usa-link" href="{{ '/oidc/user-info/#user-info-response' | prepend: site.baseurl }}">user info response</a>.
       <p>
         Multiple values can be joined with a space (before being URI-escaped in the final URL).
       </p>
     </div>
   </div>
   <div class="grid-row dev-doc-row">
-      <div class="usa-accordion">
+      <dl class="usa-accordion">
         {% include accordion.html content=service_levels accordion_id="service_level_accordion"  title="Type of Service Level" id="service_level" %}
         {% include accordion.html content=aal_values accordion_id="aal_accordion" title="Authentication Assurance (AAL) Values" id="aal_values" %}
         {% include accordion.html content=loa_values accordion_id="loa_accordion" title="Level of Assurance (LOA) Values (Deprecated)" id="loa_values" %}
-      </div>
+      </dl>
     </div>
     <div class="grid-row dev-doc-row">
       <div class="grid-col-5">
@@ -150,9 +150,9 @@ In an **unsuccessful authorization**, the URI will contain the parameters `error
         </div>
       </div>
       <div class="grid-row">
-        <div class="usa-accordion padding-top-2">
+        <dl class="usa-accordion padding-top-2">
             {% include accordion.html content=code_challenge accordion_id="code_challenge_accordion" title="Code Challenge Example" id="code_challenge" %}
-        </div>
+        </dl>
       </div>
     </div>
     <div class="dev-doc-row pkce-only" hidden>
@@ -199,9 +199,9 @@ In an **unsuccessful authorization**, the URI will contain the parameters `error
         </div>
       </div>
       <div class="grid-row">
-        <div class="usa-accordion padding-top-2">
+        <dl class="usa-accordion padding-top-2">
           {% include accordion.html content=scope_possible_values accordion_id="scope_accordion" id="scope_possible_values" title="Possible Values" %}
-        </div>
+        </dl>
       </div>
     </div>
     <div class="dev-doc-row">

diff --git a/_pages/saml/authentication.md b/_pages/saml/authentication.md
@@ -31,7 +31,7 @@ sidenav:
 `<samlp:AuthnRequest>:SAML_REQUEST = urlEncode(base64(deflate(payload)))`
 {% endcapture %}
 {% capture saml_tag %}
-The `<saml:AuthnContextClassRef>` tags (nested under `//samlp:AuthnRequest/samlp:RequestedAuthnContext/`) specify the type of identity verification<sup role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup>, AAL (Authentication Assurance Level) and attributes requested.
+The `<saml:AuthnContextClassRef>` tags (nested under `//samlp:AuthnRequest/samlp:RequestedAuthnContext/`) specify the type of identity verification<sup><a href="#fn:1" class="footnote" rel="footnote">&#42;</a></sup>, AAL (Authentication Assurance Level) and attributes requested.
 {% endcapture %}
 {% capture attributes %}
 To request specific attributes, list them (comma-separated) as the query parameter for `http://idmanagement.gov/ns/requested_attributes?ReqAttr=`. See the [user attributes]({{ '/attributes/' | prepend: site.baseurl }}) for the list of attributes that can be requested.
@@ -68,12 +68,12 @@ A proofed identity request at AAL2, with phishing resistent MFA, for email, phon
                     {{ saml_tag | markdownify }}
                 </div>
             </div>
-            <div class="usa-accordion">
+            <dl class="usa-accordion">
                 {% include accordion.html content=service_levels accordion_id="service_level_accordion"  title="Type of Service Level" id="service_level" %}
                 {% include accordion.html content=aal_values accordion_id="aal_accordion" title="Authentication Assurance (AAL) Values" id="aal_values" %}
                 {% include accordion.html content=attributes accordion_id="attributes_accordion" title="Attributes" id="attributes" %}
                 {% include accordion.html content=loa_values accordion_id="loa_accordion" title="Level of Assurance (LOA) Values (Deprecated)" id="loa_values" %}
-            </div>
+            </dl>
         </div>
         <div class="dev-doc-row">
             <div class="grid-row">