Add html landmarks and update names

Adds landmarks and updates their names so screen readers
can jump between more sections of a page and with more
descriptive names for the landmarks

app/views/layouts/_page.html.haml

@@ -22,6 +22,6 @@
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
-      .content{ id: "content-body", **page_itemtype }
+      %main.content{ id: "content-body", **page_itemtype }
         = render "layouts/flash", extra_flash_class: 'limit-container-width'
         = yield

app/views/layouts/nav/_breadcrumbs.html.haml

@@ -3,7 +3,7 @@
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-%nav.breadcrumbs{ role: "navigation", class: [container, @content_class] }
+%nav.breadcrumbs{ class: [container, @content_class], 'aria-label': _('Breadcrumbs') }
   .breadcrumbs-container{ class: ("border-bottom-0" if @no_breadcrumb_border) }
     - if defined?(@left_sidebar)
       = button_tag class: 'toggle-mobile-nav', type: 'button' do

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

-.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+%aside.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), 'aria-label': _('Admin navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do

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

 - issues_count = group_open_issues_count(@group)
 - merge_requests_count = group_merge_requests_count(state: 'opened')
+- aside_title = @group.subgroup? ? _('Subgroup navigation') : _('Group navigation')
+- overview_title = @group.subgroup? ? _('Subgroup overview') : _('Group overview')
 
-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('groups_side_navigation', 'render', 'groups_side_navigation') }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('groups_side_navigation', 'render', 'groups_side_navigation'), 'aria-label': aside_title }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do
@@ -19,19 +21,13 @@
             .nav-icon-container
               = sprite_icon('home')
             %span.nav-item-name
-              - if @group.subgroup?
-                = _('Subgroup overview')
-              - else
-                = _('Group overview')
+              = overview_title
 
           %ul.sidebar-sub-level-items
             = nav_link(path: ['groups#show', 'groups#details', 'groups#activity', 'groups#subgroups'], html_options: { class: "fly-out-top-item" } ) do
               = link_to group_path(@group) do
                 %strong.fly-out-top-item-name
-                  - if @group.subgroup?
-                    = _('Subgroup overview')
-                  - else
-                    = _('Group overview')
+                  = overview_title
             %li.divider.fly-out-top-item
 
             = nav_link(path: ['groups#show', 'groups#details', 'groups#subgroups'], html_options: { class: 'home' }) do

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

-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('user_side_navigation', 'render', 'user_side_navigation') }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('user_side_navigation', 'render', 'user_side_navigation'), 'aria-label': _('User settings') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do

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

-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('projects_side_navigation', 'render', 'projects_side_navigation') }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('projects_side_navigation', 'render', 'projects_side_navigation'), 'aria-label': _('Project navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to project_path(@project), title: @project.name do

app/views/shared/boards/components/_sidebar.html.haml

 %board-sidebar{ "inline-template" => true, ":current-user" => (UserSerializer.new.represent(current_user) || {}).to_json }
   %transition{ name: "boards-sidebar-slide" }
-    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
+    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar", 'aria-label': s_('Boards|Board') }
       .issuable-sidebar
         .block.issuable-sidebar-header.position-relative
           %span.issuable-header-text.hide-collapsed.float-left

app/views/shared/issuable/_bulk_update_sidebar.html.haml

@@ -3,7 +3,7 @@
 - epic_bulk_edit_flag = @project&.group&.feature_available?(:epics) && type == :issues
 - bulk_iterations_flag = @project&.group&.feature_available?(:iterations) && type == :issues
 
-%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ "aria-live" => "polite", data: { 'signed-in': current_user.present? } }
+%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ "aria-live" => "polite", data: { 'signed-in': current_user.present? }, 'aria-label': _('Bulk update') }
   .issuable-sidebar.hidden
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header

app/views/shared/issuable/_sidebar.html.haml

@@ -8,7 +8,7 @@
 - add_page_startup_api_call "#{issuable_sidebar[:issuable_json_path]}?serializer=sidebar_extras"
 - reviewers = local_assigns.fetch(:reviewers, nil)
 
-%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar
     .block.issuable-sidebar-header
       - if signed_in

app/views/shared/milestones/_sidebar.html.haml

 - affix_offset = local_assigns.fetch(:affix_offset, "50")
 - project = local_assigns[:project]
 
