18F · slj · Jul 6, 2020 · Jul 6, 2020 · Jul 6, 2020
diff --git a/Gemfile b/Gemfile
@@ -69,6 +69,7 @@ group :development, :test do
 end
 
 group :test do
+  gem 'axe-matchers'
   gem 'capybara-selenium'
   gem 'climate_control'
   gem 'codeclimate-test-reporter', require: nil

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -116,6 +116,13 @@ GEM
       aws-sigv4 (~> 1.1)
     aws-sigv4 (1.1.1)
       aws-eventstream (~> 1.0, >= 1.0.2)
+    axe-matchers (2.6.0)
+      dumb_delegator (~> 0.8)
+      virtus (~> 1.0)
+    axiom-types (0.1.1)
+      descendants_tracker (~> 0.0.4)
+      ice_nine (~> 0.11.0)
+      thread_safe (~> 0.3, >= 0.3.1)
     bcrypt (3.1.13)
     better_errors (2.5.1)
       coderay (>= 1.0.0)
@@ -166,13 +173,17 @@ GEM
     codeclimate-test-reporter (1.0.8)
       simplecov (<= 0.13)
     coderay (1.1.2)
+    coercible (1.0.0)
+      descendants_tracker (~> 0.0.1)
     colorize (0.8.1)
     concurrent-ruby (1.1.6)
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
     crass (1.0.6)
     database_cleaner (1.7.0)
     debug_inspector (0.0.3)
+    descendants_tracker (0.0.4)
+      thread_safe (~> 0.3, >= 0.3.1)
     devise (4.7.1)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -187,11 +198,13 @@ GEM
     dotenv-rails (2.7.5)
       dotenv (= 2.7.5)
       railties (>= 3.2, < 6.1)
+    dumb_delegator (0.8.1)
     easy_translate (0.5.1)
       thread
       thread_safe
     enum_help (0.0.17)
       activesupport (>= 3.0.0)
+    equalizer (0.0.11)
     erubi (1.9.0)
     execjs (2.7.0)
     factory_bot (4.11.1)
@@ -227,6 +240,7 @@ GEM
       parser (>= 2.2.3.0)
       rainbow (>= 2.2.2, < 4.0)
       terminal-table (>= 1.5.1)
+    ice_nine (0.11.2)
     jmespath (1.4.0)
     jquery-rails (4.3.5)
       rails-dom-testing (>= 1, < 3)
@@ -465,6 +479,11 @@ GEM
     useragent (0.16.10)
     uuid (2.3.8)
       macaddr (~> 1.0)
+    virtus (1.0.5)
+      axiom-types (~> 0.1)
+      coercible (~> 1.0)
+      descendants_tracker (~> 0.0, >= 0.0.3)
+      equalizer (~> 0.0, >= 0.0.9)
     warden (1.2.8)
       rack (>= 2.0.6)
     web-console (3.7.0)
@@ -499,6 +518,7 @@ DEPENDENCIES
   acts_as_paranoid
   autoprefixer-rails (~> 9.6)
   aws-sdk-s3
+  axe-matchers
   better_errors
   binding_of_caller
   bullet

diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
@@ -28,10 +28,20 @@ $image-path: 'img';
   padding: 9px 20px;
 }
 
+.lg-card {
+  h2 {
+    margin-top: 0;
+  }
+}
+
 .usa-label {
   color: map-get($site-palette, 'site-dark-grey');
 }
 
