Use aria attributes for active etc states

src/components/Sidebar.vue

@@ -17,12 +17,12 @@
 <template>
 	<section class="sidebar" role="none">
 		<header class="sidebar__buttons">
-			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':currentlyVisible.has('maps')}"
+			<button v-if="mapCount > 1" :class="{'button--maps': true}"
 					@click="toggleMaps" :title="messageWorlds"
 					:aria-label="messageWorlds" :aria-expanded="currentlyVisible.has('maps')">
 				<SvgIcon name="maps"></SvgIcon>
 			</button>
-			<button :class="{'button--players': true, 'active': currentlyVisible.has('players')}"
+			<button :class="{'button--players': true}"
 					@click="togglePlayers" :title="messagePlayers"
 					:aria-label="messagePlayers" :aria-expanded="currentlyVisible.has('players')">
 				<SvgIcon name="players"></SvgIcon>

src/leaflet/control/ChatControl.ts

@@ -46,7 +46,7 @@ export class ChatControl extends Control {
 		});
 
 		watch(useStore().state.ui.visibleElements, (newValue) => {
-			chatButton.classList.toggle('active', newValue.has('chat'));
+			chatButton.setAttribute('aria-expanded', newValue.has('chat').toString());
 		});
 
 		return chatButton;

src/scss/_placeholders.scss

@@ -19,7 +19,7 @@
 %button {
 	@include button;
 
-	&:hover, &.active {
+	&:hover, &[aria-expanded="true"], &[aria-pressed="true"] {
 		@include button-hovered;
 	}
 
@@ -31,7 +31,7 @@
 		@include button-active;
 	}
 
-	&[disabled], &.disabled {
+	&[disabled], &[aria-disabled="true"] {
 		@include button-disabled;
 	}
 }