-%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': _('Milestone') }
   .issuable-sidebar.milestone-sidebar
     .block.milestone-progress.issuable-sidebar-header
       %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => s_('MilestoneSidebar|Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }

app/views/shared/wikis/_sidebar.html.haml

 - editing ||= false
 
-%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, 'aria-label': _('Wiki') }
   .sidebar-container
     .block.wiki-sidebar-header.gl-mb-3.w-100
       %a.gutter-toggle.float-right.d-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }

changelogs/unreleased/cngo-add-landmarks-and-provide-names.yml

+---
+title: Add site landmarks for screen readers
+merge_request: 52514
+author:
+type: added

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

@@ -141,6 +141,7 @@ export default {
     }"
     :data-signed-in="isUserSignedIn"
     class="right-sidebar epic-sidebar"
+    :aria-label="__('Epic')"
   >
     <div class="issuable-sidebar js-issuable-update">
       <sidebar-header :sidebar-collapsed="sidebarCollapsed" />

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

-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), 'aria-label': _('Security navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do

ee/app/views/shared/issuable/_group_bulk_update_sidebar.html.haml

@@ -4,7 +4,7 @@
 - epic_bulk_edit_flag = type == :issues && group&.feature_available?(:epics)
 - bulk_edit_iterations = group.feature_available?(:iterations) && type == :issues
 
-%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ 'aria-live' => 'polite', data: { 'signed-in': current_user.present? } }
+%aside.issues-bulk-update.js-right-sidebar.right-sidebar{ 'aria-live' => 'polite', data: { 'signed-in': current_user.present? }, 'aria-label': _('Bulk update') }
   .issuable-sidebar.hidden
     = form_tag [:bulk_update, group, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header

locale/gitlab.pot

@@ -1905,6 +1905,9 @@ msgstr ""
 msgid "Admin mode enabled"
 msgstr ""
 
+msgid "Admin navigation"
+msgstr ""
+
 msgid "Admin notes"
 msgstr ""
 
@@ -4656,6 +4659,9 @@ msgstr ""
 msgid "Boards|An error occurred while updating the list. Please try again."
 msgstr ""
 
+msgid "Boards|Board"
+msgstr ""
+
 msgid "Boards|Collapse"
 msgstr ""
 
@@ -4851,6 +4857,9 @@ msgstr ""
 msgid "Branches|protected"
 msgstr ""
 
+msgid "Breadcrumbs"
+msgstr ""
+
 msgid "Brief title about the change"
 msgstr ""
 
@@ -4890,6 +4899,9 @@ msgstr ""
 msgid "Bulk request concurrency"
 msgstr ""
 
+msgid "Bulk update"
+msgstr ""
+
 msgid "BulkImport|From source group"
 msgstr ""
 
@@ -13876,6 +13888,9 @@ msgstr ""
 msgid "Group name (your organization)"
 msgstr ""
 
+msgid "Group navigation"
+msgstr ""
+
 msgid "Group overview"
 msgstr ""
 
@@ -22613,6 +22628,9 @@ msgstr ""
 msgid "Project name suffix"
 msgstr ""
 
+msgid "Project navigation"
+msgstr ""
+
 msgid "Project order will not be saved as local storage is not available."
 msgstr ""
 
@@ -25595,6 +25613,9 @@ msgstr ""
 msgid "Security dashboard"
 msgstr ""
 
+msgid "Security navigation"
+msgstr ""
+
 msgid "Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})"
 msgstr ""
 
@@ -27710,6 +27731,9 @@ msgstr ""
 msgid "Subgroup milestone"
 msgstr ""
 
+msgid "Subgroup navigation"
+msgstr ""
+
 msgid "Subgroup overview"
 msgstr ""
 

spec/features/admin/admin_groups_spec.rb

@@ -54,7 +54,7 @@ RSpec.describe 'Admin Groups' do
       click_button "Create group"
 
       expect(current_path).to eq admin_group_path(Group.find_by(path: path_component))
-      content = page.find('div#content-body')
+      content = page.find('#content-body')
       h3_texts = content.all('h3').collect(&:text).join("\n")
       expect(h3_texts).to match group_name
       li_texts = content.all('li').collect(&:text).join("\n")