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/4] 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/4] 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/4] 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/4] 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>