[ACS-11317] a11y Fix: Tags interactive controls are not manageable via keyboard (#11845)

* [ACS-11317] Fix a11y: Delete button in create tags popup is not focusable via keyboard

* [ACS-11317] use UnitTestingUtils

* [ACS-11317] cr fixes

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html

@@ -14,17 +14,24 @@
             [style.border-radius]="roundUpChips ? '20px' : '10px'"
             [style.font-weight]="'bold'"
             role="listitem"
-            [attr.aria-label]="chip.name"
-            (removed)="removedChip.emit(chip.id)">
-            <span id="adf-dynamic-chip-list-chip-name-{{ idx }}">{{ chip.name }}</span>
-            <mat-icon 
-                *ngIf="showDelete"
-                id="adf-dynamic-chip-list-delete-{{ chip.name }}"
-                class="adf-dynamic-chip-list-delete-icon"
-                [disabled]="disableDelete"
-                adf-icon="close"
-                matChipRemove
-            />
+            [attr.aria-label]="chip.name">
+            <div class="adf-dynamic-chip-list-content">
+                <span id="adf-dynamic-chip-list-chip-name-{{ idx }}">{{ chip.name }}</span>
+                <button type="button"
+                        *ngIf="showDelete"
+                        [disabled]="disableDelete"
+                        (click)="removedChip.emit(chip.id)"
+                        [attr.data-automation-id]="'adf-dynamic-chip-list-delete-btn-' + chip.id"
+                        class="adf-dynamic-chip-list-delete-btn"
+                        [attr.aria-label]="'DYNAMIC_CHIP_LIST.DELETE' | translate: { name: chip.name }"
+                        [title]="'DYNAMIC_CHIP_LIST.DELETE' | translate: { name: chip.name }">
+                    <mat-icon
+                        id="adf-dynamic-chip-list-delete-{{ chip.name }}"
+                        class="adf-dynamic-chip-list-delete-icon"
+                        adf-icon="close"
+                    />
+                </button>
+            </div>
         </mat-chip>
     </mat-chip-set>
     <button

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -7,6 +7,35 @@
     padding-top: 12px;
     padding-bottom: 12px;
 
+    .adf-dynamic-chip-list-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .adf-dynamic-chip-list-delete-btn {
+        display: inline-flex;
+        margin: -10px -14px -10px -2px;
+        padding: 10px;
+        border: none;
+        cursor: pointer;
+        background: none;
+
+        &:disabled {
+            cursor: default;
+        }
+
+        &:focus-visible {
+            outline-offset: -5px;
+        }
+
+        .adf-dynamic-chip-list-delete-icon {
+            font-size: 18px;
+            height: 18px;
+            width: 18px;
+        }
+    }
+
     .adf-dynamic-chip-list-view-more-button {
         margin-left: 5px;
         position: absolute;

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.spec.ts

@@ -98,7 +98,7 @@ describe('DynamicChipListComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            testingUtils.clickByCSS('#adf-dynamic-chip-list-delete-test1');
+            testingUtils.clickByDataAutomationId('adf-dynamic-chip-list-delete-btn-0ee933fa-57fc-4587-8a77-b787e814f1d2');
 
             expect(component.removedChip.emit).toHaveBeenCalledWith('0ee933fa-57fc-4587-8a77-b787e814f1d2');
         });
@@ -149,7 +149,7 @@ describe('DynamicChipListComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const chip = testingUtils.getByCSS('.adf-dynamic-chip-list-delete-icon');
+            const chip = testingUtils.getByCSS('.adf-dynamic-chip-list-delete-btn');
             expect(Object.keys(chip.attributes)).toContain('disabled');
         });
 

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts

@@ -159,6 +159,12 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
         this.displayNext.emit();
     }
 
+    focusDeleteButton(index: number): void {
+        const buttons: NodeListOf<HTMLButtonElement> = this.containerView.nativeElement.querySelectorAll('.adf-dynamic-chip-list-delete-btn');
+        const target: HTMLButtonElement = buttons[index] ?? buttons[index - 1];
+        target?.focus();
+    }
+
     private calculateChipsToDisplay(): void {
         if (this.requestedDisplayingAllChips || !this.chips.length) {
             return;

lib/core/src/lib/i18n/en.json

@@ -659,7 +659,8 @@
     "ICON": "Node Icon"
   },
   "DYNAMIC_CHIP_LIST": {
-    "LOAD_MORE": "Load more"
+    "LOAD_MORE": "Load more",
+    "DELETE": "Remove {{ name }}"
   },
   "ADF_CONFIRM_DIALOG": {
     "TITLE": "Confirm",