fix(segmentation): toggle the paint switches from their labels

Allow Overlap and Sync Views labels are now labels for their switches,
so clicking the text toggles the switch like any other checkbox label.

Author: PaulHax

src/segmentation/components/PaintControls.vue

@@ -4,14 +4,14 @@
       v-model="controlPanels"
       multiple
       variant="accordion"
-      class="annotation-panels paint-process-panels"
+      class="annotation-panels"
     >
       <v-expansion-panel :value="PAINT_PANEL">
         <v-expansion-panel-title>
           <v-icon class="annotation-panel-icon">mdi-brush</v-icon>
           Paint
         </v-expansion-panel-title>
-        <v-expansion-panel-text class="control-panel-body">
+        <v-expansion-panel-text>
           <v-row
             no-gutters
             align="center"
@@ -176,10 +176,14 @@
           </div>
           <div class="paint-switches mb-2">
             <div class="d-flex align-center">
-              <span class="control-label text-body-2 text-no-wrap">
+              <label
+                :for="overlapSwitchId"
+                class="control-label text-body-2 text-no-wrap cursor-pointer"
+              >
                 <v-icon size="small">mdi-set-center</v-icon>Allow Overlap
-              </span>
+              </label>
               <v-switch
+                :id="overlapSwitchId"
                 aria-label="Allow Overlap"
                 v-model="allowOverlap"
                 color="primary"
@@ -197,9 +201,15 @@
               class="d-flex align-center"
               :tabindex="brushDisabledReason ? 0 : undefined"
             >
-              <span class="control-label text-body-2 text-no-wrap">
+              <label
+                :for="syncSwitchId"
+                :class="[
+                  'control-label text-body-2 text-no-wrap',
+                  { 'cursor-pointer': !brushDisabledReason },
+                ]"
+              >
                 <v-icon size="small">mdi-link-variant</v-icon>Sync Views
-              </span>
+              </label>
               <v-tooltip
                 :eager="false"
                 :disabled="!brushDisabledReason"
@@ -209,6 +219,7 @@
                 {{ brushDisabledReason }}
               </v-tooltip>
               <v-switch
+                :id="syncSwitchId"
                 aria-label="Sync Views"
                 :disabled="!!brushDisabledReason"
                 v-model="crossPlaneSync"
@@ -227,7 +238,7 @@
           <v-icon class="annotation-panel-icon">mdi-cogs</v-icon>
           Process
         </v-expansion-panel-title>
-        <v-expansion-panel-text class="control-panel-body">
+        <v-expansion-panel-text>
           <ProcessControls />
         </v-expansion-panel-text>
       </v-expansion-panel>
@@ -236,7 +247,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { PaintMode } from '@/src/core/tools/paint';
 import { usePaintInteractionMode } from '@/src/segmentation/composables/usePaintInteractionMode';
@@ -286,6 +297,8 @@ const {
   crossPlaneSync,
 } = storeToRefs(paintStore);
 const { allowOverlap } = storeToRefs(useSegmentationStore());
+const overlapSwitchId = useId();
+const syncSwitchId = useId();
 // Allow Overlap stays live: it also governs a polygon's Rasterize.
 const brushDisabledReason = computed(
   () =>

src/segmentation/components/SegmentList.vue

@@ -242,7 +242,7 @@ const {
           <v-icon class="annotation-panel-icon">mdi-tune-variant</v-icon>
           Display
         </v-expansion-panel-title>
-        <v-expansion-panel-text class="display-section-body">
+        <v-expansion-panel-text>
           <div class="display-controls" :tabindex="viewingCine ? 0 : undefined">
             <div
               v-for="control in DISPLAY_CONTROLS"

tests/specs/segment-controls-accessibility.e2e.ts

@@ -49,6 +49,13 @@ describe('Segment control accessibility', () => {
     await sync.execute((element) => element.focus());
     await browser.keys(' ');
     expect(await sync.isSelected()).toBe(!initiallySelected);
+
+    // Each switch toggles from its label too.
+    await $('label*=Sync Views').click();
+    expect(await sync.isSelected()).toBe(initiallySelected);
+    const overlap = $('input[aria-label="Allow Overlap"]');
+    await $('label*=Allow Overlap').click();
+    await expect(overlap).toBeSelected();
   });
 
   it('disables the brush controls, saying why, until the Paint tool is picked', async () => {