From 57133c568101180b3a794588011f91c70591ed8f Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Fri, 28 May 2021 00:14:51 +0100
Subject: [PATCH] Use aria attributes for active etc states

---
 src/components/Sidebar.vue         | 4 ++--
 src/leaflet/control/ChatControl.ts | 2 +-
 src/scss/_placeholders.scss        | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 72be675..45a5d05 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/leaflet/control/ChatControl.ts b/src/leaflet/control/ChatControl.ts
index 1453fb6..3e7ea09 100644
--- a/src/leaflet/control/ChatControl.ts
+++ b/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;
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index a5fc4bd..8a03bd1 100644
--- a/src/scss/_placeholders.scss
+++ b/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;
 	}
 }