LG-12465 VPAT 1.1.1 Safari VoiceOver svg with null alt

app/components/badge_component.html.erb

@@ -1,4 +1,4 @@
 <%= content_tag('div', **tag_options, class: ['lg-verification-badge', *tag_options[:class]]) do %>
-  <%= image_tag(asset_path("alerts/#{icon}.svg"), size: 16, alt: '') %>
+  <%= image_tag(asset_path("alerts/#{icon}.svg"), size: 16, alt: '', role: 'img') %>
   <%= content %>
 <% end %>

app/views/mfa_confirmation/show.html.erb

@@ -1,6 +1,6 @@
 <% self.title = @content.heading %>
 
-<%= image_tag asset_url('user-signup-ial1.svg'), width: 107, height: 119, alt: '', class: 'margin-bottom-4' %>
+<%= image_tag asset_url('user-signup-ial1.svg'), width: 107, height: 119, alt: '', class: 'margin-bottom-4', role: 'img' %>
 
 <%= render PageHeadingComponent.new.with_content(@content.heading) %>
 

app/views/openid_connect/logout/index.html.erb

@@ -1,7 +1,7 @@
 <% self.title = t('openid_connect.logout.heading', app_name: APP_NAME) %>
 
 <div class='text-center'>
-  <%= image_tag(asset_url('user-access.svg'), width: '280', height: '91', alt: '') %>
+  <%= image_tag(asset_url('user-access.svg'), width: '280', height: '91', alt: '', role: 'img') %>
   <% if @service_provider_name.present? %>
     <%= render PageHeadingComponent.new.with_content(t('openid_connect.logout.heading_with_sp', app_name: APP_NAME, service_provider_name: @service_provider_name)) %>
   <% else %>

app/views/partials/multi_factor_authentication/_mfa_selection.html.erb

@@ -17,7 +17,7 @@
       "two_factor_options_form_selection_#{option.type}",
       class: 'usa-checkbox__label usa-checkbox__label--illustrated',
     ) do %>
-  <%= image_tag(asset_url("mfa-options/#{option.type}.svg"), alt: '', class: 'usa-checkbox__image') %>
+  <%= image_tag(asset_url("mfa-options/#{option.type}.svg"), alt: '', class: 'usa-checkbox__image', role: 'img') %>
   <div class="usa-checkbox__label--text">
     <span class="margin-right-2"><%= option.label %></span>
     <%= content_tag(

app/views/shared/_footer_lite.html.erb

@@ -1,6 +1,6 @@
 <footer class="footer">
   <%= new_tab_link_to('https://www.gsa.gov', class: 'display-none tablet:display-inline') do %>
-    <%= image_tag(asset_url('sp-logos/square-gsa.svg'), size: 20, alt: '', class: 'float-left margin-right-1') %>
+    <%= image_tag(asset_url('sp-logos/square-gsa.svg'), size: 20, alt: '', class: 'float-left margin-right-1', role: 'img') %>
     <%= t('shared.footer_lite.gsa') %>
   <% end %>
   <%= render LanguagePickerComponent.new(class: 'footer__language-picker') %>

app/views/sign_up/registrations/_sp_registration_heading.html.erb

@@ -1,5 +1,5 @@
 <div class="text-center">
-  <%= image_tag(asset_url('user-access.svg'), width: '280', height: '91', alt: '') %>
+  <%= image_tag(asset_url('user-access.svg'), width: '280', height: '91', alt: '', role: 'img') %>
   <h1 class="margin-bottom-4 text-primary text-normal">
     <strong><%= decorated_sp_session.sp_name %></strong>
     <%= t('headings.create_account_with_sp.sp_text', app_name: APP_NAME) %>

app/views/users/backup_code_setup/reminder.html.erb

@@ -1,6 +1,6 @@
 <% self.title = t('forms.backup_code.title') %>
 
-<%= image_tag asset_url('user-signup-ial1.svg'), width: 107, height: 119, alt: '', class: 'margin-bottom-4' %>
+<%= image_tag asset_url('user-signup-ial1.svg'), width: 107, height: 119, alt: '', class: 'margin-bottom-4', role: 'img' %>
 
 <%= render PageHeadingComponent.new.with_content(t('forms.backup_code_reminder.heading')) %>
 

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

@@ -1,6 +1,6 @@
 <% self.title = @presenter.page_title %>
 
-<%= image_tag asset_url(@presenter.image_path), alt: '', width: '90', class: 'margin-left-1 margin-bottom-2' %>
+<%= image_tag asset_url(@presenter.image_path), alt: '', width: '90', class: 'margin-left-1 margin-bottom-2', role: 'img' %>
 
 <%= render PageHeadingComponent.new.with_content(@presenter.heading) %>
 

spec/support/matchers/accessibility.rb

@@ -170,6 +170,27 @@ def landmarks(page)
   end
 end
 
+RSpec::Matchers.define :tag_decorative_svgs_with_role do
+  def decorative_svgs(page)
+    page.all(:css, 'img[alt=""][src$=".svg" i]')
+  end
+
+  match do |page|
+    expect(decorative_svgs(page)).to all satisfy { |img| img[:role] == 'img' }
+  end
+
+  failure_message do |page|
+    img_tags = decorative_svgs(page).reject { |img| img[:role] == 'img' }.
+      map { |img| %(<img alt="#{img[:alt]}" src="#{img[:src]}" class="#{img[:class]}">) }.
+      join("\n")
+
+    <<~STR
+      Expect all decorative SVGs to have role="img", but found ones without:
+      #{img_tags}
+    STR
+  end
+end
+
 class AccessibleName
   attr_reader :page
 
@@ -289,10 +310,17 @@ def fieldset_legend_name(element)
 end
 
 def expect_page_to_have_no_accessibility_violations(page, validate_markup: true)
-  expect(page).to be_axe_clean.according_to :section508, :"best-practice", :wcag21aa
+  expect(page).to be_axe_clean.according_to(
+    :section508, :"best-practice",
+    :wcag21aa
+  ).
+    # Axe flags redundant img role on img elements, but is necessary for a Safari bug
+    # See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#identifying_svg_as_an_image
+    excluding('img[alt=""][src$=".svg" i]')
   expect(page).to have_valid_idrefs
   expect(page).to label_required_fields
   expect(page).to have_valid_markup if validate_markup
+  expect(page).to tag_decorative_svgs_with_role
 end
 
 def activate_skip_link