From 98a831961eb83b44c4c96a1ea374b10538af86ec Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 13:20:48 -0400
Subject: [PATCH] little bit more accessible tabs

---
 packages/client/src/components/MkTab.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index f28b37213c..1f89c8ad07 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -20,21 +20,17 @@ export default defineComponent({
 					"pxhvhrfw",
 					{ chips: this.style === "chips" },
 				],
+				role: "tablist",
 			},
 			options.map((option) =>
 				withDirectives(
 					h(
 						"button",
 						{
-							class: [
-								"_button",
-								{
-									active:
-										this.modelValue === option.props?.value,
-								},
-							],
+							class: "_button",
+							role: "tab",
 							key: option.key,
-							disabled: this.modelValue === option.props?.value,
+							'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
 							onClick: () => {
 								this.$emit(
 									"update:modelValue",
@@ -70,12 +66,12 @@ export default defineComponent({
 			cursor: default;
 		}
 
-		&.active {
+		&[aria-selected="true"] {
 			color: var(--accent);
 			background: var(--accentedBg) !important;
 		}
 
-		&:not(.active):hover {
+		&:not([aria-selected="true"]):hover {
 			color: var(--fgHighlighted);
 			background: var(--panelHighlight);
 		}