From 0690b3d5002fea8ea6efe539c2cdc1916a57c06f Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 25 May 2021 22:40:10 +0100
Subject: [PATCH] Collapsible section accessibility improvements

---
 src/components/sidebar/CollapsibleSection.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

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