refactor(CAccordion): improve component accessibility

coreui · mrholek · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
commit 8c2827790d607a449aeafc821a80d7848a8438ba
diff --git 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
@@ -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
@@ -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)