Merge branch '322680-semantic-html' into 'master'

Corrected the HTML markup

See merge request gitlab-org/gitlab!60399

app/helpers/avatars_helper.rb

@@ -149,7 +149,7 @@ module AvatarsHelper
     options[:class] =
       [*options[:class], "identicon bg#{bg_key}", size_class].compact.join(' ')
 
-    content_tag(:div, class: options[:class].strip) do
+    content_tag(:span, class: options[:class].strip) do
       source.name[0, 1].upcase
     end
   end

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -2,9 +2,9 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
-        .avatar-container.s40.settings-avatar
+        %span.avatar-container.s40.settings-avatar
           = sprite_icon('admin', size: 24)
-        .sidebar-context-title
+        %span.sidebar-context-title
           = _('Admin Area')
     %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
       = nav_link(controller: %w(dashboard admin admin/projects users groups jobs runners gitaly_servers), html_options: {class: 'home'}) do

app/views/layouts/nav/sidebar/_group.html.haml

@@ -7,9 +7,9 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do
-        .avatar-container.rect-avatar.s40.group-avatar
+        %span.avatar-container.rect-avatar.s40.group-avatar
           = group_icon(@group, class: "avatar s40 avatar-tile")
-        .sidebar-context-title
+        %span.sidebar-context-title
           = @group.name
     %ul.sidebar-top-level-items.qa-group-sidebar
       = render_if_exists 'layouts/nav/sidebar/group_trial_status_widget', group: @group

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -2,9 +2,9 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
-        .avatar-container.s40.settings-avatar
+        %span.avatar-container.s40.settings-avatar
           = image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
-        .sidebar-context-title= _('User Settings')
+        %span.sidebar-context-title= _('User Settings')
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
         = link_to profile_path do

app/views/shared/nav/_scope_menu.html.haml

 .context-header
   = link_to scope_menu.link, **scope_menu.container_html_options do
-    .avatar-container.rect-avatar.s40.project-avatar
+    %span.avatar-container.rect-avatar.s40.project-avatar
       = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
-    .sidebar-context-title
+    %span.sidebar-context-title
       = scope_menu.title

ee/app/views/layouts/nav/sidebar/_security.html.haml

@@ -2,9 +2,9 @@
   .nav-sidebar-inner-scroll
     .context-header
       = link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
-        .avatar-container.s40.settings-avatar.rect-avatar
+        %span.avatar-container.s40.settings-avatar.rect-avatar
           = brand_header_logo
-        .sidebar-context-title
+        %span.sidebar-context-title
           = _('Security')
     %ul.sidebar-top-level-items
       = nav_link(path: %w[dashboard#show]) do

spec/features/projects/fork_spec.rb

@@ -228,7 +228,7 @@ RSpec.describe 'Project fork' do
       click_link 'Fork'
 
       page.within('.fork-thumbnail-container') do
-        expect(page).to have_css('div.identicon')
+        expect(page).to have_css('span.identicon')
       end
     end
 

spec/helpers/avatars_helper_spec.rb

@@ -11,7 +11,7 @@ RSpec.describe AvatarsHelper do
     shared_examples 'resource with a default avatar' do |source_type|
       it 'returns a default avatar div' do
         expect(public_send("#{source_type}_icon", *helper_args))
-          .to match(%r{<div class="identicon bg\d+">F</div>})
+          .to match(%r{<span class="identicon bg\d+">F</span>})
       end
     end
 
@@ -434,7 +434,7 @@ RSpec.describe AvatarsHelper do
       let(:resource) { build_stubbed(:group, name: 'foo') }
 
       it 'displays group avatar' do
-        is_expected.to match(%r{<div class="avatar identicon bg\d+ s32">F</div>})
+        is_expected.to match(%r{<span class="avatar identicon bg\d+ s32">F</span>})
       end
     end
   end