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,23 +234,21 @@ export default defineComponent({
 		flex: 0 0 auto;
 
 		.section__heading {
-			font-size: 2rem;
 			cursor: pointer;
 			user-select: none;
+			text-align: left;
+			align-items: center;
+			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;
-			text-align: left;
-			display: flex;
-			align-items: center;
 				width: calc(100% + 3rem);
 
-			&:hover, &:focus-visible, &.focus-visible, &:active {
-				background-color: transparent;
-				color: inherit;
-			}
-
 				.svg-icon {
 					margin-left: auto;
 					width: 1.5rem;
@@ -258,6 +256,12 @@ export default defineComponent({
 				}
 			}
 
+			&:hover, &:focus-visible, &.focus-visible, &:active {
+				background-color: transparent;
+				color: inherit;
+			}
+		}
+
 		.section__content {
 			padding: 0 0.5rem;
 			margin: 0 -.5rem 1rem;
@@ -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>