[ACS-10238] sr personal files close button lacks appropriate label (#11248)

* [ACS-10238] Fix screen reading clear icon for search filter and for searching for user for adding permissions

* [ACS-10238] Fix screen reading remove icon for removing user or group from list to add permissions

lib/content-services/src/lib/i18n/en.json

@@ -2,7 +2,8 @@
   "COMMON": {
     "APPLY": "Apply",
     "CANCEL": "Cancel",
-    "NAME": "Name"
+    "NAME": "Name",
+    "CLEAR": "Clear"
   },
   "ADF_VERSION_LIST": {
     "ACTIONS": {
@@ -556,7 +557,8 @@
       "CLOSE-ACTION": "CANCEL",
       "BASE-DIALOG-TITLE": "Search a group or people to add...",
       "EVERYONE": "EVERYONE",
-      "USER-GROUP-LIST": "User or Group List"
+      "USER-GROUP-LIST": "User or Group List",
+      "REMOVE_USER_GROUP": "Remove"
     },
     "COLUMN": {
       "NAME": "Users and Groups ({{ count }})",

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html

@@ -60,6 +60,8 @@
                                     class="adf-add-member-action"
                                     [style.display]="entry.row.obj.readonly ? 'none': 'block'"
                                     (click)="onMemberDelete(entry.row.obj)"
+                                    [attr.aria-label]="'PERMISSION_MANAGER.ADD-PERMISSION.REMOVE_USER_GROUP' | translate"
+                                    [attr.title]="'PERMISSION_MANAGER.ADD-PERMISSION.REMOVE_USER_GROUP' | translate"
                                     data-automation-id="adf-delete-permission-button">
                                 <mat-icon>highlight_off</mat-icon>
                             </button>

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html

@@ -10,16 +10,18 @@
         [attr.aria-label]="'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate"
         [value]="searchedWord"
     />
-
+    <button
-    <mat-icon
+        matSuffix
+        mat-icon-button
         *ngIf="searchedWord?.length > 0"
-        class="adf-permission-search-icon"
         data-automation-id="adf-permission-clear-input"
         id="adf-permission-clear-input"
-        matSuffix
+        class="adf-permission-search-input-clear-button"
         (click)="clearSearch()"
-        >clear
+        [attr.aria-label]="'COMMON.CLEAR' | translate"
-    </mat-icon>
+        [attr.title]="'COMMON.CLEAR' | translate">
+        <mat-icon class="adf-permission-search-icon">clear</mat-icon>
+    </button>
 
     <mat-icon *ngIf="searchedWord?.length === 0" class="adf-permission-search-icon" data-automation-id="adf-permission-search-icon" matSuffix
         >search

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -86,6 +86,13 @@ $search-result-height: calc(100% - 60px);
                     color: var(--adf-theme-foreground-base-color);
                 }
             }
+
+            .adf-permission-search-input-clear-button {
+                padding: 0;
+                width: 20px;
+                height: 32px;
+                margin-right: 1.5px;
+            }
         }
     }
 

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts

@@ -30,6 +30,7 @@ import { MatInputModule } from '@angular/material/input';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
 import { UserIconColumnComponent } from '../user-icon-column/user-icon-column.component';
+import { MatIconButton } from '@angular/material/button';
 
 @Component({
     selector: 'adf-add-permission-panel',
@@ -42,7 +43,8 @@ import { UserIconColumnComponent } from '../user-icon-column/user-icon-column.co
         MatIconModule,
         MatListModule,
         UserIconColumnComponent,
-        SearchComponent
+        SearchComponent,
+        MatIconButton
     ],
     templateUrl: './add-permission-panel.component.html',
     styleUrls: ['./add-permission-panel.component.scss'],

lib/content-services/src/lib/search/components/search-text/search-text.component.html

@@ -11,7 +11,9 @@
         *ngIf="value"
         matSuffix
         (click)="clear()"
-        class="adf-search-text-form-field-clear-button">
+        class="adf-search-text-form-field-clear-button"
+        [attr.aria-label]="'SEARCH.FILTER.ACTIONS.CLEAR' | translate"
+        [attr.title]="'SEARCH.FILTER.ACTIONS.CLEAR' | translate">
         <mat-icon>close</mat-icon>
     </button>
 </mat-form-field>