From f7562331700764a2a69247ecc940b01449c097bb Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Tue, 5 Aug 2025 13:00:21 +0100
Subject: [PATCH] Accessibility

---
 .../components/viewer/ExpansionTriangle.vue   |  1 +
 .../components/viewer/IsolateButton.vue       | 21 ++++++++++++-------
 .../components/viewer/VisibilityButton.vue    | 19 +++++++++++------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/frontend-2/components/viewer/ExpansionTriangle.vue b/packages/frontend-2/components/viewer/ExpansionTriangle.vue
index 8edee618b..2bf0d00f2 100644
--- a/packages/frontend-2/components/viewer/ExpansionTriangle.vue
+++ b/packages/frontend-2/components/viewer/ExpansionTriangle.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     type="button"
+    :aria-label="isExpanded ? 'Collapse' : 'Expand'"
     class="text-foreground-2 hover:text-foreground rounded-md h-8 w-4 flex items-center justify-center shrink-0"
     @click.stop="$emit('click')"
   >
diff --git a/packages/frontend-2/components/viewer/IsolateButton.vue b/packages/frontend-2/components/viewer/IsolateButton.vue
index dbd01e174..d7c79b802 100644
--- a/packages/frontend-2/components/viewer/IsolateButton.vue
+++ b/packages/frontend-2/components/viewer/IsolateButton.vue
@@ -1,12 +1,9 @@
 <template>
   <button
     v-tippy="tooltip"
+    :aria-label="isIsolated ? 'Unisolate' : 'Isolate'"
     class="group-hover:opacity-100 rounded-md h-6 w-6 flex items-center justify-center"
-    :class="{
-      'opacity-100 hover:bg-highlight-1': isIsolated,
-      'opacity-100 hover:bg-highlight-3': !isIsolated && forceVisible,
-      'sm:opacity-0 hover:bg-highlight-3': !isIsolated && !forceVisible
-    }"
+    :class="buttonClasses"
     @click.stop="$emit('click', $event)"
   >
     <IconViewerUnisolate v-if="isIsolated" class="w-3.5 h-3.5" />
@@ -15,13 +12,23 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import type { Nullable } from '@speckle/shared'
+
+const props = defineProps<{
   isIsolated: boolean
   forceVisible?: boolean
-  tooltip?: object | string | null
+  tooltip?: Nullable<object | string>
 }>()
 
 defineEmits<{
   click: [event: Event]
 }>()
+
+const buttonClasses = computed(() => {
+  return {
+    'opacity-100 hover:bg-highlight-1': props.isIsolated,
+    'opacity-100 hover:bg-highlight-3': !props.isIsolated && props.forceVisible,
+    'sm:opacity-0 hover:bg-highlight-3': !props.isIsolated && !props.forceVisible
+  }
+})
 </script>
diff --git a/packages/frontend-2/components/viewer/VisibilityButton.vue b/packages/frontend-2/components/viewer/VisibilityButton.vue
index 60020111c..eb71aecc2 100644
--- a/packages/frontend-2/components/viewer/VisibilityButton.vue
+++ b/packages/frontend-2/components/viewer/VisibilityButton.vue
@@ -1,11 +1,9 @@
 <template>
   <button
     v-tippy="tooltip"
+    :aria-label="isHidden ? 'Show' : 'Hide'"
     class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center"
-    :class="{
-      'opacity-100': isHidden || forceVisible,
-      'sm:opacity-0': !isHidden && !forceVisible
-    }"
+    :class="buttonClasses"
     @click.stop="$emit('click', $event)"
   >
     <IconEyeClosed v-if="isHidden" class="w-4 h-4" />
@@ -14,13 +12,22 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import type { Nullable } from '@speckle/shared'
+
+const props = defineProps<{
   isHidden: boolean
   forceVisible?: boolean
-  tooltip?: object | string | null
+  tooltip?: Nullable<object | string>
 }>()
 
 defineEmits<{
   click: [event: Event]
 }>()
+
+const buttonClasses = computed(() => {
+  return {
+    'opacity-100': props.isHidden || props.forceVisible,
+    'sm:opacity-0': !props.isHidden && !props.forceVisible
+  }
+})
 </script>