LG-3221: Accessibility for IAL2 flow

app/presenters/failure_presenter.rb

@@ -4,17 +4,14 @@ class FailurePresenter
   STATE_CONFIG = {
     failure: {
       icon: 'alert/fail-x.svg',
-      alt_text: 'failure',
       color: 'red',
     },
     locked: {
       icon: 'alert/temp-lock.svg',
-      alt_text: 'locked',
       color: 'red',
     },
     warning: {
       icon: 'alert/warning-lg.svg',
-      alt_text: 'warning',
       color: 'yellow',
     },
   }.freeze

app/views/accounts/_event_item.html.erb

@@ -0,0 +1,13 @@
+<div class='p2 clearfix border-top'>
+  <div class='clearfix mxn1'>
+    <div class='sm-col sm-col-6 px1'>
+      <div class="bold truncate">
+        <%= event.event_type %>
+      </div>
+      <%= event.last_sign_in_location_and_ip %>
+    </div>
+    <div class='sm-col sm-col-6 px1 sm-right-align'>
+      <%=  local_time(event.happened_at, t('time.formats.event_timestamp')) %>
+    </div>
+  </div>
+</div>

app/views/accounts/_verified_account_badge.html.erb

@@ -0,0 +1,5 @@
+<span>
+  <%= image_tag asset_url('alert/success.svg'), width: 16,
+    class: 'mr1 align-middle', id: 'verified_account_badge', alt: '' %>
+  <%= t('headings.account.verified_account') %>
+</span>

app/views/events/show.html.erb

@@ -0,0 +1,20 @@
+<% content_for(:nav) do %>
+  <%= render 'accounts/nav_auth', greeting: @view_model.header_personalization %>
+<% end %>
+
+<% title t('titles.account') %>
+
+<h1 class='h3 center sm-left-align'>
+  <%= t('headings.account.account_history') %>
+</h1>
+<div class='mb3 profile-info-box'>
+  <div class='bg-lightest-blue pb1 pt1 px2 h6 caps clearfix'>
+    <%= @device.device_name %>
+    <%= image_tag asset_url('history.svg'), alt: '', width: 12, class: 'ml1' %>
+  </div>
+  <% @events.each do |event| %>
+    <%= render event.event_partial, event: event %>
+  <% end %>
+</div>
+
+<%= link_to cancel_link_text, account_path, class: 'h5' %>

app/views/idv/doc_auth/_back_of_state_id_image.html.erb

@@ -1,3 +1,3 @@
-<%= image_tag(asset_url('state-id-back.svg'), height: 140) %>
+<%= image_tag(asset_url('state-id-back.svg'), alt: '', height: 140) %>
 <br/>
 <br/>

app/views/idv/doc_auth/_front_of_state_id_image.html.erb

@@ -1,3 +1,3 @@
-<%= image_tag(asset_url('state-id-front.svg'), height: 140) %>
+<%= image_tag(asset_url('state-id-front.svg'), alt: '', height: 140) %>
 <br />
 <br />

app/views/idv/doc_auth/back_image.html.erb

@@ -5,7 +5,7 @@
 <%= render 'idv/doc_auth/back_of_state_id_image' %>
 
 <h1 class='h3 my0'>
-  <%= t('doc_auth.headings.upload_back') %>
+  <label for='doc_auth_image'><%= t('doc_auth.headings.upload_back') %></label>
 </h1>
 
 <%= accordion('totp-info', t('doc_auth.tips.title_html')) do %>

app/views/idv/doc_auth/doc_success.html.erb

@@ -1,6 +1,6 @@
 <% title t('doc_auth.titles.doc_auth') %>
 
-<%= image_tag(asset_url('state-id-confirm@3x.png'), width: 210) %>
+<%= image_tag(asset_url('state-id-confirm@3x.png'), alt: '', width: 210) %>
 
 <h1 class='h3 mb2 mt3 my0'>
   <%= t('doc_auth.forms.doc_success') %>

app/views/idv/doc_auth/front_image.html.erb

@@ -5,7 +5,7 @@
 <%= render 'idv/doc_auth/front_of_state_id_image' %>
 
 <h1 class='h3 my0'>
-  <%= t('doc_auth.headings.upload_front') %>
+  <label for='doc_auth_image'><%= t('doc_auth.headings.upload_front') %></label>
 </h1>
 
 <%= accordion('totp-info', t('doc_auth.tips.title_html')) do %>

app/views/idv/doc_auth/link_sent.html.erb

