From 8c2827790d607a449aeafc821a80d7848a8438ba Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Jan 2025 22:39:15 +0100
Subject: [PATCH 1/2] refactor(CAccordion): improve component accessibility

---
 .../src/components/accordion/CAccordionBody.ts     |  3 ++-
 .../src/components/accordion/CAccordionButton.ts   |  4 +++-
 .../src/components/accordion/CAccordionItem.ts     | 14 +++++++++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
index 4a8d83ff..c8907021 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
@@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse'
 const CAccordionBody = defineComponent({
   name: 'CAccordionBody',
   setup(_, { slots }) {
+    const id = inject('id')
     const visible = inject('visible') as Ref<boolean>
     return () =>
       h(
         CCollapse,
-        { class: 'accordion-collapse', visible: visible.value },
+        { class: 'accordion-collapse', id, visible: visible.value },
         {
           default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()),
         },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
index 69ab7a00..f9820b4a 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
@@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue'
 const CAccordionButton = defineComponent({
   name: 'CAccordionButton',
   setup(_, { slots }) {
+    const id = inject('id') as string
     const toggleVisibility = inject('toggleVisibility') as () => void
     const visible = inject('visible') as Ref<boolean>
 
@@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({
         'button',
         {
           type: 'button',
-          'aria-expanded': !visible.value,
+          'aria-control': id,
+          'aria-expanded': visible.value,
           class: ['accordion-button', { ['collapsed']: !visible.value }],
           onClick: () => toggleVisibility(),
         },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
index 20575085..f2ebe594 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
@@ -1,8 +1,12 @@
-import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue'
+import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue'
 
 const CAccordionItem = defineComponent({
   name: 'CAccordionItem',
   props: {
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: String,
     /**
      * The item key.
      */
@@ -13,16 +17,20 @@ const CAccordionItem = defineComponent({
     const alwaysOpen = inject('alwaysOpen') as boolean
     const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
 
-    const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11))
+    const id = props.id ?? useId()
+    const itemKey = ref(props.itemKey ?? id)
     const visible = ref(Boolean(activeItemKey.value === itemKey.value))
 
     watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value)))
 
     const toggleVisibility = () => {
       visible.value = !visible.value
-      !alwaysOpen && visible && setActiveItemKey(itemKey.value)
+      if (!alwaysOpen && visible) {
+        setActiveItemKey(itemKey.value)
+      }
     }
 
+    provide('id', id)
     provide('visible', visible)
     provide('toggleVisibility', toggleVisibility)
 

From 7a65f3674bca057e74196736d8d052f7c765034b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Jan 2025 22:46:32 +0100
Subject: [PATCH 2/2] fix(CNavGroup): add the missing href attribute to the
 toggler

---
 packages/coreui-vue/src/components/nav/CNavGroup.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/nav/CNavGroup.ts b/packages/coreui-vue/src/components/nav/CNavGroup.ts
index 2c83ccdf..7c45bd7c 100644
--- a/packages/coreui-vue/src/components/nav/CNavGroup.ts
+++ b/packages/coreui-vue/src/components/nav/CNavGroup.ts
@@ -41,7 +41,10 @@ const CNavGroup = defineComponent({
 
     onMounted(() => {
       visible.value = props.visible
-      props.visible && navGroupRef.value.classList.add('show')
+      if (props.visible) {
+        navGroupRef.value.classList.add('show')
+      }
+
       emit('visible-change', visible.value)
     })
 
@@ -60,7 +63,8 @@ const CNavGroup = defineComponent({
       emit('visible-change', visible.value)
     })
 
-    const handleTogglerClick = () => {
+    const handleTogglerClick = (event: Event) => {
+      event.preventDefault()
       visible.value = !visible.value
       emit('visible-change', visible.value)
     }
@@ -111,6 +115,7 @@ const CNavGroup = defineComponent({
               'a',
               {
                 class: ['nav-link', 'nav-group-toggle'],
+                href: '#',
                 onClick: handleTogglerClick,
               },
               slots.togglerContent && slots.togglerContent(),

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coreui/coreui-vue/pull/296.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coreui/coreui-vue/pull/296.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coreui/coreui-vue/pull/296.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coreui/coreui-vue/pull/296.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>