[ADF-3115] a11y fixes (#3424)

* a11y fixes for search input

* a11y fixes for pagination

* a11y fixes for content actions

lib/content-services/i18n/en.json

@@ -160,6 +160,13 @@
   },
   "SEARCH": {
     "CONTROL": {},
+    "BUTTON": {
+      "TOOLTIP": "Search",
+      "ARIA-LABEL": "Search button"
+    },
+    "INPUT": {
+      "ARIA-LABEL": "Search input"
+    },
     "RESULTS": {
       "SUMMARY": "{{numResults}} result found for {{searchTerm}}",
       "NONE": "No results found for {{searchTerm}}",

lib/content-services/search/components/search-control.component.html

@@ -1,15 +1,17 @@
 <div class="adf-search-container">
     <div *ngIf="isLoggedIn()" [@transitionMessages]="subscriptAnimationState" (@transitionMessages.done)="applySearchFocus($event)">
-        <a mat-icon-button
+        <button mat-icon-button
             *ngIf="expandable"
             id="adf-search-button"
             class="adf-search-button"
+            [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
             (click)="toggleSearchBar($event)"
             (keyup.enter)="toggleSearchBar($event)">
-            <mat-icon aria-label="search button">search</mat-icon>
+            <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
-        </a>
+        </button>
         <mat-form-field class="adf-input-form-field-divider">
             <input matInput #searchInput
+                [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
                 [type]="inputType"
                 [autocomplete]="getAutoComplete()"
                 id="adf-control-input"

lib/core/datatable/components/datatable/datatable.component.html

@@ -59,6 +59,7 @@
                 <!-- Actions (left) -->
                 <div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
                     <button mat-icon-button [matMenuTriggerFor]="menu"
+                            [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
                             [attr.id]="'action_menu_left_' + idx"
                             [attr.data-automation-id]="'action_menu_' + idx">
                         <mat-icon>more_vert</mat-icon>
@@ -162,6 +163,7 @@
                 <div *ngIf="actions && actionsPosition === 'right'"
                      class="adf-datatable-table-cell alfresco-datatable__actions-cell">
                     <button mat-icon-button [matMenuTriggerFor]="menu"
+                            [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
                             [attr.id]="'action_menu_right_' + idx"
                             [attr.data-automation-id]="'action_menu_' + idx">
                         <mat-icon>more_vert</mat-icon>

lib/core/i18n/en.json

@@ -38,6 +38,12 @@
       "YB": "YB"
     },
     "PAGINATION": {
+      "ARIA": {
+        "ITEMS_PER_PAGE": "Page size selector",
+        "CURRENT_PAGE": "Current page selector",
+        "PREVIOUS_PAGE": "Previous page button",
+        "NEXT_PAGE": "Next page button"
+      },
       "ITEMS_RANGE": "Showing {{ range }} of {{ total }}",
       "ITEMS_PER_PAGE": "Items per page",
       "CURRENT_PAGE": "Page {{ number }}",
@@ -201,6 +207,9 @@
         "TITLE": "Drag and drop",
         "SUBTITLE": "to upload files"
       }
+    },
+    "CONTENT-ACTIONS": {
+      "TOOLTIP": "Content actions"
     }
   },
   "USER_PROFILE": {

lib/core/pagination/pagination.component.html

@@ -19,7 +19,10 @@
             {{ pagination.maxItems }}
         </span>
 
-        <button mat-icon-button [matMenuTriggerFor]="pageSizeMenu">
+        <button
+            mat-icon-button
+            [attr.aria-label]="'CORE.PAGINATION.ARIA.ITEMS_PER_PAGE' | translate"
+            [matMenuTriggerFor]="pageSizeMenu">
             <mat-icon>arrow_drop_down</mat-icon>
         </button>
 
@@ -40,6 +43,7 @@
 
         <button
             mat-icon-button
+            [attr.aria-label]="'CORE.PAGINATION.ARIA.CURRENT_PAGE' | translate"
             [matMenuTriggerFor]="pagesMenu"
             *ngIf="pages.length > 1">
             <mat-icon>arrow_drop_down</mat-icon>
@@ -63,6 +67,7 @@
         <button
             class="adf-pagination__previous-button"
             mat-icon-button
+            [attr.aria-label]="'CORE.PAGINATION.ARIA.PREVIOUS_PAGE' | translate"
             [disabled]="isFirstPage"
             (click)="goPrevious()">
             <mat-icon>keyboard_arrow_left</mat-icon>
@@ -71,6 +76,7 @@
         <button
             class="adf-pagination__next-button"
             mat-icon-button
+            [attr.aria-label]="'CORE.PAGINATION.ARIA.NEXT_PAGE' | translate"
             [disabled]="isLastPage"
             (click)="goNext()">
             <mat-icon>keyboard_arrow_right</mat-icon>