From 8c2827790d607a449aeafc821a80d7848a8438ba Mon Sep 17 00:00:00 2001 From: mrholek 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 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 @@ -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 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(),