+.usa-alertx {
+  margin-bottom: 1em;
+}
+
 .usa-navbar .usa-logo {
   a {
     display: flex;

diff --git a/app/helpers/service_provider_helper.rb b/app/helpers/service_provider_helper.rb
@@ -78,6 +78,11 @@ def yamlized_sp(service_provider)
     yamlable_json.to_yaml.delete('\"')
   end
 
+  def sp_active_img_alt(service_provider_is_active)
+    return 'Active service provider' if service_provider_is_active
+    'Inactive service provider'
+  end
+
   private
 
   def config_hash(service_provider)

diff --git a/app/views/emails/index.html.erb b/app/views/emails/index.html.erb
@@ -1,4 +1,4 @@
-<div class="usa-display">Emails</div>
+<h1 class="usa-display">Emails</h1>
 
 <table class="usa-table">
   <thead>

diff --git a/app/views/env/index.html.erb b/app/views/env/index.html.erb
@@ -1,4 +1,4 @@
-<div class="usa-display">Environments status</div>
+<h1 class="usa-display">Environments status</h1>
 <% @deploy_statuses.each do |environment| %>
 
   <h2>

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,8 +1,8 @@
-<div class="usa-prose">
 <% unless user_signed_in? %>
-  <p class="usa-intro">
+  <h1 class="usa-display">
     <%= t 'home.body_intro' %>
-  </p>
+  </h1>
+  <div class="usa-prose">
   <p>
     <%= t 'home.body_dev_docs_html',
         href_dev_docs: link_to(t('home.dev_docs_link'), 'https://developers.login.gov') %>
@@ -11,5 +11,5 @@
     <%= t 'home.body_partners_html',
         href_partners: link_to(t('home.partners_link'), 'https://login.gov/partners') %>
   </p>
-<% end %>
 </div>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -36,9 +36,9 @@
   <body>
     <a class="usa-skipnav" href="#main-content">Skip to main content</a>
 
-    <div class="usa-banner">
+    <header class="usa-banner">
       <div class="usa-accordion">
-        <header class="usa-banner__header">
+        <div class="usa-banner__header">
           <div class="usa-banner__inner">
             <div class="grid-col-auto">
               <%= image_tag 'img/us_flag_small.png', class: 'usa-banner__header-flag', alt: 'U.S. flag' %>
@@ -52,7 +52,7 @@
               <span class="usa-banner__button-text">Here’s how you know</span>
             </button>
           </div>
-        </header>
+        </div>
         <div class="usa-banner__content usa-accordion__content" id="gov-banner" hidden>
           <div class="grid-row grid-gap-lg">
             <div class="usa-banner__guidance tablet:grid-col-6">
@@ -78,9 +78,9 @@
           </div>
         </div>
       </div>
-    </div>
+    </header>
 
-    <header class="usa-header usa-header--basic" role="banner">
+    <nav class="usa-header usa-header--basic">
       <div class="usa-nav-container">
         <div class="usa-navbar">
           <div class="usa-logo" id="basic-logo">
@@ -90,7 +90,7 @@
           </div>
           <button class="usa-menu-btn">Menu</button>
         </div>
-        <nav role="navigation" class="usa-nav">
+        <div class="usa-nav">
           <button class="usa-nav__close">
             <%= image_tag 'img/close.svg', alt: 'Close' %>
           </button>
@@ -139,9 +139,9 @@
               </li>
             <% end %>
           </ul>
-        </nav>
+        </div>
       </div>
-    </header>
+    </nav>
 
     <div class="usa-overlay"></div>
 

diff --git a/app/views/service_providers/all.html.erb b/app/views/service_providers/all.html.erb
@@ -1,9 +1,8 @@
 
-<div class="usa-display">Apps</div>
+<h1 class="usa-display">Apps</h1>
 
 <%= button_to t('forms.buttons.trigger_idp_refresh'), api_service_providers_path, method: :post, :class => "usa-button" %>
 
-
 <table class="usa-table">
   <thead>
     <tr>

diff --git a/app/views/service_providers/edit.html.erb b/app/views/service_providers/edit.html.erb
@@ -1,5 +1,5 @@
 
-<div class="usa-display">Editing "<%= service_provider.friendly_name %>"</div>
+<h1 class="usa-display">Editing "<%= service_provider.friendly_name %>"</h1>
 
 <%= simple_form_for(service_provider, html: { autocomplete: 'off', role: 'form', class: 'service-provider-form usa-form usa-form--large' }) do |form| %>
   <% selected_team = @service_provider.group_id %>

diff --git a/app/views/service_providers/index.html.erb b/app/views/service_providers/index.html.erb
@@ -1,4 +1,4 @@
-<div class="usa-display">My apps</div>
+<h1 class="usa-display">My apps</h1>
 
 <%= button_to t('headings.service_providers.new_app'), new_service_provider_path, method: :get, :class => "usa-button" %>
 

diff --git a/app/views/service_providers/new.html.erb b/app/views/service_providers/new.html.erb
@@ -1,7 +1,5 @@
 
-<div class="usa-display">New test app</div>
-
-
+<h1 class="usa-display">New test app</h1>
 
 <%= simple_form_for(@service_provider, html: { autocomplete: 'off', role: 'form', class: 'service-provider-form usa-form usa-form--large' }) do |form| %>
   <%= render 'form', form: form %>

diff --git a/app/views/service_providers/show.html.erb b/app/views/service_providers/show.html.erb
@@ -1,37 +1,37 @@
 <%= link_to 'Back to apps', '/service_providers', :class => 'usa-link' %>
 
 
-<div class="usa-display">Details for "<%= service_provider.friendly_name %>"</div>
+<h1 class="usa-display">Details for "<%= service_provider.friendly_name %>"</h1>
 
-<h4><label for="name">Friendly name:</label></h4>
+<h2><label for="name">Friendly name:</label></h2>
 <p class="font-mono-xs margin-top-0" name="name"><%= service_provider.friendly_name %></p>
 
-<h4><label for="description">Description:</label></h4>
+<h2><label for="description">Description:</label></h2>
 <p class="font-mono-xs margin-top-0" name="description"><%= service_provider.description %></p>
 
-<h4><label for="agency">Agency:</label></h4>
+<h2><label for="agency">Agency:</label></h2>
 <p class="font-mono-xs margin-top-0" name="agency"><%= service_provider&.agency&.name %></p>
 
-<h4><label for="team">Team:</label></h4>
+<h2><label for="team">Team:</label></h2>
 <p class="font-mono-xs margin-top-0" name="agency"><%= service_provider.team %></p>
 
-<h4><label for="identity_protocol">Identity protocol:</label></h4>
+<h2><label for="identity_protocol">Identity protocol:</label></h2>
 <p class="font-mono-xs margin-top-0" name="identity_protocol"><%= service_provider.identity_protocol %></p>
 
-<h4><label for="ial_friendly">Identity verification level (IAL):</label></h4>
+<h2><label for="ial_friendly">Identity verification level (IAL):</label></h2>
 <p class="font-mono-xs margin-top-0" name="ial_friendly"><%= service_provider.ial_friendly %></p>
 
-<h4><label for="issuer">Issuer:</label></h4>
+<h2><label for="issuer">Issuer:</label></h2>
 <p class="font-mono-xs margin-top-0" name="issuer"><%=  service_provider.issuer %></p>
 
     <% if current_user.admin? %>
-      <h4><label for="production_issuer">Production Issuer:</label></h4>
+      <h2><label for="production_issuer">Production Issuer:</label></h2>
       <p class="font-mono-xs margin-top-0" name="production_issuer"><%=  service_provider.production_issuer %></p>
     <% end %>
 
 <%# Temp hack to allow feature in dev but not int for testing %>
 <% if Figaro.env.logo_upload_enabled == 'true' %>
-  <h4><label for="logo_file">Uploaded Logo:</label></h4>
+  <h2><label for="logo_file">Uploaded Logo:</label></h2>
   <% if service_provider.logo_file.attached? %>
     <p class="font-mono-xs margin-top-0" name="logo_file">
       <%= image_tag url_for(service_provider.logo_file), height: "120px" %>
@@ -42,61 +42,66 @@
     </p>
   <% end %>
 <% else %>
-  <h4><label for="logo">Logo:</label></h4>
+  <h2><label for="logo">Logo:</label></h2>
+  <% if service_provider.logo %>
   <p class="font-mono-xs margin-top-0" name="logo">
     <a href="https://github.com/18F/identity-idp/tree/master/app/assets/images/sp-logos/<%= service_provider.logo %>" class="usa-link">
       <%= service_provider.logo %>
     </a>
   </p>
+  <% end %>
 <% end %>
 
     <% if service_provider.identity_protocol == 'saml' %>
-    <h4><label for="acs_url">Assertion Consumer Service URL:</label></h4>
+    <h2><label for="acs_url">Assertion Consumer Service URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="acs_url"><%= service_provider.acs_url %></p>
 
-<h4><label for="assertion_consumer_logout_service_url">Assertion Consumer Logout Service URL:</label></h4>
+<h2><label for="assertion_consumer_logout_service_url">Assertion Consumer Logout Service URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="assertion_consumer_logout_service_url"><%= service_provider.assertion_consumer_logout_service_url %></p>
 
-<h4><label for="assertion_consumer_logout_service_url">SP Initiated Login URL:</label></h4>
+<h2><label for="assertion_consumer_logout_service_url">SP Initiated Login URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="assertion_consumer_logout_service_url"><%= service_provider.sp_initiated_login_url %></p>
 
-<h4><label for="block_encryption">SAML Assertion Encryption:</label></h4>
+<h2><label for="block_encryption">SAML Assertion Encryption:</label></h2>
 <p class="font-mono-xs margin-top-0" name="block_encryption"><%= service_provider.block_encryption %></p>
     <% end %>
 
 
-<h4><label for="saml_client_cert">Public certificate:</label></h4>
+<h2><label for="saml_client_cert">Public certificate:</label></h2>
 <pre><code><%= service_provider.saml_client_cert %></code></pre>
         <% unless service_provider.saml_client_cert.blank? %>
         <p class="font-mono-xs margin-top-0" name="saml_client_cert">Expires:
         <%= render partial: 'certificate_expiration', locals: { app: service_provider } %></p>
         <% end %>
 
-<h4><label for="return_to_sp_url">Return to App URL:</label></h4>
+<h2><label for="return_to_sp_url">Return to App URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="return_to_sp_url"><%= service_provider.return_to_sp_url %></p>
 
-<h4><label for="failure_to_proof_url">Failure to Proof URL:</label></h4>
+<h2><label for="failure_to_proof_url">Failure to Proof URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="failure_to_proof_url"><%= service_provider.failure_to_proof_url %></p>
 
-<h4><label for="push_notification_url">Push Notification URL:</label></h4>
+<h2><label for="push_notification_url">Push Notification URL:</label></h2>
 <p class="font-mono-xs margin-top-0" name="push_notification_url"><%= service_provider.push_notification_url %></p>
 
     <% if service_provider.identity_protocol == 'openid_connect' %>
-        <h4><label for="uris">Redirect URIs</label></h4>
+        <h2><label for="uris">Redirect URIs</label></h2>
     <% end %>
     <% if service_provider.identity_protocol == 'saml' %>
-        <h4><label for="uris">Additional Redirect URIs</label></h4>
+        <h2><label for="uris">Additional Redirect URIs</label></h2>
     <% end %>
     <p class="font-mono-xs margin-top-0" name="uris"><%= (service_provider.redirect_uris || []).sort.join('<br>').html_safe %></p>
 
-<h4><label for="attribute_bundle">Attribute bundle:</label></h4>
+<h2><label for="attribute_bundle">Attribute bundle:</label></h2>
 <p class="font-mono-xs margin-top-0" name="attribute_bundle"><%= (service_provider.attribute_bundle || []).sort.join(', ') %></p>
 
-<h4><label for="active">Active</label></h4>
-<p class="font-mono-xs margin-top-0" name="active"><%= image_tag service_provider.active? ? 'img/alerts/success.svg' : 'img/alerts/error.svg', height: '27', width: '27', :class =>'margin-bottom-neg-105' %></p>
+<h2><label for="active">Active</label></h2>
+<p class="font-mono-xs margin-top-0" name="active"><%= image_tag service_provider.active? ? 'img/alerts/success.svg' : 'img/alerts/error.svg',
+                                                                 height: '27', width: '27',
+                                                                 :class => 'margin-bottom-neg-105',
+                                                                 :alt => sp_active_img_alt(service_provider.active?) %></p>
 
 <% if current_user.admin? %>
-<h4><label for="service_provider_yaml">Service Provider config as YAML</label></h4>
+<h2><label for="service_provider_yaml">Service Provider config as YAML</label></h2>
 <p class="font-mono-xs margin-top-0" name="service_provider_yaml"><%= render 'service_provider_yaml' %></p>
     <%end %>
 

diff --git a/app/views/teams/_no_teams.html.erb b/app/views/teams/_no_teams.html.erb
@@ -2,7 +2,7 @@
 <div class='lg-card'>
   <div class='grid-row flex-row flex-align-end'>
     <div class='mobile-lg:grid-col-10'>
-      <h1 class='margin-bottom-05'>Create your first team</h1>
+      <h2 class='margin-bottom-05'>Create your first team</h2>
       <p class='margin-top-05'>Get started with the sandbox environment. Make a team for your integration project.</p>
     </div>
     <div class='mobile-lg:grid-col-2 text-right'>

diff --git a/app/views/teams/_teams_list.html.erb b/app/views/teams/_teams_list.html.erb
@@ -2,9 +2,9 @@
   <div class='lg-card margin-bottom-3'>
     <div class='grid-row flex-row flex-align-end'>
       <div class='mobile-lg:grid-col-10'>
-        <h1 class='margin-y-05'>
+        <h2 class='margin-y-05'>
           <%= link_to team.name, team_path(team), class: 'text-primary text-no-underline' %>
-        </h1>
+        </h2>
         <p class='margin-0'>
           <strong>Agency:</strong> <%= team&.agency&.name %>
         </p>

diff --git a/app/views/teams/all.html.erb b/app/views/teams/all.html.erb
@@ -1,4 +1,4 @@
-<div class="usa-display">All teams</div>
+<h1 class="usa-display">All teams</h1>
 
 <div>
   <% if @teams.count > 0 %>
@@ -15,7 +15,7 @@
     <div class='lg-card'>
       <div class='grid-row flex-row flex-align-end'>
         <div class='mobile-lg:grid-col-10'>
-          <h1 class='margin-bottom-05'>Create your first team</h1>
+          <h2 class='margin-bottom-05'>Create your first team</h2>
           <p class='margin-top-05'>Get started with the sandbox environment. Make a team for your integration project.</p>
         </div>
           <div class='mobile-lg:grid-col-2 text-right'>