[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
This commit is contained in:
Mykyta Maliarchuk
2025-11-28 14:04:37 +01:00
committed by GitHub
parent f317374a2e
commit f379d99474
2 changed files with 10 additions and 8 deletions
@@ -104,14 +104,12 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div <button
type="button"
*ngSwitchCase="'clickableTemplate'" *ngSwitchCase="'clickableTemplate'"
role="button"
class="adf-textitem-clickable" class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': !isEditable }" [ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key" [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
tabindex="0"
(keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
> >
<mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="'always'"> <mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="'always'">
@@ -119,6 +117,7 @@
*ngIf="showProperty || isEditable" *ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-textitem-label-' + property.key" [attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label" class="adf-property-label"
(click)="$event.stopPropagation()"
[ngClass]="{ 'adf-property-value-editable': editable }" [ngClass]="{ 'adf-property-value-editable': editable }"
> >
{{ property.label | translate }} {{ property.label | translate }}
@@ -127,7 +126,6 @@
matInput matInput
[type]="property.inputType" [type]="property.inputType"
class="adf-property-value" class="adf-property-value"
title="{{ property.label | translate }}"
[ngClass]="{ [ngClass]="{
'adf-property-value-editable': editable, 'adf-property-value-editable': editable,
'adf-textitem-clickable-value': isClickable, 'adf-textitem-clickable-value': isClickable,
@@ -136,11 +134,11 @@
'adf-property-value-has-icon-suffix': showClickableIcon 'adf-property-value-has-icon-suffix': showClickableIcon
}" }"
[placeholder]="property.default" [placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[(ngModel)]="editedValue" [(ngModel)]="editedValue"
(blur)="update()" (blur)="update()"
(keydown.enter)="update()" (keydown.enter)="update()"
[readonly]="!isEditable" [readonly]="!isEditable"
tabindex="-1"
[attr.data-automation-id]="'card-textitem-value-' + property.key" [attr.data-automation-id]="'card-textitem-value-' + property.key"
/> />
<button <button
@@ -154,7 +152,7 @@
<mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon> <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</div> </button>
<div *ngSwitchCase="'emptyTemplate'"> <div *ngSwitchCase="'emptyTemplate'">
<span class="adf-textitem-default-value">{{ property.default | translate }}</span> <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
@@ -60,8 +60,12 @@
} }
.adf-textitem-clickable { .adf-textitem-clickable {
background: none;
border: none;
margin: 0;
cursor: pointer; cursor: pointer;
padding-top: 3px; width: 100%;
padding: 3px 0 0;
.adf-textitem-action:hover { .adf-textitem-action:hover {
color: var(--adf-theme-foreground-text-color); color: var(--adf-theme-foreground-text-color);