feat(app): making clipping options keyboard accessible

HSF · Aug 10, 2021 · 4d1bd95 · 4d1bd95
1 parent c36f15a
commit 4d1bd95
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/...oenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html b/...oenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html
@@ -1,21 +1,32 @@
-<mat-menu #menu>
-  <mat-checkbox
-    class="mat-menu-item"
-    [checked]="clippingEnabled"
-    (click)="$event.stopPropagation()"
-    (change)="toggleClipping($event)"
-    >Clipping
-  </mat-checkbox>
-  <mat-slider
-    min="0"
-    max="180"
-    step="1"
-    thumbLabel
-    [value]="clippingAngle"
-    (click)="$event.stopPropagation()"
-    (input)="changeClippingAngle($event)"
+<mat-menu class="mat-menu" #menu>
+  <button
+    mat-menu-item
+    (click)="
+      $event.stopPropagation();
+      clippingCheckbox._inputElement.nativeElement.click()
+    "
   >
-  </mat-slider>
+    <mat-checkbox
+      #clippingCheckbox
+      [checked]="clippingEnabled"
+      (click)="$event.stopPropagation()"
+      (change)="toggleClipping($event)"
+      >Clipping
+    </mat-checkbox>
+  </button>
+  <button class="slider-btn" mat-menu-item (focus)="clippingSlider.focus()">
+    <mat-slider
+      #clippingSlider
+      min="0"
+      max="180"
+      step="1"
+      thumbLabel
+      [value]="clippingAngle"
+      (click)="$event.stopPropagation()"
+      (input)="changeClippingAngle($event)"
+    >
+    </mat-slider>
+  </button>
 </mat-menu>
 
 <app-menu-toggle

diff --git a/...oenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.scss b/...oenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.scss
@@ -1,9 +1,8 @@
-mat-checkbox {
-  display: block;
+.slider-btn {
+  overflow: visible;
 }
 
 mat-slider {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 0.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
 }