[ACS-10281] a11y fix - Approve step folder control is focusable twice causing duplicate screen reader (#11385)

* [ACS-10281] a11y fix - Approve step folder control is focusable twice causing duplicate screen reader

* [ACS-10281] cr fix

Author: nikita-web-ua

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

@@ -104,21 +104,20 @@
         </mat-form-field>
     </div>
 
-    <div
+    <button
+        type="button"
         *ngSwitchCase="'clickableTemplate'"
-        role="button"
         class="adf-textitem-clickable"
         [ngClass]="{ 'adf-property-read-only': !isEditable }"
         [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" [floatLabel]="'always'">
             <mat-label
                 *ngIf="showProperty || isEditable"
                 [attr.data-automation-id]="'card-textitem-label-' + property.key"
                 class="adf-property-label"
+                (click)="$event.stopPropagation()"
                 [ngClass]="{ 'adf-property-value-editable': editable }"
             >
                 {{ property.label | translate }}
@@ -127,7 +126,6 @@
                 matInput
                 [type]="property.inputType"
                 class="adf-property-value"
-                title="{{ property.label | translate }}"
                 [ngClass]="{
                     'adf-property-value-editable': editable,
                     'adf-textitem-clickable-value': isClickable,
@@ -136,11 +134,11 @@
                     'adf-property-value-has-icon-suffix': showClickableIcon
                 }"
                 [placeholder]="property.default"
-                [attr.aria-label]="property.label | translate"
                 [(ngModel)]="editedValue"
                 (blur)="update()"
                 (keydown.enter)="update()"
                 [readonly]="!isEditable"
+                tabindex="-1"
                 [attr.data-automation-id]="'card-textitem-value-' + property.key"
             />
             <button
@@ -154,7 +152,7 @@
                 <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
             </button>
         </mat-form-field>
-    </div>
+    </button>
 
     <div *ngSwitchCase="'emptyTemplate'">
         <span class="adf-textitem-default-value">{{ property.default | translate }}</span>

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

@@ -60,8 +60,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);