@@ -15,7 +15,7 @@
 
 <div class='clearfix mxn1'>
   <div class='sm-col sm-col-3 px1'>
-    <%= image_tag asset_url('idv/phone.png') %>
+    <%= image_tag asset_url('idv/phone.png'), alt: t('image_description.camera_mobile_phone') %>
   </div>
   <div class='sm-col sm-col-9 px1 h2 mb2 mt0 my0'>
     <p><%= t('doc_auth.info.link_sent').first %></p>

app/views/idv/doc_auth/upload.html.erb

@@ -24,8 +24,8 @@
 <div class='clearfix mt3 mb3'>
   <div class='sm-col sm-col-3'>
     <%= image_tag(
-      asset_url('idv/phone.png',
-      alt: t('image_description.camera_mobile_phone')),
+      asset_url('idv/phone.png'),
+      alt: t('image_description.camera_mobile_phone'),
       width: 80,
     ) %>
   </div>

app/views/shared/_failure.html.erb

@@ -1,6 +1,6 @@
 <% title presenter.title %>
 
-<%= image_tag(asset_url(presenter.state_icon), width: 54) %>
+<%= image_tag(asset_url(presenter.state_icon), alt: '', width: 54) %>
 
 <h1 class="h3 mb1 mt3 my0">
   <%= presenter.header %>

app/views/shared/_footer_lite.html.erb

@@ -0,0 +1,72 @@
+<%
+  show_language_dropdown = I18n.available_locales.count > 1
+  sanitized_requested_url = request.query_parameters.slice(:request_id)
+%>
+
+<footer class='footer bg-light-blue sm-bg-navy'>
+  <% if show_language_dropdown %>
+    <div class='sm-hide border-bottom'>
+      <div class='container cntnr-wide py1 px2 lg-px0 h5'>
+        <div class='i18n-mobile-toggle center'>
+          <%= link_to('#', class: 'block text-decoration-none blue fs-13p', 'aria-expanded': 'false') do %>
+            <%= image_tag asset_url('globe-blue.svg'), width: 12, class: 'mr1', alt: '',
+              'aria-hidden': 'true' %><%= t('i18n.language') %><span class='caret inline-block ml-tiny' aria-hidden='true'>&#9662;</span>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    <div class='i18n-mobile-dropdown sm-hide display-none'>
+      <ul class='list-reset mb0 white center'>
+        <%  I18n.available_locales.each do |locale| %>
+          <li class='border-bottom'>
+            <%= link_to t("i18n.locale.#{locale}"), sanitized_requested_url.merge(locale: locale), class: 'block py-12p px2 text-decoration-none blue fs-13p'%>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+  <div class='container py1 px2 lg-px0 <%= 'sm-py0' if show_language_dropdown %>'>
+    <div class='flex flex-center'>
+      <div class='flex flex-auto flex-first'>
+        <%= link_to('https://gsa.gov', class: 'flex flex-center text-decoration-none white h6', target: '_blank', 'aria-label': t('shared.footer_lite.gsa')) do %>
+          <%= image_tag asset_url('sp-logos/square-gsa.svg'),
+            width: 20, class: 'mr1 sm-show', alt: '' %>
+          <%= image_tag asset_url('sp-logos/square-gsa-dark.svg'),
+            width: 20, class: 'mr1 sm-hide', alt: '' %>
+          <span class='sm-show'>
+            <%= t('shared.footer_lite.gsa') %>
+          </span>
+        <% end %>
+      </div>
+      <div class='flex flex-center'>
+        <% if show_language_dropdown %>
+          <ul class='list-reset sm-show mb0'>
+            <li class='i18n-desktop-toggle flex my1 mx3 relative'>
+              <%= link_to '#', class: 'white text-decoration-none border border-blue rounded-lg px1 py-tiny', 'aria-expanded': 'false' do %>
+                <%= image_tag asset_url('globe-white.svg'), width: 12, class: 'mr1', alt: '',
+                  'aria-hidden': 'true' %>
+                <%= t('i18n.language') %>
+                <span class='caret inline-block ml-tiny' aria-hidden='true'>&#9662;</span>
+              <% end %>
+              <ul class="i18n-desktop-dropdown list-reset mb0 white display-none">
+                <% I18n.available_locales.each do |locale| %>
+                  <li class='border-bottom border-navy'>
+                    <%= link_to t("i18n.locale.#{locale}"),
+                      sanitized_requested_url.merge(locale: locale),
+                      class: 'block pl-24p py2 text-decoration-none white' %>
+                  </li>
+                <% end %>
+              </ul>
+            </li>
+          </ul>
+        <% end %>
+        <%= link_to t('links.help'), MarketingSite.help_url,
+          class: 'caps h6 blue sm-white text-decoration-none mr3', target: '_blank' %>
+        <%= link_to t('links.contact'), MarketingSite.contact_url,
+          class: 'caps h6 blue sm-white text-decoration-none mr3', target: '_blank' %>
+        <%= link_to t('links.privacy_policy'), MarketingSite.privacy_url,
+          class: 'caps h6 blue sm-white text-decoration-none', target: '_blank' %>
+      </div>
+    </div>
+  </div>
+</footer>

