Commit8c28277

committed

refactor(CAccordion): improve component accessibility

1 parent342ba88 commit8c28277Copy full SHA for 8c28277

File tree

+16

-5

lines changed

+16

-5

lines changed

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse'`
`4`	`4`	`constCAccordionBody=defineComponent({`
`5`	`5`	`name:'CAccordionBody',`
`6`	`6`	`setup(_,{ slots}){`
	`7`	`+constid=inject('id')`
`7`	`8`	`constvisible=inject('visible')asRef<boolean>`
`8`	`9`	`return()=>`
`9`	`10`	`h(`
`10`	`11`	`CCollapse,`
`11`		`-{class:'accordion-collapse',visible:visible.value},`
	`12`	`+{class:'accordion-collapse',id,visible:visible.value},`
`12`	`13`	`{`
`13`	`14`	`default:()=>h('div',{class:['accordion-body']},slots.default&&slots.default()),`
`14`	`15`	`},`

Lines changed: 3 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue'`
`3`	`3`	`constCAccordionButton=defineComponent({`
`4`	`4`	`name:'CAccordionButton',`
`5`	`5`	`setup(_,{ slots}){`
	`6`	`+constid=inject('id')asstring`
`6`	`7`	`consttoggleVisibility=inject('toggleVisibility')as()=>void`
`7`	`8`	`constvisible=inject('visible')asRef<boolean>`
`8`	`9`
`@@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({`
`11`	`12`	`'button',`
`12`	`13`	`{`
`13`	`14`	`type:'button',`
`14`		`-'aria-expanded':!visible.value,`
	`15`	`+'aria-control':id,`
	`16`	`+'aria-expanded':visible.value,`
`15`	`17`	`class:['accordion-button',{['collapsed']:!visible.value}],`
`16`	`18`	`onClick:()=>toggleVisibility(),`
`17`	`19`	`},`

Lines changed: 11 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,12 @@`
`1`		`-import{defineComponent,h,inject,provide,ref,watch,Ref}from'vue'`
	`1`	`+import{defineComponent,h,inject,provide,ref,watch,Ref,useId}from'vue'`
`2`	`2`
`3`	`3`	`constCAccordionItem=defineComponent({`
`4`	`4`	`name:'CAccordionItem',`
`5`	`5`	`props:{`
	`6`	`+/**`
	`7`	`+ * The id global attribute defines an identifier (ID) that must be unique in the whole document.`
	`8`	`+ */`
	`9`	`+id:String,`
`6`	`10`	`/**`
`7`	`11`	`* The item key.`
`8`	`12`	`*/`
`@@ -13,16 +17,20 @@ const CAccordionItem = defineComponent({`
`13`	`17`	`constalwaysOpen=inject('alwaysOpen')asboolean`
`14`	`18`	`constsetActiveItemKey=inject('setActiveItemKey')as(key:number\|string)=>void`
`15`	`19`
`16`		`-constitemKey=ref(props.itemKey??Math.random().toString(36).slice(2,11))`
	`20`	`+constid=props.id??useId()`
	`21`	`+constitemKey=ref(props.itemKey??id)`
`17`	`22`	`constvisible=ref(Boolean(activeItemKey.value===itemKey.value))`
`18`	`23`
`19`	`24`	`watch(activeItemKey,()=>(visible.value=Boolean(activeItemKey.value===itemKey.value)))`
`20`	`25`
`21`	`26`	`consttoggleVisibility=()=>{`
`22`	`27`	`visible.value=!visible.value`
`23`		`-!alwaysOpen&&visible&&setActiveItemKey(itemKey.value)`
	`28`	`+if(!alwaysOpen&&visible){`
	`29`	`+setActiveItemKey(itemKey.value)`
	`30`	`+}`
`24`	`31`	`}`
`25`	`32`
	`33`	`+provide('id',id)`
`26`	`34`	`provide('visible',visible)`
`27`	`35`	`provide('toggleVisibility',toggleVisibility)`
`28`	`36`

Comments

(0)