Accessibility

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')"
   >

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>

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>