[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
This commit is contained in:
Mykyta Maliarchuk
2026-01-30 12:58:35 +01:00
committed by GitHub
parent 3bba02264a
commit 1780aa9663
2 changed files with 10 additions and 6 deletions
@@ -102,14 +102,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': isReadonlyProperty }" [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
[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"> <mat-form-field class="adf-property-field adf-card-textitem-field">
@@ -133,11 +131,13 @@
'adf-property-value-has-icon-suffix': showClickableIcon 'adf-property-value-has-icon-suffix': showClickableIcon
}" }"
[placeholder]="property.default" [placeholder]="property.default"
aria-hidden="true"
[attr.aria-label]="property.label | translate" [attr.aria-label]="property.label | translate"
[(ngModel)]="editedValue" [(ngModel)]="editedValue"
(blur)="update()" (blur)="update()"
(keydown.enter)="update()" (keydown.enter)="update()"
[disabled]="isReadonlyProperty || !editable" [disabled]="isReadonlyProperty || !editable"
tabindex="-1"
[attr.data-automation-id]="'card-textitem-value-' + property.key" [attr.data-automation-id]="'card-textitem-value-' + property.key"
[aria-describedby]="'adf-card-textitem-error-' + property.key" [aria-describedby]="'adf-card-textitem-error-' + property.key"
/> />
@@ -152,7 +152,7 @@
<mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" /> <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
</button> </button>
</mat-form-field> </mat-form-field>
</div> </button>
<mat-error <mat-error
*ngIf="isEditable && hasErrors" *ngIf="isEditable && hasErrors"
@@ -53,8 +53,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);