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
+        <div class="gl-display-flex gl-align-items-center" data-testid="scheduleHeader">
+          <gl-button
             v-gl-tooltip
-              class="gl-hover-cursor-pointer"
+            class="gl-mr-2 gl-p-0!"
+            :title="scheduleVisibleAriaLabel"
             :aria-label="scheduleVisibleAriaLabel"
-              :size="12"
-              :name="scheduleVisibleAngleIcon"
+            category="tertiary"
             @click="scheduleVisible = !scheduleVisible"
-            />
-            <span class="gl-pl-2">{{ schedule.name }}</span>
-          </div>
-          <gl-button-group>
+          >
+            <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,8 +55,7 @@ describe('On-call schedule', () => {
       [getShiftsForRotationsQuery, getShiftsForRotationsQueryHandler],
     ]);
 
-    wrapper = extendedWrapper(
-      shallowMount(OnCallSchedule, {
+    wrapper = shallowMountExtended(OnCallSchedule, {
       localVue,
       apolloProvider: fakeApollo,
       propsData: {
@@ -77,8 +76,7 @@ describe('On-call schedule', () => {
       stubs: {
         GlCard,
       },
-      }),
-    );
+    });
   };
 
   beforeEach(() => {