app/views/users/delete/show.html.erb

@@ -1,7 +1,7 @@
 <div class="p0 cntnr-xxskinny border-box bg-white rounded-xxl modal-warning">
-  <h2 class="my2 fs-20p sans-serif regular center">
+  <h1 class="my2 fs-20p sans-serif regular center">
     <%= t('users.delete.heading') %>
-  </h2>
+  </h1>
   <hr class="mb3 bw4 rounded" />
   <div class="mb1 bold">
     <%= t('users.delete.subheading') %>

app/views/users/webauthn_setup/new.html.erb

@@ -21,10 +21,9 @@
       <%= hidden_field_tag :webauthn_public_key, '', id: 'webauthn_public_key' %>
       <%= hidden_field_tag :attestation_object, '', id: 'attestation_object' %>
       <%= hidden_field_tag :client_data_json, '', id: 'client_data_json' %>
-      <%= label_tag 'code', t('forms.webauthn_setup.nickname'), class: 'block bold' %>
+      <%= label_tag 'code', t('forms.webauthn_setup.nickname'), class: 'block bold', for: 'nickname' %>
       <%= text_field_tag :name, '', required: true, id: 'nickname',
-            class: 'block col-12 field monospace', size: 16, maxlength: 20,
-            'aria-labelledby': 'totp-label' %>
+            class: 'block col-12 field monospace', size: 16, maxlength: 20 %>
      <div class='border border-light-blue rounded-lg px2 py1 mt3'>
        <%= hidden_field_tag 'remember_device', false, id: 'remember_device_preference' %>
        <%= check_box_tag 'remember_device', true, @presenter.remember_device_box_checked?, class: 'my2 ml2 mr1' %>

spec/features/accessibility/idv_pages_spec.rb

@@ -46,6 +46,29 @@
       visit idv_path
       complete_all_doc_auth_steps
       click_idv_continue
+      fill_in :user_password, with: Features::SessionHelper::VALID_PASSWORD
+      click_continue
+
+      expect(current_path).to eq idv_confirmations_path
+      expect(page).to be_accessible.according_to :section508, :"best-practice"
+    end
+
+    scenario 'doc auth steps accessibility' do
+      sign_in_and_2fa_user
+      visit idv_path
+      complete_all_doc_auth_steps(expect_accessible: true)
+      click_idv_continue
+      fill_in :user_password, with: Features::SessionHelper::VALID_PASSWORD
+      click_continue
+
+      expect(current_path).to eq idv_confirmations_path
+      expect(page).to be_accessible.according_to :section508, :"best-practice"
+    end
+
+    scenario 'doc auth steps accessibility on mobile', driver: :headless_chrome_mobile do
+      sign_in_and_2fa_user
+      visit idv_path
+      complete_all_doc_auth_steps(expect_accessible: true)
       click_idv_continue
       fill_in :user_password, with: Features::SessionHelper::VALID_PASSWORD
       click_continue

spec/features/accessibility/user_pages_spec.rb

@@ -138,4 +138,22 @@
 
     expect(page).to be_accessible.according_to :section508, :"best-practice"
   end
+
+  scenario 'device events page' do
+    user = sign_in_and_2fa_user
+    device = create(:device, user: user)
+    create(:event, user: user)
+
+    visit account_events_path(id: device.id)
+
+    expect(page).to be_accessible.according_to :section508, :"best-practice"
+  end
+
+  scenario 'delete user page' do
+    sign_in_and_2fa_user
+
+    visit account_delete_path
+
+    expect(page).to be_accessible.according_to :section508, :"best-practice"
+  end
 end

spec/features/accessibility/visitor_pages_spec.rb

@@ -25,4 +25,10 @@
 
     expect(page).to be_accessible.according_to :section508, :"best-practice"
   end
+
+  scenario 'new user cancel registration page' do
+    visit sign_up_cancel_path
+
+    expect(page).to be_accessible.according_to :section508, :"best-practice"
+  end
 end