Replace div’s with ordered list

- semantic html
- translatable
- automatic numbering

ee/app/assets/javascripts/registrations/components/progress_bar.vue

@@ -29,9 +29,9 @@ export default {
 };
 </script>
 <template>
-  <div class="bar d-flex">
-    <div v-for="(step, index) in steps" :key="index" :class="classObject(index)">
-      {{ index + 1 }}. {{ step }}
-    </div>
-  </div>
+  <ol class="bar gl-display-flex gl-p-0 gl-m-0">
+    <li v-for="(step, index) in steps" :key="index" :class="classObject(index)">
+      {{ step }}
+    </li>
+  </ol>
 </template>

ee/app/assets/stylesheets/pages/subscriptions.scss

@@ -43,6 +43,9 @@ $subscriptions-full-width-lg: 541px;
       width: 400px;
     }
 
+    list-style-position: inside;
+    list-style-type: decimal;
+
     .phase {
       border-bottom: 5px solid $gray-100;
       color: $gray-500;

ee/changelogs/unreleased/217345-follow-up-from-move-registrations-progress-bar-and-make-it-conf.yml

+---
+title: Use semantic HTML in Progress Bar component
+merge_request: 40380
+author:
+type: changed

ee/spec/features/registrations/new_group_spec.rb

@@ -13,7 +13,7 @@ RSpec.describe 'New group screen', :js do
 
   it 'shows the progress bar with the correct steps' do
     expect(page).to have_content('Create your group')
-    expect(page).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
+    expect(page).to have_content('Your profile Your GitLab group Your first project')
   end
 
   it 'autofills the group path' do

ee/spec/features/registrations/new_project_spec.rb

@@ -19,12 +19,12 @@ RSpec.describe 'New project screen', :js do
 
   it 'shows the progress bar with the correct steps' do
     expect(subject).to have_content('Create/import your first project')
-    expect(subject).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
+    expect(subject).to have_content('Your profile Your GitLab group Your first project')
   end
 
   context 'when in the subscription flow' do
     let(:in_subscription_flow) { true }
 
-    it { is_expected.to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project') }
+    it { is_expected.to have_content('Your profile Checkout Your GitLab group Your first project') }
   end
 end

ee/spec/features/registrations/welcome_spec.rb

@@ -22,14 +22,14 @@ RSpec.describe 'Welcome screen', :js do
 
     it 'shows the welcome page without a progress bar' do
       expect(page).to have_content('Welcome to GitLab.com')
-      expect(page).not_to have_content('1. Your profile')
+      expect(page).not_to have_content('Your profile')
     end
 
     context 'when in the subscription flow' do
       let(:in_subscription_flow) { true }
 
       it 'shows the progress bar with the correct steps' do
-        expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group')
+        expect(page).to have_content('Your profile Checkout Your GitLab group')
       end
     end
 
@@ -37,14 +37,14 @@ RSpec.describe 'Welcome screen', :js do
       let(:part_of_onboarding_issues_experiment) { true }
 
       it 'shows the progress bar with the correct steps' do
-        expect(page).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
+        expect(page).to have_content('Your profile Your GitLab group Your first project')
       end
 
       context 'when in the invitation flow' do
         let(:in_invitation_flow) { true }
 
         it 'does not show the progress bar' do
-          expect(page).not_to have_content('1. Your profile')
+          expect(page).not_to have_content('Your profile')
         end
       end
     end
@@ -54,7 +54,7 @@ RSpec.describe 'Welcome screen', :js do
       let(:part_of_onboarding_issues_experiment) { true }
 
       it 'shows the progress bar with the correct steps' do
-        expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project')
+        expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
       end
     end
   end

ee/spec/features/subscriptions/groups/edit_spec.rb

@@ -22,21 +22,21 @@ RSpec.describe 'Welcome screen', :js do
 
     it 'shows the group edit page without a progress bar' do
       expect(page).to have_content('Create your group')
-      expect(page).not_to have_content('1. Your profile')
+      expect(page).not_to have_content('Your profile')
     end
 
     context 'when showing for a new user' do
       let(:params) { { new_user: true } }
 
       it 'shows the progress bar with the correct steps' do
-        expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group')
+        expect(page).to have_content('Your profile Checkout Your GitLab group')
       end
 
       context 'when part of the onboarding issues experiment' do
         let(:part_of_onboarding_issues_experiment) { true }
 
         it 'shows the progress bar with the correct steps' do
-          expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project')
+          expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
         end
       end
     end

ee/spec/frontend/subscriptions/new/components/checkout/progress_bar_spec.js

@@ -10,8 +10,8 @@ describe('Progress Bar', () => {
     });
   };
 
-  const firstStep = () => wrapper.find('.bar div:nth-child(1)');
-  const secondStep = () => wrapper.find('.bar div:nth-child(2)');
+  const firstStep = () => wrapper.find('.bar li:nth-child(1)');
+  const secondStep = () => wrapper.find('.bar li:nth-child(2)');
 
   beforeEach(() => {
     createComponent({ currentStep: 'b', steps: ['a', 'b'] });