[ACS-10281] a11y fix: Approve step folder control is focusable twice (#11589)

* [ACS-10281] a11y fix: Approve step folder control is focusable twice

* [ci:force]

* [ACS-10281] revert to div

* [ACS-10281] a11y fix: Approve step folder control is focusable twice

* fix for e2e's

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -102,14 +102,12 @@
                 />
             </mat-form-field>
         </div>
-        <div
+        <button
+            type="button"
             *ngSwitchCase="'clickableTemplate'"
-            role="button"
             class="adf-textitem-clickable"
             [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
             [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-            tabindex="0"
-            (keyup.enter)="clicked()"
             (click)="clicked()"
         >
             <mat-form-field class="adf-property-field adf-card-textitem-field">
@@ -133,11 +131,13 @@
                         'adf-property-value-has-icon-suffix': showClickableIcon
                     }"
                     [placeholder]="property.default"
+                    aria-hidden="true"
                     [attr.aria-label]="property.label | translate"
                     [(ngModel)]="editedValue"
                     (blur)="update()"
                     (keydown.enter)="update()"
                     [disabled]="isReadonlyProperty || !editable"
+                    tabindex="-1"
                     [attr.data-automation-id]="'card-textitem-value-' + property.key"
                     [aria-describedby]="'adf-card-textitem-error-' + property.key"
                 />
@@ -152,7 +152,7 @@
                     <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
                 </button>
             </mat-form-field>
-        </div>
+        </button>
 
     <mat-error
         *ngIf="isEditable && hasErrors"

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -53,8 +53,12 @@
     }
 
     .adf-textitem-clickable {
+        background: none;
+        border: none;
+        margin: 0;
         cursor: pointer;
-        padding-top: 3px;
+        width: 100%;
+        padding: 3px 0 0;
 
         .adf-textitem-action:hover {
             color: var(--adf-theme-foreground-text-color);