From 88fae69098706c697236910cc51d00ddc7c9da02 Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Wed, 29 Oct 2025 22:08:13 +0530
Subject: [PATCH 1/9] Content Library Catalog - Frequently asked questions page
 changes

---
 .../channelList/views/Channel/CatalogFAQ.vue  | 432 +++++++++---------
 .../Channel/__tests__/catalogFAQ.spec.js      |  58 +++
 .../frontend/shared/views/StudioAccordion.vue | 112 +++++
 .../shared/views/StudioAccordionItem.vue      |  35 ++
 4 files changed, 422 insertions(+), 215 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index 9b0ea0097a..d3c924f37b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -1,355 +1,350 @@
 <template>
 
-  <VContainer
-    fluid
-    class="py-1"
-    :class="$vuetify.breakpoint.xsOnly ? 'px-0' : 'px-4'"
-  >
-    <h1 class="font-weight-bold mb-2 px-1 title">
+  <div :class="{ 'catalog-faq': !windowIsSmall }">
+    <h2 class="main-title">
       {{ $tr('aboutHeader') }}
-    </h1>
-    <p class="px-2 subheading">
+    </h2>
+    <p class="desc">
       {{ $tr('descriptionP1') }}
-      <ActionLink
+
+      <KButton
         :text="$tr('channelLink')"
+        appearance="basic-link"
         href="#channel"
-        @click="aboutPanel = 1"
+        @click="openChannelAccordion()"
       />
     </p>
-    <p class="px-2 subheading">
+    <p class="desc">
       {{ $tr('descriptionP2') }}
     </p>
-    <p class="mb-5 px-2 subheading">
+    <p class="desc">
       {{ $tr('descriptionP3') }}
     </p>
 
-    <!-- ABOUT THIS LIBRARY -->
-    <h1 class="font-weight-bold px-1 title">
+    <h2 class="sub-title">
       {{ $tr('aboutLibraryHeader') }}
