Merge branch '333115-impove-schedules-accessibility' into 'master'

Update oncall schedule component markup

See merge request gitlab-org/gitlab!66070

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -175,8 +175,8 @@ export default {
     },
     scheduleVisibleAriaLabel() {
       return this.scheduleVisible
-        ? this.$options.i18n.scheduleOpen
-        : this.$options.i18n.scheduleClose;
+        ? this.$options.i18n.scheduleClose
+        : this.$options.i18n.scheduleOpen;
     },
     scheduleVisibleAngleIcon() {
       return this.scheduleVisible ? 'angle-down' : 'angle-right';
@@ -240,22 +240,19 @@ export default {
       :header-class="{ 'gl-py-3': true, 'gl-rounded-small': !scheduleVisible }"
     >
       <template #header>
-        <div
-          class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-m-0"
-          data-testid="scheduleHeader"
-        >
-          <div class="gl-font-weight-bold gl-font-lg">
-            <gl-icon
-              v-gl-tooltip
-              class="gl-hover-cursor-pointer"
-              :aria-label="scheduleVisibleAriaLabel"
-              :size="12"
-              :name="scheduleVisibleAngleIcon"
-              @click="scheduleVisible = !scheduleVisible"
-            />
-            <span class="gl-pl-2">{{ schedule.name }}</span>
-          </div>
-          <gl-button-group>
+        <div class="gl-display-flex gl-align-items-center" data-testid="scheduleHeader">
+          <gl-button
+            v-gl-tooltip
+            class="gl-mr-2 gl-p-0!"
+            :title="scheduleVisibleAriaLabel"
+            :aria-label="scheduleVisibleAriaLabel"
+            category="tertiary"
+            @click="scheduleVisible = !scheduleVisible"
+          >
+            <gl-icon :size="12" :name="scheduleVisibleAngleIcon" />
+          </gl-button>
+          <h3 class="gl-font-weight-bold gl-font-lg gl-m-0">{{ schedule.name }}</h3>
+          <gl-button-group class="gl-ml-auto">
             <gl-button
               v-gl-modal="editScheduleModalId"
               v-gl-tooltip

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

 import { GlButton, GlCard, GlIcon, GlCollapse } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import OnCallSchedule, { i18n } from 'ee/oncall_schedules/components/oncall_schedule.vue';
@@ -10,7 +10,7 @@ import { PRESET_TYPES } from 'ee/oncall_schedules/constants';
 import getShiftsForRotationsQuery from 'ee/oncall_schedules/graphql/queries/get_oncall_schedules_with_rotations_shifts.query.graphql';
 import * as commonUtils from 'ee/oncall_schedules/utils/common_utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import * as dateTimeUtility from '~/lib/utils/datetime/date_calculation_utility';
 import { getOncallSchedulesQueryResponse } from './mocks/apollo_mock';
@@ -55,30 +55,28 @@ describe('On-call schedule', () => {
       [getShiftsForRotationsQuery, getShiftsForRotationsQueryHandler],
     ]);
 
-    wrapper = extendedWrapper(
-      shallowMount(OnCallSchedule, {
-        localVue,
-        apolloProvider: fakeApollo,
-        propsData: {
-          schedule,
-          scheduleIndex,
-          ...props,
-        },
-        data() {
-          return {
-            rotations: schedule.rotations.nodes,
-          };
-        },
-        provide: {
-          timezones: mockTimezones,
-          projectPath,
-          ...provide,
-        },
-        stubs: {
-          GlCard,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(OnCallSchedule, {
+      localVue,
+      apolloProvider: fakeApollo,
+      propsData: {
+        schedule,
+        scheduleIndex,
+        ...props,
+      },
+      data() {
+        return {
+          rotations: schedule.rotations.nodes,
+        };
+      },
+      provide: {
+        timezones: mockTimezones,
+        projectPath,
+        ...provide,
+      },
+      stubs: {
+        GlCard,
+      },
+    });
   };
 
   beforeEach(() => {