Merge branch '329582-a11y-action-update-issue-page-heading-structure-2' into 'master'

Switched title to h1 on issues

See merge request gitlab-org/gitlab!75248

app/assets/javascripts/issues/show/components/title.vue

@@ -68,7 +68,7 @@ export default {
 
 <template>
   <div class="title-container">
-    <h2
+    <h1
       v-safe-html="titleHtml"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
@@ -76,7 +76,7 @@ export default {
       }"
       class="title qa-title"
       dir="auto"
-    ></h2>
+    ></h1>
     <gl-button
       v-if="showInlineEditButton && canUpdate"
       v-gl-tooltip.bottom

app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue

@@ -58,7 +58,12 @@ export default {
 <template>
   <div>
     <div class="title-container">
-      <h2 v-safe-html="issuable.titleHtml || issuable.title" class="title qa-title" dir="auto"></h2>
+      <h1
+        v-safe-html="issuable.titleHtml || issuable.title"
+        class="title qa-title"
+        dir="auto"
+        data-testid="title"
+      ></h1>
       <gl-button
         v-if="enableEdit"
         v-gl-tooltip.bottom

app/views/shared/issue_type/_details_content.html.haml

@@ -5,7 +5,7 @@
   .detail-page-description.content-block
     #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, full_path: @project.full_path } }
       .title-container
-        %h2.title= markdown_field(issuable, :title)
+        %h1.title= markdown_field(issuable, :title)
       - if issuable.description.present?
         .description
           .md= markdown_field(issuable, :description)

ee/spec/features/epics/update_epic_spec.rb

@@ -55,7 +55,7 @@ RSpec.describe 'Update Epic', :js do
 
         click_button 'Save changes'
 
-        expect(find('.issuable-details h2.title')).to have_content('New epic title')
+        expect(find('.issuable-details h1.title')).to have_content('New epic title')
         expect(find('.issuable-details .description')).to have_content('New epic description')
       end
 
@@ -89,7 +89,7 @@ RSpec.describe 'Update Epic', :js do
 
         click_button 'Save changes'
 
-        expect(find('.issuable-details h2.title')).to have_content('title')
+        expect(find('.issuable-details h1.title')).to have_content('title')
 
         visit dashboard_todos_path
 

spec/features/incidents/incident_details_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe 'Incident details', :js do
   context 'when a developer+ displays the incident' do
     it 'shows the incident' do
       page.within('.issuable-details') do
-        expect(find('h2')).to have_content(incident.title)
+        expect(find('h1')).to have_content(incident.title)
       end
     end
 
@@ -33,7 +33,7 @@ RSpec.describe 'Incident details', :js do
       page.within('.issuable-details') do
         incident_tabs = find('[data-testid="incident-tabs"]')
 
-        expect(find('h2')).to have_content(incident.title)
+        expect(find('h1')).to have_content(incident.title)
         expect(incident_tabs).to have_content('Summary')
         expect(incident_tabs).to have_content(incident.description)
       end

spec/features/issues/incident_issue_spec.rb

@@ -38,7 +38,7 @@ RSpec.describe 'Incident Detail', :js do
         incident_tabs = find('[data-testid="incident-tabs"]')
 
         aggregate_failures 'shows title and Summary tab' do
-          expect(find('h2')).to have_content(incident.title)
+          expect(find('h1')).to have_content(incident.title)
           expect(incident_tabs).to have_content('Summary')
           expect(incident_tabs).to have_content(incident.description)
         end

spec/features/issues/issue_detail_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'Issue Detail', :js do
 
     it 'shows the issue' do
       page.within('.issuable-details') do
-        expect(find('h2')).to have_content(issue.title)
+        expect(find('h1')).to have_content(issue.title)
       end
     end
   end
@@ -85,7 +85,7 @@ RSpec.describe 'Issue Detail', :js do
 
     it 'shows the issue' do
       page.within('.issuable-details') do
-        expect(find('h2')).to have_content(issue.reload.title)
+        expect(find('h1')).to have_content(issue.reload.title)
       end
     end
   end

spec/features/issues/spam_issues_spec.rb

@@ -66,7 +66,7 @@ RSpec.describe 'New issue', :js do
       it 'allows issue creation' do
         click_button 'Create issue'
 
-        expect(page.find('.issue-details h2.title')).to have_content('issue title')
+        expect(page.find('.issue-details h1.title')).to have_content('issue title')
         expect(page.find('.issue-details .description')).to have_content('issue description')
       end
 
@@ -111,7 +111,7 @@ RSpec.describe 'New issue', :js do
 
           click_button 'Create issue'
 
-          expect(page.find('.issue-details h2.title')).to have_content('issue title')
+          expect(page.find('.issue-details h1.title')).to have_content('issue title')
           expect(page.find('.issue-details .description')).to have_content('issue description')
         end
       end
@@ -126,7 +126,7 @@ RSpec.describe 'New issue', :js do
           click_button 'Create issue'
 
           expect(page).not_to have_css('.recaptcha')
-          expect(page.find('.issue-details h2.title')).to have_content('issue title')
+          expect(page.find('.issue-details h1.title')).to have_content('issue title')
           expect(page.find('.issue-details .description')).to have_content('issue description')
         end
 
@@ -152,7 +152,7 @@ RSpec.describe 'New issue', :js do
           click_button 'Create issue'
 
           expect(page).not_to have_css('.recaptcha')
-          expect(page.find('.issue-details h2.title')).to have_content('issue title')
+          expect(page.find('.issue-details h1.title')).to have_content('issue title')
           expect(page.find('.issue-details .description')).to have_content('issue description')
         end
 
@@ -181,7 +181,7 @@ RSpec.describe 'New issue', :js do
 
       click_button 'Create issue'
 
-      expect(page.find('.issue-details h2.title')).to have_content('issue title')
+      expect(page.find('.issue-details h1.title')).to have_content('issue title')
       expect(page.find('.issue-details .description')).to have_content('issue description')
     end
   end

spec/features/labels_hierarchy_spec.rb

@@ -160,7 +160,7 @@ RSpec.describe 'Labels Hierarchy', :js do
 
       find('.btn-confirm').click
 
-      expect(page.find('.issue-details h2.title')).to have_content('new created issue')
+      expect(page.find('.issue-details h1.title')).to have_content('new created issue')
       expect(page).to have_selector('span.gl-label-text', text: grandparent_group_label.title)
       expect(page).to have_selector('span.gl-label-text', text: parent_group_label.title)
       expect(page).to have_selector('span.gl-label-text', text: project_label_1.title)

spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js

@@ -66,10 +66,12 @@ describe('IssuableTitle', () => {
       });
 
       await nextTick();
-      const titleEl = wrapperWithTitle.find('h2');
+      const titleEl = wrapperWithTitle.find('[data-testid="title"]');
 
       expect(titleEl.exists()).toBe(true);
-      expect(titleEl.html()).toBe('<h2 dir="auto" class="title qa-title"><b>Sample</b> title</h2>');
+      expect(titleEl.html()).toBe(
+        '<h1 dir="auto" data-testid="title" class="title qa-title"><b>Sample</b> title</h1>',
+      );
 
       wrapperWithTitle.destroy();
     });