feat(app): make UI menu keyboard accessible

HSF · Jul 31, 2021 · a18fa6f · a18fa6f
1 parent 69473fd
commit a18fa6f
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 13 deletions.
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss b/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss
@@ -39,10 +39,6 @@ $light-theme: mat.define-light-theme($colors);
   --dat-background-tertiary: #e9e9e9;
   --dat-background-quaternary: #ffffff;
   --dat-border: #f0f0f0;
-
-  .optionsButton.activeIcon {
-    --phoenix-options-icon-path: #00bcd4;
-  }
 }
 
 /* Dark Theme */
@@ -130,7 +126,6 @@ select {
   padding: 0.125rem 0.25rem;
   background-color: var(--phoenix-background-color-tertiary);
   color: var(--phoenix-text-color-secondary);
-  outline: none;
   border: none;
 }
 

diff --git a/...jects/phoenix-ui-components/src/components/ui-menu/menu-toggle/menu-toggle.component.html b/...jects/phoenix-ui-components/src/components/ui-menu/menu-toggle/menu-toggle.component.html
@@ -5,7 +5,7 @@
   matTooltipPosition="above"
   matTooltipTouchGestures="off"
 >
-  <svg class="menu-toggle-icon" [ngClass]="{ activeIcon: active }">
+  <svg class="menu-toggle-icon" [ngClass]="{ 'active-icon': active }">
     <use attr.href="assets/icons/{{ icon }}.svg#{{ icon }}"></use>
   </svg>
 </button>
diff --git a/...jects/phoenix-ui-components/src/components/ui-menu/menu-toggle/menu-toggle.component.scss b/...jects/phoenix-ui-components/src/components/ui-menu/menu-toggle/menu-toggle.component.scss
@@ -18,6 +18,10 @@
     &-icon {
       width: 100%;
       height: 100%;
+
+      &.active-icon {
+        --phoenix-options-icon-path: #00bcd4;
+      }
     }
 
     &:hover {

diff --git a/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.html b/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.html
@@ -48,16 +48,16 @@ <h5>URL options</h5>
     <h5>Share</h5>
     <div class="share-box my-2">
       <span>{{ shareLink }}</span>
-      <div class="share-box-copy" (click)="copyText(shareLink, $event.target)">
+      <button class="share-box-copy" (click)="copyText(shareLink, $event.target)">
         COPY
-      </div>
+      </button>
     </div>
     <h5>Embed</h5>
     <div class="share-box my-2">
       <span>{{ embedLink }}</span>
-      <div class="share-box-copy" (click)="copyText(embedLink, $event.target)">
+      <button class="share-box-copy" (click)="copyText(embedLink, $event.target)">
         COPY
-      </div>
+      </button>
     </div>
   </div>
   <div mat-dialog-actions>

diff --git a/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.scss b/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.scss
@@ -12,6 +12,8 @@
     position: absolute;
     top: -1px;
     right: -1px;
+    background: transparent;
+    color: inherit;
     cursor: pointer;
     padding: 0.25rem 0.5rem;
     font-size: 0.75rem;

diff --git a/...onents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts b/...onents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts
@@ -63,6 +63,7 @@ export class ShareLinkDialogComponent {
     inputElement.select();
     document.execCommand('copy');
     document.body.removeChild(inputElement);
+    element.focus();
 
     // Set text on copying
     element.innerText = 'COPIED';

diff --git a/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.scss b/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.scss
@@ -30,7 +30,6 @@
   box-shadow: var(--phoenix-box-shadow);
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
-  outline: none;
   padding: 3px;
 
   svg {

diff --git a/...cts/phoenix-ui-components/src/components/ui-menu/view-options/view-options.component.html b/...cts/phoenix-ui-components/src/components/ui-menu/view-options/view-options.component.html
@@ -1,4 +1,4 @@
-<mat-menu #presetViews>
+<mat-menu #viewOptions>
   <mat-checkbox
     class="mat-menu-item"
     (click)="$event.stopPropagation()"
@@ -24,7 +24,7 @@
 </mat-menu>
 
 <app-menu-toggle
-  [matMenuTriggerFor]="presetViews"
+  [matMenuTriggerFor]="viewOptions"
   tooltip="View options"
   icon="views"
   [active]="false"

diff --git a/...s/phoenix-ui-components/src/components/ui-menu/zoom-controls/zoom-controls.component.html b/...s/phoenix-ui-components/src/components/ui-menu/zoom-controls/zoom-controls.component.html
@@ -3,6 +3,7 @@
     tooltip="Zoom out (hold)"
     icon="zoom-out"
     [active]="false"
+    (click)="zoomOut(true); clearZoom();"
     (touchstart)="zoomOut(true)"
     (mousedown)="zoomOut($event.button === 0)"
     (mouseup)="clearZoom()"
@@ -16,6 +17,7 @@
     tooltip="Zoom in (hold)"
     icon="zoom-in"
     [active]="false"
+    (click)="zoomIn(true); clearZoom();"
     (touchstart)="zoomIn(true)"
     (mousedown)="zoomIn($event.button === 0)"
     (mouseup)="clearZoom()"