-    </h1>
-    <VExpansionPanel
-      class="mb-5 mt-2"
-      expand
-    >
+    </h2>
+
+    <div class="faq-accordion">
+
       <!-- How do you determine what goes into this library? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('selectionQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{$tr('selectionQuestion')}}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('selectionAnswerP1') }}</p>
             <p>{{ $tr('selectionAnswerP2') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+
+      </StudioAccordion>
 
       <!-- How is this library created and maintained? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('maintenanceQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{$tr('maintenanceQuestion')}}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('maintenanceAnswerP1') }}</p>
             <p>
               {{ $tr('maintenanceAnswerP2') }}
-              <ActionLink
+              <KExternalLink
                 :text="$tr('viewIntegrationGuide')"
-                target="_blank"
+                openInNewTab
                 href="http://learningequality.org/r/integration-guide"
               />
             </p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- Have these sources been vetted or endorsed as classroom-safe and ready? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('endoresementQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('endoresementQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('endorsementAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- Does Learning Equality own these resources? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('ownershipQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('ownershipQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('ownershipAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- Do you add new materials? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('newContentQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('newContentQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('newContentAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- How can I add my own materials or recommend others' materials for this library? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('customContentQuestion') }}
-          </h2>
+      <StudioAccordion lastItem>
+        <template #left-actions>
+          {{ $tr('customContentQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('customContentAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
-    </VExpansionPanel>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
+
+    </div>
 
-    <!-- USING THESE RESOURCES -->
-    <h1 class="font-weight-bold px-1 title">
+    <h2 class="sub-title">
       {{ $tr('usingResourcesHeader') }}
-    </h1>
-    <VExpansionPanel
-      v-model="aboutPanel"
-      class="mb-5 mt-2"
-      expand
-    >
+    </h2>
+    <div class="faq-accordion">
+
       <!-- I found something I'm interested in and would like to start using it.
             What should I do? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('usingContentQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('usingContentQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>
               {{ $tr('usingContentAnswer') }}
-              <ActionLink
+              <KExternalLink
                 :text="$tr('viewGettingStartedLink')"
-                target="_blank"
+                openInNewTab
                 href="https://learningequality.org/documentation/"
               />
             </p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- What is a channel? -->
-      <VExpansionPanelContent id="channel">
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('channelQuestion') }}
-          </h2>
+      <StudioAccordion :id="'channel'">
+        <template #left-actions>
+          {{ $tr('channelQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('channelAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- How do I review the contents of the channels themselves? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('sampleContentQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('sampleContentQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('sampleContentAnswer') }}</p>
             <ul>
               <li>{{ $tr('sampleContentAnswerItem1') }}</li>
               <li>{{ $tr('sampleContentAnswerItem2') }}</li>
               <li>
                 {{ $tr('sampleContentAnswerItem3') }}
-                <ActionLink
+                <KExternalLink
                   :text="$tr('downloadKolibriLink')"
-                  target="_blank"
+                  openInNewTab
                   href="https://learningequality.org/download"
                 />
               </li>
             </ul>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- I want to use some of this resource, but not all of it. What should I do? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('partialChannelQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('partialChannelQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('partialChannelAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- What is coach content? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('coachContentQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('coachContentQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('coachContentAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- I found a bug, broken link, or instance of mislabeled information
             within a resource. What should I do? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('issueQuestion') }}
-          </h2>
+      <StudioAccordion lastItem>
+        <template #left-actions>
+          {{ $tr('issueQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('issueAnswer') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
-    </VExpansionPanel>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
-    <!-- ABOUT KOLIBRI -->
-    <h1 class="font-weight-bold pl-1 title">
+    </div>
+
+    <h2 class="sub-title">
       {{ $tr('aboutKolibriHeader') }}
-    </h1>
-    <VExpansionPanel
-      class="mb-5 mt-2"
-      expand
-    >
+    </h2>
+    <div class="faq-accordion">
+
       <!-- What is Kolibri? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('KolibriQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('KolibriQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('KolibriAnswer') }}</p>
             <ul>
               <li>{{ $tr('KolibriAnswerItem1') }}</li>
               <li>{{ $tr('KolibriAnswerItem2') }}</li>
               <li>{{ $tr('KolibriAnswerItem3') }}</li>
             </ul>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- How can I use Kolibri? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('usingKolibriQuestion') }}
-          </h2>
+      <StudioAccordion>
+        <template #left-actions>
+          {{ $tr('usingKolibriQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('usingKolibriAnswerP1') }}</p>
             <ul>
               <li>
                 {{ $tr('usingKolibriItem1') }}
-                <ActionLink
-                  target="_blank"
+                <KExternalLink
                   :text="$tr('visitWebsiteLink')"
+                  openInNewTab
                   href="https://learningequality.org/kolibri/"
                 />
               </li>
               <li>
                 {{ $tr('usingKolibriItem2') }}
-                <ActionLink
-                  target="_blank"
+                <KExternalLink
                   :text="$tr('viewDemoLink')"
+                  openInNewTab
                   href="https://kolibri-demo.learningequality.org/en/user/#/signin"
                 />
               </li>
               <li>
                 {{ $tr('usingKolibriItem3') }}
-                <ActionLink
-                  target="_blank"
+                <KExternalLink
                   :text="$tr('downloadLink')"
+                  openInNewTab
                   href="https://learningequality.org/download/"
                 />
               </li>
             </ul>
             <p>
               {{ $tr('usingKolibriAnswerP2') }}
-              <ActionLink
-                target="_blank"
+              <KExternalLink
                 :text="$tr('viewDocsLink')"
+                openInNewTab
                 href="https://learningequality.org/documentation/"
               />
             </p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
 
       <!-- Who are the makers of Kolibri? -->
-      <VExpansionPanelContent>
-        <template #header>
-          <h2 class="font-weight-bold subheading">
-            {{ $tr('makerQuestion') }}
-          </h2>
+      <StudioAccordion lastItem>
+        <template #left-actions>
+          {{ $tr('makerQuestion') }}
         </template>
-        <VCard>
-          <VCardText>
+
+        <StudioAccordionItem>
+          <template #content>
             <p>{{ $tr('makerAnswerP1') }}</p>
             <p>{{ $tr('makerAnswerP2') }}</p>
-          </VCardText>
-        </VCard>
-      </VExpansionPanelContent>
-    </VExpansionPanel>
-  </VContainer>
+          </template>
+        </StudioAccordionItem>
+      </StudioAccordion>
+    </div>
+
+  </div>
 
 </template>
 
 
 <script>
 
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { routerMixin } from 'shared/mixins';
+  import StudioAccordionItem from 'shared/views/StudioAccordionItem.vue';
+  import StudioAccordion from 'shared/views/StudioAccordion.vue';
 
   export default {
     name: 'CatalogFAQ',
+    components: {
+      StudioAccordionItem,
+      StudioAccordion
+    },
     mixins: [routerMixin],
-    data() {
+    setup() {
+      const { windowIsSmall } =
+        useKResponsiveWindow();
       return {
-        aboutPanel: null,
+        windowIsSmall,
       };
     },
     beforeMount() {
       this.updateTabTitle(this.$tr('faqHeader'));
     },
+    methods: {
+      openChannelAccordion() {
+        const channelAccordion = document.getElementById('channel');
+        if (channelAccordion.ariaExpanded === 'false') {
+          channelAccordion.click();
+        }
+      },
+    },
     $trs: {
       faqHeader: 'Frequently asked questions',
 
@@ -468,23 +463,30 @@
 
 <style scoped>
 
-  /deep/ .action-link {
-    font-size: inherit;
-    vertical-align: text-bottom;
+  .catalog-faq {
+    padding: 0 24px;
+  }
+
+  .main-title, .sub-title {
+    font-weight: 700;
+    font-size: 20px;
+    margin-bottom: 8px;
   }
 
-  p {
-    font-size: 12pt;
-    word-wrap: break-word;
+  .sub-title {
+    margin-top: 48px;
+    line-height: 1;
   }
 
-  .v-card__text ul {
-    padding: 0 32px;
+  .desc {
+    font-size: 16px;
+    padding: 0 4px;
   }
 
-  /* Don't set text alignment so we can handle RTL */
-  .v-expansion-panel {
-    text-align: unset;
+  .faq-accordion {
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
+     0 1px 1px 0 rgba(0, 0, 0, 0.14),
+     0 1px 3px 0 rgba(0, 0, 0, 0.12);
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
new file mode 100644
index 0000000000..df5850b3d8
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
@@ -0,0 +1,58 @@
+import { render, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import CatalogFAQ from '../CatalogFAQ.vue';
+
+const router = new VueRouter({
+  routes: [{ name: 'CATALOG_FAQ', path: '/faq' }],
+});
+
+const renderComponent = (props = {}) => {
+  return render(CatalogFAQ, {
+    props,
+    // mocks: {
+    //   $tr: key => key, // Mock translation function
+    //   $themeTokens: {
+    //     surface: '#ffffff',
+    //   },
+    //   $themePalette: {
+    //     grey: {
+    //       v_400: '#9e9e9e',
+    //       v_200: '#eeeeee',
+    //     },
+    //   },
+    // },
+    routes: router,
+  });
+};
+
+describe('CatalogFAQ test cases', () => {
+  it('renders the FAQ component', () => {
+    renderComponent();
+    const subTitle = document.querySelectorAll('.sub-title');
+    const mainTitle = document.querySelectorAll('.main-title');
+    expect(mainTitle.length).toBe(1);
+    expect(subTitle.length).toBe(3);
+  });
+
+  it('renders all FAQ items using StudioAccordion', () => {
+    renderComponent();
+    const accordions = document.querySelectorAll('.studio-accordion');
+    expect(accordions.length).toBe(15);
+  });
+
+  it('supports Enter key to toggle accordion', async () => {
+    renderComponent();
+    const firstAccordion= document.getElementById('studio-accordion');
+    expect(firstAccordion).toBeInTheDocument();
+
+    await fireEvent.keyDown(firstAccordion, { key: 'Enter', code: 'Enter' });
+
+    const accordionContent = document.querySelector('.item-content');
+    expect(accordionContent).toBeInTheDocument();
+
+    const expandedTrue = document.querySelectorAll('[aria-expanded="true"]');
+    const expandedFalse = document.querySelectorAll('[aria-expanded="false"]');
+    expect(expandedTrue.length).toBe(1);
+    expect(expandedFalse.length).toBe(14);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
new file mode 100644
index 0000000000..1ef220e6e5
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -0,0 +1,112 @@
+<template>
+
+  <div class="studio-accordion">
+    <div
+      :id="id"
+      tabindex="0"
+      :aria-expanded="showAccordionItem.toString()"
+      @click="openAccordion"
+      @keydown.enter="openAccordion"
+    >
+      <KGrid
+        :style="{
+          backgroundColor: $themeTokens.surface,
+        }"
+      >
+        <KGridItem
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 8 }"
+          :layout12="{ span: 12 }"
+          @click="openAccordion()"
+        >
+          <div
+            class="studio-accordion-header"
+          >
+            <div class="studio-accordion-title">
+              <h3> 
+                <slot name="left-actions"></slot>
+              </h3>
+            </div>
+            <div>
+              <KIcon
+                :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
+                :color="$themePalette.grey.v_400"
+                class="accordion-icon"
+              />
+            </div>
+          </div>
+        </KGridItem>
+      </KGrid>
+    </div>
+    
+    <KTransition kind="component-vertical-slide-out-in">
+      <div v-if="showAccordionItem">
+        <slot></slot>
+      </div>
+    </KTransition>
+   
+    <div
+      v-if="!lastItem"
+      :style="{
+        borderBottom: `1.5px solid ${$themePalette.grey.v_200}`,
+      }"
+    >
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'AccordionContainer',
+    props: {
+      lastItem: {
+        type: Boolean,
+        default: false
+      },
+      id: {
+        type: String,
+        default: 'studio-accordion'
+      }
+    },
+    data() {
+      return {
+        showAccordionItem: false
+      };
+    },
+    methods: {
+      openAccordion() {
+        this.showAccordionItem = !this.showAccordionItem;
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 24px;
+    cursor: pointer;
+  }
+
+  .studio-accordion-title {
+    font-weight: 700;
+    text-wrap: stable;
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  }
+
+  .accordion-icon {
+    font-size: 24px;
+  }
+
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
new file mode 100644
index 0000000000..ea8c277603
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
@@ -0,0 +1,35 @@
+<template>
+
+  <div
+    :style="{
+      backgroundColor: $themeTokens.surface,
+    }"
+  >
+    <div class="item-content">
+      <slot
+        name="content"
+      >
+      </slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'AccordionItem',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .item-content {
+    padding: 16px;
+    font-size: 16px;
+  }
+
+</style>

From bd0315ac7027dcb8c16c4e53c09927d3804c4c03 Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Wed, 29 Oct 2025 22:16:53 +0530
Subject: [PATCH 2/9] lint fixes

---
 .../channelList/views/Channel/CatalogFAQ.vue  | 32 ++++++++-----------
 .../Channel/__tests__/catalogFAQ.spec.js      |  2 +-
 .../frontend/shared/views/StudioAccordion.vue | 26 +++++++--------
 .../shared/views/StudioAccordionItem.vue      |  5 +--
 4 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index d3c924f37b..0815b6b6aa 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -26,11 +26,10 @@
     </h2>
 
     <div class="faq-accordion">
-
       <!-- How do you determine what goes into this library? -->
       <StudioAccordion>
         <template #left-actions>
-          {{$tr('selectionQuestion')}}
+          {{ $tr('selectionQuestion') }}
         </template>
 
         <StudioAccordionItem>
@@ -39,13 +38,12 @@
             <p>{{ $tr('selectionAnswerP2') }}</p>
           </template>
         </StudioAccordionItem>
-
       </StudioAccordion>
 
       <!-- How is this library created and maintained? -->
       <StudioAccordion>
         <template #left-actions>
-          {{$tr('maintenanceQuestion')}}
+          {{ $tr('maintenanceQuestion') }}
         </template>
 
         <StudioAccordionItem>
@@ -114,14 +112,12 @@
           </template>
         </StudioAccordionItem>
       </StudioAccordion>
-
     </div>
 
     <h2 class="sub-title">
       {{ $tr('usingResourcesHeader') }}
     </h2>
     <div class="faq-accordion">
-
       <!-- I found something I'm interested in and would like to start using it.
             What should I do? -->
       <StudioAccordion>
@@ -220,14 +216,12 @@
           </template>
         </StudioAccordionItem>
       </StudioAccordion>
-
     </div>
 
     <h2 class="sub-title">
       {{ $tr('aboutKolibriHeader') }}
     </h2>
     <div class="faq-accordion">
-
       <!-- What is Kolibri? -->
       <StudioAccordion>
         <template #left-actions>
@@ -307,7 +301,6 @@
         </StudioAccordionItem>
       </StudioAccordion>
     </div>
-
   </div>
 
 </template>
@@ -324,12 +317,11 @@
     name: 'CatalogFAQ',
     components: {
       StudioAccordionItem,
-      StudioAccordion
+      StudioAccordion,
     },
     mixins: [routerMixin],
     setup() {
-      const { windowIsSmall } =
-        useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         windowIsSmall,
       };
@@ -467,10 +459,11 @@
     padding: 0 24px;
   }
 
-  .main-title, .sub-title {
-    font-weight: 700;
-    font-size: 20px;
+  .main-title,
+  .sub-title {
     margin-bottom: 8px;
+    font-size: 20px;
+    font-weight: 700;
   }
 
   .sub-title {
@@ -479,14 +472,15 @@
   }
 
   .desc {
-    font-size: 16px;
     padding: 0 4px;
+    font-size: 16px;
   }
 
   .faq-accordion {
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
-     0 1px 1px 0 rgba(0, 0, 0, 0.14),
-     0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 1px 3px 0 rgba(0, 0, 0, 0.12);
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
index df5850b3d8..908b2166b1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
@@ -42,7 +42,7 @@ describe('CatalogFAQ test cases', () => {
 
   it('supports Enter key to toggle accordion', async () => {
     renderComponent();
-    const firstAccordion= document.getElementById('studio-accordion');
+    const firstAccordion = document.getElementById('studio-accordion');
     expect(firstAccordion).toBeInTheDocument();
 
     await fireEvent.keyDown(firstAccordion, { key: 'Enter', code: 'Enter' });
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index 1ef220e6e5..de437de2d2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -19,11 +19,9 @@
           :layout12="{ span: 12 }"
           @click="openAccordion()"
         >
-          <div
-            class="studio-accordion-header"
-          >
+          <div class="studio-accordion-header">
             <div class="studio-accordion-title">
-              <h3> 
+              <h3>
                 <slot name="left-actions"></slot>
               </h3>
             </div>
@@ -38,20 +36,19 @@
         </KGridItem>
       </KGrid>
     </div>
-    
+
     <KTransition kind="component-vertical-slide-out-in">
       <div v-if="showAccordionItem">
         <slot></slot>
       </div>
     </KTransition>
-   
+
     <div
       v-if="!lastItem"
       :style="{
         borderBottom: `1.5px solid ${$themePalette.grey.v_200}`,
       }"
-    >
-    </div>
+    ></div>
   </div>
 
 </template>
@@ -64,16 +61,16 @@
     props: {
       lastItem: {
         type: Boolean,
-        default: false
+        default: false,
       },
       id: {
         type: String,
-        default: 'studio-accordion'
-      }
+        default: 'studio-accordion',
+      },
     },
     data() {
       return {
-        showAccordionItem: false
+        showAccordionItem: false,
       };
     },
     methods: {
@@ -101,7 +98,8 @@
     text-wrap: stable;
   }
 
-  .fade-enter-active, .fade-leave-active {
+  .fade-enter-active,
+  .fade-leave-active {
     transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   }
 
@@ -109,4 +107,4 @@
     font-size: 24px;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
index ea8c277603..76d2eaf7c4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
@@ -6,10 +6,7 @@
     }"
   >
     <div class="item-content">
-      <slot
-        name="content"
-      >
-      </slot>
+      <slot name="content"> </slot>
     </div>
   </div>
 

From e00a18841e3e692ab2f7b652dc0d210e215c1260 Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Mon, 3 Nov 2025 22:00:42 +0530
Subject: [PATCH 3/9] updated view docs redirection

---
 .../frontend/channelList/views/Channel/CatalogFAQ.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index 0815b6b6aa..a417436354 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -280,7 +280,7 @@
               <KExternalLink
                 :text="$tr('viewDocsLink')"
                 openInNewTab
-                href="https://learningequality.org/documentation/"
+                href="https://kolibri.readthedocs.io"
               />
             </p>
           </template>

From 32a19be5c3d8ec7f22bcaac01924fd4b88b0ed98 Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Tue, 25 Nov 2025 12:45:33 +0530
Subject: [PATCH 4/9] accessibility changes

---
 .../Channel/__tests__/catalogFAQ.spec.js      | 16 ++-------
 .../frontend/shared/views/StudioAccordion.vue | 33 +++++++++----------
 2 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
index 908b2166b1..2b0805d56e 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
@@ -9,18 +9,6 @@ const router = new VueRouter({
 const renderComponent = (props = {}) => {
   return render(CatalogFAQ, {
     props,
-    // mocks: {
-    //   $tr: key => key, // Mock translation function
-    //   $themeTokens: {
-    //     surface: '#ffffff',
-    //   },
-    //   $themePalette: {
-    //     grey: {
-    //       v_400: '#9e9e9e',
-    //       v_200: '#eeeeee',
-    //     },
-    //   },
-    // },
     routes: router,
   });
 };
@@ -40,12 +28,12 @@ describe('CatalogFAQ test cases', () => {
     expect(accordions.length).toBe(15);
   });
 
-  it('supports Enter key to toggle accordion', async () => {
+  it('expands accordion to show content when user clicks button', async () => {
     renderComponent();
     const firstAccordion = document.getElementById('studio-accordion');
     expect(firstAccordion).toBeInTheDocument();
 
-    await fireEvent.keyDown(firstAccordion, { key: 'Enter', code: 'Enter' });
+    await fireEvent.click(firstAccordion);
 
     const accordionContent = document.querySelector('.item-content');
     expect(accordionContent).toBeInTheDocument();
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index de437de2d2..710a3b0f13 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -1,13 +1,7 @@
 <template>
 
   <div class="studio-accordion">
-    <div
-      :id="id"
-      tabindex="0"
-      :aria-expanded="showAccordionItem.toString()"
-      @click="openAccordion"
-      @keydown.enter="openAccordion"
-    >
+    <div>
       <KGrid
         :style="{
           backgroundColor: $themeTokens.surface,
@@ -17,22 +11,26 @@
           :layout4="{ span: 4 }"
           :layout8="{ span: 8 }"
           :layout12="{ span: 12 }"
-          @click="openAccordion()"
         >
-          <div class="studio-accordion-header">
-            <div class="studio-accordion-title">
-              <h3>
+          <h3>
+            <button
+              :id="id"
+              type="button"
+              :aria-expanded="showAccordionItem.toString()"
+              :aria-controls="id"
+              class="studio-accordion-header"
+              @click="openAccordion"
+            >
+              <span class="studio-accordion-title">
                 <slot name="left-actions"></slot>
-              </h3>
-            </div>
-            <div>
+              </span>
               <KIcon
                 :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
                 :color="$themePalette.grey.v_400"
                 class="accordion-icon"
               />
-            </div>
-          </div>
+            </button>
+          </h3>
         </KGridItem>
       </KGrid>
     </div>
@@ -42,7 +40,6 @@
         <slot></slot>
       </div>
     </KTransition>
-
     <div
       v-if="!lastItem"
       :style="{
@@ -89,6 +86,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
     padding: 10px 24px;
     cursor: pointer;
   }
@@ -105,6 +103,7 @@
 
   .accordion-icon {
     font-size: 24px;
+    text-align: right;
   }
 
 </style>

From 68ec0b949b0f8f4bbe743d9d274e5b84425c19c7 Mon Sep 17 00:00:00 2001
From: yeshwanth235 <m.yeshwanth235@gmail.com>
Date: Sun, 21 Dec 2025 22:27:01 +0530
Subject: [PATCH 5/9] addressing pr comments

---
 .../channelList/views/Channel/CatalogFAQ.vue  | 50 ++++++++++------
 .../Channel/__tests__/catalogFAQ.spec.js      |  2 +-
 .../frontend/shared/views/StudioAccordion.vue | 60 ++++++++++++-------
 3 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index a417436354..b795a12621 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -10,7 +10,7 @@
       <KButton
         :text="$tr('channelLink')"
         appearance="basic-link"
-        href="#channel"
+        href="#channel-question"
         @click="openChannelAccordion()"
       />
     </p>
@@ -27,7 +27,7 @@
 
     <div class="faq-accordion">
       <!-- How do you determine what goes into this library? -->
-      <StudioAccordion>
+      <StudioAccordion id="selection-question">
         <template #left-actions>
           {{ $tr('selectionQuestion') }}
         </template>
@@ -41,7 +41,7 @@
       </StudioAccordion>
 
       <!-- How is this library created and maintained? -->
-      <StudioAccordion>
+      <StudioAccordion id="maintenance-question">
         <template #left-actions>
           {{ $tr('maintenanceQuestion') }}
         </template>
@@ -62,7 +62,7 @@
       </StudioAccordion>
 
       <!-- Have these sources been vetted or endorsed as classroom-safe and ready? -->
-      <StudioAccordion>
+      <StudioAccordion id="endoresement-question">
         <template #left-actions>
           {{ $tr('endoresementQuestion') }}
         </template>
@@ -75,7 +75,7 @@
       </StudioAccordion>
 
       <!-- Does Learning Equality own these resources? -->
-      <StudioAccordion>
+      <StudioAccordion id="ownership-question">
         <template #left-actions>
           {{ $tr('ownershipQuestion') }}
         </template>
@@ -88,7 +88,7 @@
       </StudioAccordion>
 
       <!-- Do you add new materials? -->
-      <StudioAccordion>
+      <StudioAccordion id="new-content-question">
         <template #left-actions>
           {{ $tr('newContentQuestion') }}
         </template>
@@ -101,7 +101,10 @@
       </StudioAccordion>
 
       <!-- How can I add my own materials or recommend others' materials for this library? -->
-      <StudioAccordion lastItem>
+      <StudioAccordion
+        id="custom-content-question"
+        lastItem
+      >
         <template #left-actions>
           {{ $tr('customContentQuestion') }}
         </template>
@@ -120,7 +123,7 @@
     <div class="faq-accordion">
       <!-- I found something I'm interested in and would like to start using it.
             What should I do? -->
-      <StudioAccordion>
+      <StudioAccordion id="using-content-question">
         <template #left-actions>
           {{ $tr('usingContentQuestion') }}
         </template>
@@ -140,7 +143,7 @@
       </StudioAccordion>
 
       <!-- What is a channel? -->
-      <StudioAccordion :id="'channel'">
+      <StudioAccordion id="channel-question">
         <template #left-actions>
           {{ $tr('channelQuestion') }}
         </template>
@@ -153,7 +156,7 @@
       </StudioAccordion>
 
       <!-- How do I review the contents of the channels themselves? -->
-      <StudioAccordion>
+      <StudioAccordion id="sample-content-question">
         <template #left-actions>
           {{ $tr('sampleContentQuestion') }}
         </template>
@@ -178,7 +181,7 @@
       </StudioAccordion>
 
       <!-- I want to use some of this resource, but not all of it. What should I do? -->
-      <StudioAccordion>
+      <StudioAccordion id="partial-channel-question">
         <template #left-actions>
           {{ $tr('partialChannelQuestion') }}
         </template>
@@ -191,7 +194,7 @@
       </StudioAccordion>
 
       <!-- What is coach content? -->
-      <StudioAccordion>
+      <StudioAccordion id="coach-content-question">
         <template #left-actions>
           {{ $tr('coachContentQuestion') }}
         </template>
@@ -205,7 +208,10 @@
 
       <!-- I found a bug, broken link, or instance of mislabeled information
             within a resource. What should I do? -->
-      <StudioAccordion lastItem>
+      <StudioAccordion
+        id="issue-question"
+        lastItem
+      >
         <template #left-actions>
           {{ $tr('issueQuestion') }}
         </template>
@@ -223,7 +229,7 @@
     </h2>
     <div class="faq-accordion">
       <!-- What is Kolibri? -->
-      <StudioAccordion>
+      <StudioAccordion id="kolibri-question">
         <template #left-actions>
           {{ $tr('KolibriQuestion') }}
         </template>
@@ -241,7 +247,7 @@
       </StudioAccordion>
 
       <!-- How can I use Kolibri? -->
-      <StudioAccordion>
+      <StudioAccordion id="using-kolibri-question">
         <template #left-actions>
           {{ $tr('usingKolibriQuestion') }}
         </template>
@@ -288,7 +294,10 @@
       </StudioAccordion>
 
       <!-- Who are the makers of Kolibri? -->
-      <StudioAccordion lastItem>
+      <StudioAccordion
+        id="maker-question"
+        lastItem
+      >
         <template #left-actions>
           {{ $tr('makerQuestion') }}
         </template>
@@ -331,9 +340,12 @@
     },
     methods: {
       openChannelAccordion() {
-        const channelAccordion = document.getElementById('channel');
-        if (channelAccordion.ariaExpanded === 'false') {
-          channelAccordion.click();
+        const channelAccordion = document.getElementById('channel-question');
+        if (channelAccordion) {
+          const button = document.getElementById('channel-question');
+          if (button && button.getAttribute('aria-expanded') === 'false') {
+            button.click();
+          }
         }
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
index 2b0805d56e..2c0f0db7af 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
@@ -30,7 +30,7 @@ describe('CatalogFAQ test cases', () => {
 
   it('expands accordion to show content when user clicks button', async () => {
     renderComponent();
-    const firstAccordion = document.getElementById('studio-accordion');
+    const firstAccordion = document.getElementById('selection-question');
     expect(firstAccordion).toBeInTheDocument();
 
     await fireEvent.click(firstAccordion);
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index 710a3b0f13..263cafbdda 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -12,31 +12,37 @@
           :layout8="{ span: 8 }"
           :layout12="{ span: 12 }"
         >
-          <h3>
-            <button
+          <h3 class="studio-accordion-header">
+            <KButton
               :id="id"
-              type="button"
+              :text="$slots['left-actions'][0]['text']"
+              :primary="false"
+              appearance="flat-button"
               :aria-expanded="showAccordionItem.toString()"
               :aria-controls="id"
-              class="studio-accordion-header"
+              :appearanceOverrides="appearanceOverrides"
               @click="openAccordion"
             >
-              <span class="studio-accordion-title">
-                <slot name="left-actions"></slot>
-              </span>
-              <KIcon
-                :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
-                :color="$themePalette.grey.v_400"
-                class="accordion-icon"
-              />
-            </button>
+              <template #iconAfter>
+                <KIcon
+                  :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
+                  :color="$themePalette.grey.v_400"
+                  class="accordion-icon"
+                />
+              </template>
+            </KButton>
           </h3>
         </KGridItem>
       </KGrid>
     </div>
 
     <KTransition kind="component-vertical-slide-out-in">
-      <div v-if="showAccordionItem">
+      <div
+        v-if="showAccordionItem"
+        :id="`${id}-content`"
+        role="region"
+        :aria-labelledby="id"
+      >
         <slot></slot>
       </div>
     </KTransition>
@@ -70,6 +76,22 @@
         showAccordionItem: false,
       };
     },
+    computed: {
+      appearanceOverrides() {
+        return {
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '10px 24px',
+          textAlign: 'left',
+          cursor: 'pointer',
+          textTransform: 'none',
+          textWrap: 'stable',
+          lineHeight: '18px',
+        };
+      },
+    },
     methods: {
       openAccordion() {
         this.showAccordionItem = !this.showAccordionItem;
@@ -83,12 +105,9 @@
 <style lang="scss" scoped>
 
   .studio-accordion-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px 24px;
-    cursor: pointer;
+    ::v-deep .link-text {
+      width: 100%;
+    }
   }
 
   .studio-accordion-title {
@@ -102,6 +121,7 @@
   }
 
   .accordion-icon {
+    flex-shrink: 0;
     font-size: 24px;
     text-align: right;
   }

From b2b37a237f62b30bf2fef39b88ad985f48ad304a Mon Sep 17 00:00:00 2001
From: yeshwanth235 <m.yeshwanth235@gmail.com>
Date: Sun, 21 Dec 2025 22:43:49 +0530
Subject: [PATCH 6/9] small change

---
 .../contentcuration/frontend/shared/views/StudioAccordion.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index 263cafbdda..5f3ef75453 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -16,7 +16,6 @@
             <KButton
               :id="id"
               :text="$slots['left-actions'][0]['text']"
-              :primary="false"
               appearance="flat-button"
               :aria-expanded="showAccordionItem.toString()"
               :aria-controls="id"

From b4e4a160ed3a9a1fefee76332f1c18e1c8740dd7 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Mon, 2 Feb 2026 11:10:48 +0300
Subject: [PATCH 7/9] References panel element with correct id

---
 .../contentcuration/frontend/shared/views/StudioAccordion.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index 5f3ef75453..dfefc1cd69 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -18,7 +18,7 @@
               :text="$slots['left-actions'][0]['text']"
               appearance="flat-button"
               :aria-expanded="showAccordionItem.toString()"
-              :aria-controls="id"
+              :aria-controls="`${id}-content`"
               :appearanceOverrides="appearanceOverrides"
               @click="openAccordion"
             >

From 026518208264f25416f130598d38a528eb4160f8 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Thu, 5 Feb 2026 18:29:18 +0300
Subject: [PATCH 8/9] Code clean up

---
 .../channelList/views/Channel/CatalogFAQ.vue  | 325 ++++++++----------
 .../Channel/__tests__/catalogFAQ.spec.js      |  60 +++-
 .../frontend/shared/views/StudioAccordion.vue |  82 +++--
 .../shared/views/StudioAccordionItem.vue      |  32 --
 .../views/__tests__/studioAccordion.spec.js   |  73 ++++
 5 files changed, 307 insertions(+), 265 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/studioAccordion.spec.js

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index b795a12621..bcea83be46 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -1,9 +1,10 @@
 <template>
 
   <div :class="{ 'catalog-faq': !windowIsSmall }">
-    <h2 class="main-title">
+    <h1 class="visuallyhidden">{{ $tr('faqHeader') }}</h1>
+    <p class="main-title">
       {{ $tr('aboutHeader') }}
-    </h2>
+    </p>
     <p class="desc">
       {{ $tr('descriptionP1') }}
 
@@ -11,7 +12,7 @@
         :text="$tr('channelLink')"
         appearance="basic-link"
         href="#channel-question"
-        @click="openChannelAccordion()"
+        @click="$refs.channelAccordion.openAccordion()"
       />
     </p>
     <p class="desc">
@@ -28,76 +29,66 @@
     <div class="faq-accordion">
       <!-- How do you determine what goes into this library? -->
       <StudioAccordion id="selection-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('selectionQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('selectionAnswerP1') }}</p>
-            <p>{{ $tr('selectionAnswerP2') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('selectionAnswerP1') }}</p>
+          <p>{{ $tr('selectionAnswerP2') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- How is this library created and maintained? -->
       <StudioAccordion id="maintenance-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('maintenanceQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('maintenanceAnswerP1') }}</p>
-            <p>
-              {{ $tr('maintenanceAnswerP2') }}
-              <KExternalLink
-                :text="$tr('viewIntegrationGuide')"
-                openInNewTab
-                href="http://learningequality.org/r/integration-guide"
-              />
-            </p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('maintenanceAnswerP1') }}</p>
+          <p>
+            {{ $tr('maintenanceAnswerP2') }}
+            <KExternalLink
+              :text="$tr('viewIntegrationGuide')"
+              openInNewTab
+              href="http://learningequality.org/r/integration-guide"
+            />
+          </p>
+        </template>
       </StudioAccordion>
 
       <!-- Have these sources been vetted or endorsed as classroom-safe and ready? -->
       <StudioAccordion id="endoresement-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('endoresementQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('endorsementAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('endorsementAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- Does Learning Equality own these resources? -->
       <StudioAccordion id="ownership-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('ownershipQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('ownershipAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('ownershipAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- Do you add new materials? -->
       <StudioAccordion id="new-content-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('newContentQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('newContentAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('newContentAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- How can I add my own materials or recommend others' materials for this library? -->
@@ -105,15 +96,13 @@
         id="custom-content-question"
         lastItem
       >
-        <template #left-actions>
+        <template #title>
           {{ $tr('customContentQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('customContentAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('customContentAnswer') }}</p>
+        </template>
       </StudioAccordion>
     </div>
 
@@ -124,86 +113,79 @@
       <!-- I found something I'm interested in and would like to start using it.
             What should I do? -->
       <StudioAccordion id="using-content-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('usingContentQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>
-              {{ $tr('usingContentAnswer') }}
-              <KExternalLink
-                :text="$tr('viewGettingStartedLink')"
-                openInNewTab
-                href="https://learningequality.org/documentation/"
-              />
-            </p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>
+            {{ $tr('usingContentAnswer') }}
+            <KExternalLink
+              :text="$tr('viewGettingStartedLink')"
+              openInNewTab
+              href="https://learningequality.org/documentation/"
+            />
+          </p>
+        </template>
       </StudioAccordion>
 
       <!-- What is a channel? -->
-      <StudioAccordion id="channel-question">
-        <template #left-actions>
+      <StudioAccordion
+        id="channel-question"
+        ref="channelAccordion"
+      >
+        <template #title>
           {{ $tr('channelQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('channelAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('channelAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- How do I review the contents of the channels themselves? -->
       <StudioAccordion id="sample-content-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('sampleContentQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('sampleContentAnswer') }}</p>
-            <ul>
-              <li>{{ $tr('sampleContentAnswerItem1') }}</li>
-              <li>{{ $tr('sampleContentAnswerItem2') }}</li>
-              <li>
-                {{ $tr('sampleContentAnswerItem3') }}
-                <KExternalLink
-                  :text="$tr('downloadKolibriLink')"
-                  openInNewTab
-                  href="https://learningequality.org/download"
-                />
-              </li>
-            </ul>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('sampleContentAnswer') }}</p>
+          <ul>
+            <li>{{ $tr('sampleContentAnswerItem1') }}</li>
+            <li>{{ $tr('sampleContentAnswerItem2') }}</li>
+            <li>
+              {{ $tr('sampleContentAnswerItem3') }}
+              <KExternalLink
+                :text="$tr('downloadKolibriLink')"
+                openInNewTab
+                href="https://learningequality.org/download"
+              />
+            </li>
+          </ul>
+        </template>
       </StudioAccordion>
 
       <!-- I want to use some of this resource, but not all of it. What should I do? -->
       <StudioAccordion id="partial-channel-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('partialChannelQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('partialChannelAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('partialChannelAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- What is coach content? -->
       <StudioAccordion id="coach-content-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('coachContentQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('coachContentAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('coachContentAnswer') }}</p>
+        </template>
       </StudioAccordion>
 
       <!-- I found a bug, broken link, or instance of mislabeled information
@@ -212,15 +194,13 @@
         id="issue-question"
         lastItem
       >
-        <template #left-actions>
+        <template #title>
           {{ $tr('issueQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('issueAnswer') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('issueAnswer') }}</p>
+        </template>
       </StudioAccordion>
     </div>
 
@@ -230,67 +210,63 @@
     <div class="faq-accordion">
       <!-- What is Kolibri? -->
       <StudioAccordion id="kolibri-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('KolibriQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('KolibriAnswer') }}</p>
-            <ul>
-              <li>{{ $tr('KolibriAnswerItem1') }}</li>
-              <li>{{ $tr('KolibriAnswerItem2') }}</li>
-              <li>{{ $tr('KolibriAnswerItem3') }}</li>
-            </ul>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('KolibriAnswer') }}</p>
+          <ul>
+            <li>{{ $tr('KolibriAnswerItem1') }}</li>
+            <li>{{ $tr('KolibriAnswerItem2') }}</li>
+            <li>{{ $tr('KolibriAnswerItem3') }}</li>
+          </ul>
+        </template>
       </StudioAccordion>
 
       <!-- How can I use Kolibri? -->
       <StudioAccordion id="using-kolibri-question">
-        <template #left-actions>
+        <template #title>
           {{ $tr('usingKolibriQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('usingKolibriAnswerP1') }}</p>
-            <ul>
-              <li>
-                {{ $tr('usingKolibriItem1') }}
-                <KExternalLink
-                  :text="$tr('visitWebsiteLink')"
-                  openInNewTab
-                  href="https://learningequality.org/kolibri/"
-                />
-              </li>
-              <li>
-                {{ $tr('usingKolibriItem2') }}
-                <KExternalLink
-                  :text="$tr('viewDemoLink')"
-                  openInNewTab
-                  href="https://kolibri-demo.learningequality.org/en/user/#/signin"
-                />
-              </li>
-              <li>
-                {{ $tr('usingKolibriItem3') }}
-                <KExternalLink
-                  :text="$tr('downloadLink')"
-                  openInNewTab
-                  href="https://learningequality.org/download/"
-                />
-              </li>
-            </ul>
-            <p>
-              {{ $tr('usingKolibriAnswerP2') }}
+        <template #body>
+          <p>{{ $tr('usingKolibriAnswerP1') }}</p>
+          <ul>
+            <li>
+              {{ $tr('usingKolibriItem1') }}
+              <KExternalLink
+                :text="$tr('visitWebsiteLink')"
+                openInNewTab
+                href="https://learningequality.org/kolibri/"
+              />
+            </li>
+            <li>
+              {{ $tr('usingKolibriItem2') }}
               <KExternalLink
-                :text="$tr('viewDocsLink')"
+                :text="$tr('viewDemoLink')"
                 openInNewTab
-                href="https://kolibri.readthedocs.io"
+                href="https://kolibri-demo.learningequality.org/en/user/#/signin"
               />
-            </p>
-          </template>
-        </StudioAccordionItem>
+            </li>
+            <li>
+              {{ $tr('usingKolibriItem3') }}
+              <KExternalLink
+                :text="$tr('downloadLink')"
+                openInNewTab
+                href="https://learningequality.org/download/"
+              />
+            </li>
+          </ul>
+          <p>
+            {{ $tr('usingKolibriAnswerP2') }}
+            <KExternalLink
+              :text="$tr('viewDocsLink')"
+              openInNewTab
+              href="https://kolibri.readthedocs.io"
+            />
+          </p>
+        </template>
       </StudioAccordion>
 
       <!-- Who are the makers of Kolibri? -->
@@ -298,16 +274,14 @@
         id="maker-question"
         lastItem
       >
-        <template #left-actions>
+        <template #title>
           {{ $tr('makerQuestion') }}
         </template>
 
-        <StudioAccordionItem>
-          <template #content>
-            <p>{{ $tr('makerAnswerP1') }}</p>
-            <p>{{ $tr('makerAnswerP2') }}</p>
-          </template>
-        </StudioAccordionItem>
+        <template #body>
+          <p>{{ $tr('makerAnswerP1') }}</p>
+          <p>{{ $tr('makerAnswerP2') }}</p>
+        </template>
       </StudioAccordion>
     </div>
   </div>
@@ -319,13 +293,11 @@
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { routerMixin } from 'shared/mixins';
-  import StudioAccordionItem from 'shared/views/StudioAccordionItem.vue';
   import StudioAccordion from 'shared/views/StudioAccordion.vue';
 
   export default {
     name: 'CatalogFAQ',
     components: {
-      StudioAccordionItem,
       StudioAccordion,
     },
     mixins: [routerMixin],
@@ -338,17 +310,6 @@
     beforeMount() {
       this.updateTabTitle(this.$tr('faqHeader'));
     },
-    methods: {
-      openChannelAccordion() {
-        const channelAccordion = document.getElementById('channel-question');
-        if (channelAccordion) {
-          const button = document.getElementById('channel-question');
-          if (button && button.getAttribute('aria-expanded') === 'false') {
-            button.click();
-          }
-        }
-      },
-    },
     $trs: {
       faqHeader: 'Frequently asked questions',
 
@@ -465,7 +426,9 @@
 </script>
 
 
-<style scoped>
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
 
   .catalog-faq {
     padding: 0 24px;
@@ -489,10 +452,18 @@
   }
 
   .faq-accordion {
-    box-shadow:
-      0 2px 1px -1px rgba(0, 0, 0, 0.2),
-      0 1px 1px 0 rgba(0, 0, 0, 0.14),
-      0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    @extend %dropshadow-1dp;
+  }
+
+  .visuallyhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
index 2c0f0db7af..1c50ca0220 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFAQ.spec.js
@@ -1,4 +1,5 @@
-import { render, fireEvent } from '@testing-library/vue';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import VueRouter from 'vue-router';
 import CatalogFAQ from '../CatalogFAQ.vue';
 
@@ -16,31 +17,54 @@ const renderComponent = (props = {}) => {
 describe('CatalogFAQ test cases', () => {
   it('renders the FAQ component', () => {
     renderComponent();
-    const subTitle = document.querySelectorAll('.sub-title');
-    const mainTitle = document.querySelectorAll('.main-title');
-    expect(mainTitle.length).toBe(1);
-    expect(subTitle.length).toBe(3);
+    const mainTitle = screen.getByText('Welcome to the Kolibri Content Library Catalog!');
+    const subTitle = screen.getByText('About the Kolibri Content Library');
+    expect(mainTitle).toBeInTheDocument();
+    expect(subTitle).toBeInTheDocument();
   });
 
-  it('renders all FAQ items using StudioAccordion', () => {
+  it('renders all FAQ items using StudioAccordion', async () => {
     renderComponent();
-    const accordions = document.querySelectorAll('.studio-accordion');
-    expect(accordions.length).toBe(15);
+    const accordionTitles = [
+      'How does Learning Equality determine what goes into this library?',
+      'How is this library created and maintained?',
+      'Have these sources been vetted or endorsed as classroom-safe and ready?',
+      'Does Learning Equality own these resources?',
+      'Does Learning Equality add new materials?',
+      'How can I add my own materials or recommend materials from other creators for this library?',
+      "I found something I'm interested in and would like to start using it. What should I do?",
+      'What is a channel?',
+      'How do I review the contents of the channels themselves?',
+      'I want to use some of the resources in this channel, but not all of it. What should I do?',
+      "What are 'resources for coaches'?",
+      'I found a bug, broken link, or some mislabeled information within a resource. What should I do?',
+      'What is Kolibri?',
+      'How can I use Kolibri?',
+      'Who are the makers of Kolibri?',
+    ];
+    expect(accordionTitles.length).toBe(15);
+    accordionTitles.forEach(title => {
+      expect(screen.getByRole('button', { name: title })).toBeInTheDocument();
+    });
   });
 
-  it('expands accordion to show content when user clicks button', async () => {
+  it('toggles the channel accordion when clicking the channel link button', async () => {
+    const user = userEvent.setup();
+
     renderComponent();
-    const firstAccordion = document.getElementById('selection-question');
-    expect(firstAccordion).toBeInTheDocument();
+    const channelLinkButton = screen.getByRole('link', { name: /What is a channel\?/i });
+    const accordion = screen.getByRole('button', { name: 'What is a channel?' });
+    const descriptionText = /A channel is Kolibri’s unit of organization for digital content./;
 
-    await fireEvent.click(firstAccordion);
+    // Accordion content should not be visible initially
+    expect(accordion).toBeInTheDocument();
+    expect(screen.queryByText(descriptionText)).not.toBeInTheDocument();
 
-    const accordionContent = document.querySelector('.item-content');
-    expect(accordionContent).toBeInTheDocument();
+    // Click link button to expand accordion
+    await user.click(channelLinkButton);
 
-    const expandedTrue = document.querySelectorAll('[aria-expanded="true"]');
-    const expandedFalse = document.querySelectorAll('[aria-expanded="false"]');
-    expect(expandedTrue.length).toBe(1);
-    expect(expandedFalse.length).toBe(14);
+    // Accordion content should be visible
+    expect(accordion).toBeInTheDocument();
+    expect(screen.getByText(descriptionText)).toBeInTheDocument();
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
index dfefc1cd69..fa81f5d5ce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioAccordion.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="studio-accordion">
+  <div class="accordion">
     <div>
       <KGrid
         :style="{
@@ -12,24 +12,21 @@
           :layout8="{ span: 8 }"
           :layout12="{ span: 12 }"
         >
-          <h3 class="studio-accordion-header">
-            <KButton
+          <h3 class="accordion-title">
+            <button
               :id="id"
-              :text="$slots['left-actions'][0]['text']"
-              appearance="flat-button"
               :aria-expanded="showAccordionItem.toString()"
               :aria-controls="`${id}-content`"
-              :appearanceOverrides="appearanceOverrides"
+              :class="$computedClass(coreOutlineFocus)"
               @click="openAccordion"
             >
-              <template #iconAfter>
-                <KIcon
-                  :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
-                  :color="$themePalette.grey.v_400"
-                  class="accordion-icon"
-                />
-              </template>
-            </KButton>
+              <slot name="title"></slot>
+              <KIcon
+                :icon="showAccordionItem ? 'chevronUp' : 'chevronDown'"
+                :color="$themePalette.grey.v_400"
+                class="accordion-icon"
+              />
+            </button>
           </h3>
         </KGridItem>
       </KGrid>
@@ -41,14 +38,18 @@
         :id="`${id}-content`"
         role="region"
         :aria-labelledby="id"
+        class="accordion-body"
+        :style="{
+          backgroundColor: $themeTokens.surface,
+        }"
       >
-        <slot></slot>
+        <slot name="body"> </slot>
       </div>
     </KTransition>
     <div
       v-if="!lastItem"
       :style="{
-        borderBottom: `1.5px solid ${$themePalette.grey.v_200}`,
+        borderBottom: `1.5px solid ${$themeTokens.fineLine}`,
       }"
     ></div>
   </div>
@@ -67,27 +68,22 @@
       },
       id: {
         type: String,
-        default: 'studio-accordion',
+        default: 'accordion',
       },
     },
+    expose: ['openAccordion'],
     data() {
       return {
         showAccordionItem: false,
       };
     },
     computed: {
-      appearanceOverrides() {
+      coreOutlineFocus() {
         return {
-          width: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '10px 24px',
-          textAlign: 'left',
-          cursor: 'pointer',
-          textTransform: 'none',
-          textWrap: 'stable',
-          lineHeight: '18px',
+          ':focus': {
+            ...this.$coreOutline,
+            outlineOffset: '-2px',
+          },
         };
       },
     },
@@ -103,20 +99,30 @@
 
 <style lang="scss" scoped>
 
-  .studio-accordion-header {
-    ::v-deep .link-text {
-      width: 100%;
-    }
-  }
-
-  .studio-accordion-title {
+  .accordion-title {
+    margin: 0;
     font-weight: 700;
     text-wrap: stable;
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 14px 24px;
+      line-height: 18px;
+      text-align: left;
+      text-transform: none;
+      text-wrap: stable;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+    }
   }
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  .accordion-body {
+    padding: 16px;
+    font-size: 16px;
   }
 
   .accordion-icon {
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue b/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
deleted file mode 100644
index 76d2eaf7c4..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/StudioAccordionItem.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-
-  <div
-    :style="{
-      backgroundColor: $themeTokens.surface,
-    }"
-  >
-    <div class="item-content">
-      <slot name="content"> </slot>
-    </div>
-  </div>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'AccordionItem',
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .item-content {
-    padding: 16px;
-    font-size: 16px;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/studioAccordion.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/studioAccordion.spec.js
new file mode 100644
index 0000000000..d6fc63dc52
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/studioAccordion.spec.js
@@ -0,0 +1,73 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import StudioAccordion from '../StudioAccordion.vue';
+
+const router = new VueRouter({
+  routes: [{ name: 'ACCORDION', path: '/accordion' }],
+});
+
+const renderAccordion = (props = {}) => {
+  return render(StudioAccordion, {
+    props: {
+      id: 'test-accordion',
+      ...props,
+    },
+    routes: router,
+    slots: {
+      title: 'Accordion Title',
+      body: 'Accordion content goes here',
+    },
+  });
+};
+
+describe('StudioAccordion', () => {
+  it('renders with title and collapsed content by default', () => {
+    const { getByText, queryByText } = renderAccordion();
+
+    expect(getByText('Accordion Title')).toBeInTheDocument();
+    expect(queryByText('Accordion content goes here')).not.toBeInTheDocument();
+  });
+
+  it('establishes correct ARIA relationship between button and content', () => {
+    const { getByRole } = renderAccordion({ id: 'my-accordion' });
+    const button = getByRole('button', { name: /Accordion Title/i });
+
+    expect(button).toHaveAttribute('id', 'my-accordion');
+    expect(button).toHaveAttribute('aria-controls', 'my-accordion-content');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('toggles accordion content when button is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText, queryByText } = renderAccordion();
+
+    const button = getByRole('button', { name: /Accordion Title/i });
+
+    // Initially collapsed
+    expect(queryByText('Accordion content goes here')).not.toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    // Click to expand
+    await user.click(button);
+    expect(getByText('Accordion content goes here')).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    // Click to collapse
+    await user.click(button);
+    expect(queryByText('Accordion content goes here')).not.toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('renders content region with correct ARIA attributes when expanded', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderAccordion({ id: 'my-accordion' });
+
+    const button = getByRole('button', { name: /Accordion Title/i });
+    await user.click(button);
+
+    const region = getByRole('region');
+    expect(region).toHaveAttribute('id', 'my-accordion-content');
+    expect(region).toHaveAttribute('aria-labelledby', 'my-accordion');
+  });
+});

From 60b7dfb6a68983591b9fa06b28eea231a453a387 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Mon, 9 Feb 2026 16:10:10 +0100
Subject: [PATCH 9/9] Remove visuallyhidden style definition

This is newly provided by KDS so not needed in Studio.
---
 .../frontend/channelList/views/Channel/CatalogFAQ.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
index bcea83be46..08001daacc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFAQ.vue
@@ -455,15 +455,4 @@
     @extend %dropshadow-1dp;
   }
 
-  .visuallyhidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    border: 0;
-  }
-
 </style>