Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Collapsible section accessibility improvements

Browse Source
This commit is contained in:
James Lyne 2021-05-25 22:40:10 +01:00
parent 100fdc781b
commit 0690b3d500
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/sidebar/CollapsibleSection.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<section :class="{'sidebar__section': true, 'section--collapsed': collapsed}"> <section :class="{'sidebar__section': true, 'section--collapsed': collapsed}">
<button type="button" class="section__heading" <button :id="`${name}-heading`" type="button" class="section__heading"
@click.prevent="toggle" @keypress.prevent="handleKeypress" :title="title"> @click.prevent="toggle" @keydown.prevent="handleKeydown" :title="title"
:aria-expanded="!collapsed" :aria-controls="`${name}-content`">
<slot name="heading"></slot> <slot name="heading"></slot>
</button> </button>
<ul class="section__content menu"> <div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed">
<slot></slot> <slot></slot>
</ul> </div>
</section> </section>
</template> </template>
@ -20,7 +21,7 @@
props: { props: {
name: { name: {
type: Object as () => LiveAtlasSidebarSection, type: String as () => LiveAtlasSidebarSection,
required: true, required: true,
} }
}, },
@ -36,7 +37,7 @@
}, },
methods: { methods: {
handleKeypress(e: KeyboardEvent) { handleKeydown(e: KeyboardEvent) {
if(e.key !== ' ' && e.key !== 'Enter') { if(e.key !== ' ' && e.key !== 'Enter') {
return; return;
} }