Sidebar tweaks

src/components/Sidebar.vue

@@ -97,11 +97,11 @@ export default defineComponent({
 
 	methods: {
 		handleKeydown(e: KeyboardEvent) {
-			if(!e.target || !(e.target as HTMLElement).classList.contains('section__heading')) {
+			if(!e.target || !(e.target as HTMLElement).matches('.section__heading button')) {
 				return;
 			}
 
-			const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading')),
+			const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button')),
 				position = sectionHeadings.indexOf(e.target as HTMLElement);
 
 			if(position === -1) {
@@ -234,28 +234,32 @@ export default defineComponent({
 		flex: 0 0 auto;
 
 		.section__heading {
-			font-size: 2rem;
 			cursor: pointer;
 			user-select: none;
-			padding: 1.5rem 1.5rem 1rem;
-			margin: -1.5rem -1.5rem 0;
-			background-color: transparent;
-			color: inherit;
 			text-align: left;
-			display: flex;
 			align-items: center;
-			width: calc(100% + 3rem);
+			margin: 0;
+
+			button {
+				display: flex;
+				font-size: 2rem;
+				padding: 1.5rem 1.5rem 1rem;
+				margin: -1.5rem -1.5rem 0;
+				background-color: transparent;
+				color: inherit;
+				width: calc(100% + 3rem);
+
+				.svg-icon {
+					margin-left: auto;
+					width: 1.5rem;
+					height: 1.5rem;
+				}
+			}
 
 			&:hover, &:focus-visible, &.focus-visible, &:active {
 				background-color: transparent;
 				color: inherit;
 			}
-
-			.svg-icon {
-				margin-left: auto;
-				width: 1.5rem;
-                height: 1.5rem;
-			}
 		}
 
 		.section__content {
@@ -276,7 +280,7 @@ export default defineComponent({
 		}
 
 		&.section--collapsed {
-			.section__heading {
+			.section__heading button {
 				padding-bottom: 1.5rem;
 				margin-bottom: -1.5rem;
 			}

src/components/sidebar/CollapsibleSection.vue

@@ -1,7 +1,7 @@
 <template>
 	<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
-		<h2>
-			<button :id="`${name}-heading`" type="button" class="section__heading"
+		<h2 class="section__heading">
+			<button :id="`${name}-heading`" type="button"
 			        @click.prevent="toggle" :title="title"
 			        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
 				<span>

src/components/sidebar/ServerListItem.vue

@@ -17,7 +17,7 @@
 <template>
 	<li :class="{'server': true, 'server--selected': selected}" role="none">
 		<button type="button" :class="{'active': selected}"
-		        role="option" :aria-pressed="selected" :title="server.label || server.id"
+		        role="radio" :aria-checked="selected" :title="server.label || server.id"
 			    @click="setCurrentServer(server.id)">{{ server.label || server.id }}
 		</button>
 	</li>