[37274] Remove accessibleClick (#9355)

* Remove accessibleClick from wp-single-card * Remove accessibleClick directive itself * Fix context menu with button * Add common mixin for unset-button-styles * relations button * Editable query and toolbar * Resizer button * Replace wp-create button * Replace relation description value * Replace type form * Replace pagination links * Replace button styles for attachment dropzone * Replace accessibleClick in tile-view * Replace inline create * Replace display container with button * Replace text in notification on boards error * Replace global search component * Fix pagination spec * Fix specs * Fix triggering display field on enter * Make search toggle a button * Review feedback
opf · Jun 14, 2021 · 46599dd · 46599dd
1 parent 1e1a842
commit 46599dd
Show file tree

Hide file tree

Showing 52 changed files with 333 additions and 439 deletions.
diff --git a/frontend/src/app/core/global_search/input/global-search-input-mobile.component.sass b/frontend/src/app/core/global_search/input/global-search-input-mobile.component.sass
@@ -4,7 +4,7 @@ $search-input-height-mobile: 36px
 
 @media only screen and (max-width: 679px)
   .top-menu-search
-    #global-search-input
+    &--input
       display: none
       &.-expanded
         display: block
@@ -33,6 +33,7 @@ $search-input-height-mobile: 36px
           height: 36px
 
     .top-menu-search--back-button
+      @include unset-button-styles
       display: initial
       width: 50px
       text-align: center

diff --git a/frontend/src/app/core/global_search/input/global-search-input.component.html b/frontend/src/app/core/global_search/input/global-search-input.component.html
@@ -1,13 +1,13 @@
 <div class="top-menu-search">
-  <a
+  <button
     *ngIf="expanded"
     (click)="toggleMobileSearch()"
     class="top-menu-search--back-button"
     href="#"
     title="{{text.close_search}}"
   >
     <i class="icon-arrow-left1" aria-hidden="true"></i>
-  </a>
+  </button>
 
   <op-autocompleter
     #select
@@ -62,10 +62,7 @@
 
             <div class="global-search--wp-content">
               <span [textContent]="item.project" class="global-search--wp-project"></span>
-              <a
-                class="global-search--wp-id"
-                [ngClass]="uiStateLinkClass"
-              >#{{item.id}}</a>
+              #{{item.id}}
               <span
                 [textContent]="item.status"
                 [ngClass]="statusHighlighting(item.statusId)"
@@ -78,16 +75,16 @@
     </ng-template>
   </op-autocompleter>
 
-  <a
-    #btn
-    id="top-menu-search-button"
-    class="top-menu-search--button search-form-normal"
-    title="{{text.search}}"
-    tabindex="0"
-    role="button"
-    [class.-input-focused]="expanded"
-    (accessibleClick)="handleClick($event)"
+  <button
+      role="button"
+      #btn
+      id="top-menu-search-button"
+      class="top-menu-search--button search-form-normal"
+      title="{{text.search}}"
+      [class.-input-focused]="expanded"
+      (click)="handleClick($event)"
+
   >
     <op-icon icon-classes="icon5 icon-search ellipsis"></op-icon>
-  </a>
+  </button>
 </div>
diff --git a/frontend/src/app/core/global_search/input/global-search-input.component.sass b/frontend/src/app/core/global_search/input/global-search-input.component.sass
@@ -20,6 +20,7 @@ $search-input-height: 30px
     display: none
 
   &--button
+    @include unset-button-styles
     position: absolute
     right: 2px
     font-size: var(--header-item-font-size)
@@ -48,7 +49,7 @@ $search-input-height: 30px
     height: 46px                // ng-option height + 1px border
     z-index: 1051
 
-  #global-search-input
+  &--input
     width: $search-input-width
     font-size: 0.9rem
     -webkit-transition: width 0.2s ease-in-out

diff --git a/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.html b/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.html
@@ -2,8 +2,10 @@
        [attr.name]="name || undefined"
        [attr.id]="id || undefined"
        [value]="queryProps"/>
-<a
-  class="button--link"
-  (accessibleClick)="editQuery()"
-  [accessibleClickStopEvent]="true"
-  [textContent]="text.edit_query"></a>
+<button
+  type="button"
+  class="op-link"
+  (click)="editQuery()"
+  [textContent]="text.edit_query"
+>
+</button>
diff --git a/frontend/src/app/features/admin/types/type-form-configuration.html b/frontend/src/app/features/admin/types/type-form-configuration.html
@@ -17,16 +17,22 @@
         </a>
         <ul class="menu-drop-down-container">
           <li>
-            <a class="form-configuration--add-group"
-               [textContent]="text.add_group"
-               (accessibleClick)="createGroup('attribute', '')">
-            </a>
+            <button
+              type="button"
+              class="menu-item form-configuration--add-group"
+              [textContent]="text.add_group"
+              (click)="createGroup('attribute', '')"
+            >
+            </button>
           </li>
           <li>
-            <a class="form-configuration--add-group"
-               [textContent]="text.add_table"
-               (accessibleClick)="addGroupAndOpenQuery()">
-            </a>
+            <button
+              type="button"
+              class="menu-item form-configuration--add-group"
+              [textContent]="text.add_table"
+              (click)="addGroupAndOpenQuery()"
+            >
+            </button>
           </li>
         </ul>
       </li>

diff --git a/frontend/src/app/features/boards/board/board-list/board-list.component.html b/frontend/src/app/features/boards/board/board-list/board-list.component.html
@@ -58,9 +58,13 @@
     <p>
       <span [textContent]="errorMessage"></span>
       &ngsp;
-      <a role="button" (accessibleClick)="onRemove.emit()">
+      <buton
+        type="button"
+        class="op-link"
+        (click)="onRemove.emit()"
+      >
         <span [textContent]="text.click_to_remove"></span>
-      </a>
+      </buton>
     </p>
   </div>
 </div>
diff --git a/frontend/src/app/features/boards/tile-view/tile-view.component.html b/frontend/src/app/features/boards/tile-view/tile-view.component.html
@@ -1,12 +1,15 @@
 <div class="tile-blocks--container">
-    <div class="tile-block button" 
-        [disabled]="disabled()" 
-        (accessibleClick)="created(tile.attribute)"
-        *ngFor="let tile of tiles">
-        <img [src]="tile.image" class="tile-block-image"/>
-        <div>
-          <span class="tile-block-title">{{ tile.text }}</span> 
-          <p class="tile-block-description" [textContent]="tile.description"></p>
-        </div>
+  <button
+    *ngFor="let tile of tiles"
+    class="tile-block button"
+    type="button"
+    [disabled]="disabled()"
+    (click)="created(tile.attribute)"
+  >
+    <img [src]="tile.image" class="tile-block-image"/>
+    <div>
+      <span class="tile-block-title">{{ tile.text }}</span>
+      <p class="tile-block-description" [textContent]="tile.description"></p>
     </div>
+  </button>
 </div>
diff --git a/frontend/src/app/features/work-packages/components/wp-buttons/wp-button.template.html b/frontend/src/app/features/work-packages/components/wp-buttons/wp-button.template.html
@@ -1,10 +1,10 @@
 <button class="button {{ buttonClass }}"
         type="button"
-        [ngClass]="{ '-active': isActive }"
+        [class.-active]="isActive"
         [disabled]="disabled || (!isToggle() && isActive)"
         [attr.id]="buttonId"
         [attr.title]="label"
         [attr.accesskey]="accessKey"
-        (accessibleClick)="performAction($event)">
+        (click)="performAction($event)">
   <op-icon icon-classes="{{ iconClass }} button--icon"></op-icon>
 </button>
diff --git a/...atures/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.html b/...atures/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.html
@@ -6,21 +6,24 @@
   </div>
 
   <div class="wp-card--inline-buttons hidden-for-mobile">
-    <a class="wp-card--details-button -no-decoration"
-       *ngIf="!workPackage.isNew && showInfoButton"
-       [title]="text.detailsView"
-       (accessibleClick)="emitStateLinkClicked(workPackage, true)">
+    <button
+      type="button"
+      class="op-link wp-card--details-button"
+      *ngIf="!workPackage.isNew && showInfoButton"
+      [title]="text.detailsView"
+      (click)="emitStateLinkClicked($event, workPackage, true)">
       <op-icon icon-classes="icon icon-info2"></op-icon>
-    </a>
-    <a class="wp-card--inline-cancel-button -no-decoration"
-       *ngIf="workPackage.isNew || showRemoveButton"
-       [ngClass]="{ '-show': workPackage.isNew }"
-       [title]="text.removeCard"
-       (accessibleClick)="onRemoved(workPackage)">
+    </button>
+    <button
+      class="op-link wp-card--inline-cancel-button"
+      *ngIf="workPackage.isNew || showRemoveButton"
+      [class.-show]="workPackage.isNew"
+      [title]="text.removeCard"
+      (click)="onRemoved(workPackage)">
       <op-icon icon-classes="icon icon-close"></op-icon>
-    </a>
+    </button>
   </div>
-  <edit-form [resource]="workPackage" 
+  <edit-form [resource]="workPackage"
              [inEditMode]="workPackage.isNew"
              *ngIf="workPackage.isNew">
     <div class="wp-card--content -new">
@@ -41,21 +44,21 @@
     <span [textContent]="wpProjectName(workPackage)"
           class="wp-card--project-name">
     </span>
-    <span [textContent]="wpTypeAttribute(workPackage)" 
+    <span [textContent]="wpTypeAttribute(workPackage)"
           class="wp-card--type"
           [ngClass]="typeHighlightingClass(workPackage)">
     </span>
     <a class="wp-card--id"
        [href]="fullWorkPackageLink(workPackage)"
        [ngClass]="uiStateLinkClass"
-       (accessibleClick)="emitStateLinkClicked(workPackage)"
-       [accessibleClickSkipModifiers]="true">
+       (click)="emitStateLinkClicked($event, workPackage)"
+     >
       #{{workPackage.id}}
     </a>
     <span [textContent]="wpSubject(workPackage)"
           class="wp-card--subject">
     </span>
-    <img *ngIf="this.cardCoverImageShown(workPackage)" 
+    <img *ngIf="this.cardCoverImageShown(workPackage)"
          [src]="this.bcfSnapshotPath(workPackage)"
          class="wp-card--cover-image">
     <wp-status-button *ngIf="showStatusButton"

diff --git a/...features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts b/...features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts
@@ -19,6 +19,7 @@ import { CardViewOrientation } from "core-app/features/work-packages/components/
 import { UntilDestroyedMixin } from "core-app/shared/helpers/angular/until-destroyed.mixin";
 import { WorkPackageViewFocusService } from "core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-focus.service";
 import { WorkPackageResource } from "core-app/features/hal/resources/work-package-resource";
+import { LinkHandling } from "core-app/shared/helpers/link-handling/link-handling";
 
 @Component({
   selector: 'wp-single-card',
@@ -71,7 +72,11 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
     return this.cardView.classIdentifier(wp);
   }
 
-  public emitStateLinkClicked(wp:WorkPackageResource, detail?:boolean) {
+  public emitStateLinkClicked(event:MouseEvent, wp:WorkPackageResource, detail?:boolean):void {
+    if (LinkHandling.isClickedWithModifier(event)) {
+      return;
+    }
+
     const classIdentifier = this.classIdentifier(wp);
     const stateToEmit = detail ? 'split' : 'show';
 

diff --git a/...rc/app/features/work-packages/components/wp-inline-create/wp-inline-create.component.html b/...rc/app/features/work-packages/components/wp-inline-create/wp-inline-create.component.html
@@ -4,30 +4,30 @@
     <td [attr.colspan]="colspan"
         class="wp-inline-create-button-td -no-highlighting">
       <div class="wp-inline-create-button">
-        <a class="wp-inline-create--add-link"
-                href
-                role="link"
-                [focus]="focus"
-                *ngIf="canAdd"
-                [ngClass]="{'wp-inline-create--split-link': hasReferenceClass }"
-                (accessibleClick)="handleAddRowClick()"
-                [attr.disabled]="!isAllowed || undefined"
-                [attr.aria-label]="text.create"
-                aria-haspopup="true">
+        <button
+          *ngIf="canAdd"
+          type="button"
+          class="wp-inline-create--add-link"
+          [class.wp-inline-create--split-link]="hasReferenceClass"
+          [focus]="focus"
+          (click)="handleAddRowClick()"
+          [attr.aria-label]="text.create"
+          aria-haspopup="true"
+        >
           <op-icon icon-classes="icon icon-add"></op-icon>
           <span [textContent]="text.create"></span>
-        </a>
+        </button>
         <ng-container *ngIf="canReference">
-          <a class="wp-inline-create--reference-link wp-inline-create--split-link"
-             href
-             role="link"
-             (accessibleClick)="handleReferenceClick()"
-             [attr.disabled]="!isAllowed || undefined"
-             [attr.aria-label]="text.create"
-             aria-haspopup="true">
+          <button
+            type="button"
+            class="wp-inline-create--reference-link wp-inline-create--split-link"
+            (click)="handleReferenceClick()"
+            [attr.aria-label]="text.create"
+            aria-haspopup="true"
+          >
             <op-icon icon-classes="icon icon-link"></op-icon>
             <span [textContent]="text.reference"></span>
-          </a>
+          </button>
         </ng-container>
       </div>
     </td>