Merge branch '20231205-ariaexpanded-related-issues' into 'master'

Correct aria-expanded usage for related issues

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/138838



Merged-by: Illya Klymov <xanf@xanf.me>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: Illya Klymov <xanf@xanf.me>
Reviewed-by: Illya Klymov <xanf@xanf.me>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

@@ -204,9 +204,11 @@ export default {
         'disabled-content': disableContents,
         'overflow-auto': directChildren.length > $options.OVERFLOW_AFTER,
       }"
-      :aria-expanded="isOpenString"
     >
-      <related-items-tree-header @toggleRelatedItemsView="handleRelatedItemsView" />
+      <related-items-tree-header
+        :is-open-string="isOpenString"
+        @toggleRelatedItemsView="handleRelatedItemsView"
+      />
       <slot-switch
         v-if="visibleForm && parentItem.confidential"
         :active-slot-names="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -17,6 +17,13 @@ export default {
     EpicHealthStatus,
     EpicActionsSplitButton,
   },
+  props: {
+    isOpenString: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
   data() {
     return {
       isOpen: true,
@@ -198,6 +205,7 @@ export default {
           category="tertiary"
           size="small"
           :icon="toggleIcon"
+          :aria-expanded="isOpenString"
           :aria-label="toggleLabel"
           data-testid="toggle-links"
           @click="handleToggle"

ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js

@@ -249,6 +249,11 @@ describe('RelatedItemsTreeApp', () => {
       expect(findRelatedItemsTreeHeader().isVisible()).toBe(true);
     });
+    it('renders tree header component and passes is-open-string down to it', async () => {
+      await nextTick();
+      expect(findRelatedItemsTreeHeader().props('isOpenString')).toBe('true');
+    });
+
     it('renders item add/create form container element', async () => {
       store.dispatch('toggleAddItemForm', {
         toggleState: true,

ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js

@@ -15,7 +15,7 @@ import { mockInitialConfig, mockParentItem, mockQueryResponse } from '../mock_da
 Vue.use(Vuex);
-const createComponent = ({ slots } = {}) => {
+const createComponent = ({ slots, isOpenString } = { isOpenString: 'expanded' }) => {
   const store = createDefaultStore();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
@@ -39,6 +39,9 @@ const createComponent = ({ slots } = {}) => {
   return shallowMountExtended(RelatedItemsTreeHeader, {
     store,
     slots,
+    propsData: {
+      isOpenString,
+    },
   });
 };
@@ -273,6 +276,12 @@ describe('RelatedItemsTree', () => {
         expect(findToggleButton().props('icon')).toBe('chevron-lg-up');
       });
+      it('has an aria-expanded state on the toggle button that is controlled by the isOpenString prop', () => {
+        expect(findToggleButton().attributes('aria-expanded')).toBe('expanded');
+        wrapper = createComponent({ isOpenString: 'collapsed' });
+        expect(findToggleButton().attributes('aria-expanded')).toBe('collapsed');
+      });
+
       it('expands on click toggle button', async () => {
         findToggleButton().vm.$emit('click');
         await nextTick();