Fix resource policy accessibility issues

Author: alexandrevryghem

src/app/shared/resource-policies/entry/resource-policy-entry.component.html

@@ -5,7 +5,9 @@
            [id]="entry.id"
            [ngModel]="entry.checked"
            (ngModelChange)="this.toggleCheckbox.emit($event);">
-    <label class="custom-control-label" [for]="entry.id"></label>
+    <label class="custom-control-label" [for]="entry.id"
+           [attr.aria-label]="(entry.checked ? 'resource-policies.table.headers.deselect' : 'resource-policies.table.headers.select') | translate">
+    </label>
   </div>
 </td>
 <th scope="row">

src/app/shared/resource-policies/resource-policies.component.html

@@ -38,11 +38,13 @@
       <tr *ngIf="(getResourcePolicies() | async)?.length > 0" class="text-center">
         <th>
           <div class="custom-control custom-checkbox">
-            <input type="checkbox"
+            <input #selectAllBtn type="checkbox"
                    class="custom-control-input"
                    [id]="'selectAll_' + resourceUUID"
                    (change)="selectAllCheckbox($event)">
-            <label class="custom-control-label" [for]="'selectAll_' + resourceUUID"></label>
+            <label class="custom-control-label" [for]="'selectAll_' + resourceUUID"
+                   [attr.aria-label]="(selectAllBtn.checked ? 'resource-policies.table.headers.deselect-all' : 'resource-policies.table.headers.select-all') | translate">
+            </label>
           </div>
         </th>
         <th>{{'resource-policies.table.headers.id' | translate}}</th>

src/assets/i18n/en.json5

@@ -3610,6 +3610,14 @@
 
   "resource-policies.table.headers.group": "Group",
 
+  "resource-policies.table.headers.select-all": "Select all",
+
+  "resource-policies.table.headers.deselect-all": "Deselect all",
+
+  "resource-policies.table.headers.select": "Select",
+
+  "resource-policies.table.headers.deselect": "Deselect",
+
   "resource-policies.table.headers.id": "ID",
 
   "resource-policies.table.headers.name": "Name",