fix: add accessibility (#154)

* fix: first changes accessibility * fix: add accessibility
onecx · Aug 5, 2024 · fec1340 · fec1340
1 parent 14d6514
commit fec1340
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 22 deletions.
diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html
@@ -116,6 +116,7 @@
               styleClass="h-full"
               icon="pi pi-refresh"
               (onClick)="onReload()"
+              ariaLabel="'ACTIONS.SEARCH.RELOAD' | translate"
               [pTooltip]="'ACTIONS.SEARCH.RELOAD' | translate"
               tooltipPosition="top"
               tooltipEvent="hover"
@@ -147,6 +148,7 @@
                     [id]="'apm_application_detail_permission_table_header_permission_tools'"
                     class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="showPermissionTools = !showPermissionTools"
+                    aria-label="'ACTIONS.VIEW.PERMISSION.TOOLS' | translate"
                     [pTooltip]="'ACTIONS.VIEW.PERMISSION.TOOLS' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -160,6 +162,7 @@
                     [id]="'apm_application_detail_permission_table_header_permission_create'"
                     class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="onCreatePermission()"
+                    aria-label="'ACTIONS.CREATE.PERMISSION' | translate"
                     [pTooltip]="'ACTIONS.CREATE.PERMISSION' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -177,6 +180,7 @@
               <div class="flex justify-content-center align-items-center">
                 <span
                   class="inline-block font-bold"
+                  aria-label="'ROLE.LABEL' | translate"
                   [pTooltip]="'ROLE.TOOLTIP' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -189,6 +193,7 @@
                   [id]="'apm_application_detail_permission_table_header_permission_tools'"
                   class="p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="showRoleTools = !showRoleTools"
+                  aria-label="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
                   [pTooltip]="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -202,6 +207,7 @@
                   [id]="'app_detail_permission_table_header_add_role_action'"
                   class="pr-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onCreateRole($event)"
+                  aria-label="'ACTIONS.CREATE.ROLE' | translate"
                   [pTooltip]="'ACTIONS.CREATE.ROLE.TOOLTIP' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -215,6 +221,7 @@
                   [id]="'app_detail_permission_table_header_add_iam_roles_action'"
                   class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onAddIAMRoles($event)"
+                  aria-label="'ACTIONS.CREATE.IAM_ROLES' | translate"
                   [pTooltip]="'ACTIONS.CREATE.IAM_ROLES.TOOLTIP' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -229,6 +236,7 @@
                     [id]="'app_detail_permission_table_header_add_workspace_roles_action'"
                     class="p-button-rounded p-button p-component p-button-icon-only button-letter-icon"
                     (click)="onCreateWorkspaceRoles($event)"
+                    aria-label="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
                     [pTooltip]="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -246,7 +254,7 @@
               <th
                 pFrozenColumn
                 id="app_detail_permission_table_header_actions"
-                class="pt-2 pb-1 vertical-align-bottom border-bottom-primary"
+                class="pt-2 pb-1 vertical-align-bottom border-bottom-primary text-center"
               >
                 {{ 'PERMISSION.ACTIONS' | translate }}
               </th>
@@ -343,6 +351,7 @@
                   [id]="'app_detail_permission_table_sort_app_id'"
                   class="p-2 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onFilterItemSortIcon($event, sortIconAppId, 'appId')"
+                  aria-label="'PERMISSION.SORT.APP_ID' | translate"
                   [pTooltip]="'PERMISSION.SORT.APP_ID' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -375,6 +384,7 @@
                     [id]="'app_detail_permission_table_col_' + role.name + '_action_delete'"
                     class="p-1 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="onDeleteRole($event, role)"
+                    aria-label="'ACTIONS.DELETE.ROLE' | translate"
                     [pTooltip]="'ACTIONS.DELETE.ROLE' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -388,6 +398,7 @@
                     [id]="'app_detail_permission_table_col_' + role.id + '_action_edit'"
                     class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="onEditRole($event, role)"
+                    aria-label="'ACTIONS.EDIT.ROLE' | translate"
                     [pTooltip]="'ACTIONS.EDIT.ROLE' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -402,6 +413,7 @@
                   [id]="'app_detail_permission_table_col_' + role.id + '_action_grant_all'"
                   class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onGrantAllPermissions($event, role)"
+                  aria-label="'PERMISSION.ASSIGNMENTS.GRANT_ALL_FOR_ROLE' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.GRANT_ALL_FOR_ROLE' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -415,6 +427,7 @@
                   [id]="'app_detail_permission_table_col_' + role.id + '_action_revoke_all'"
                   class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onRevokeAllPermissions($event, role)"
+                  aria-label="'PERMISSION.ASSIGNMENTS.REVOKE_ALL_FOR_ROLE' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.REVOKE_ALL_FOR_ROLE' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -440,7 +453,7 @@
               <td
                 pFrozenColumn
                 id="app_detail_permission_table_header_actions"
-                class="pt-2 pb-1 px-2 white-space-nowrap"
+                class="pt-2 pb-1 px-2 white-space-nowrap text-center"
               >
                 <button
                   pbutton
@@ -449,6 +462,7 @@
                   [id]="'app_detail_permission_table_row_' + row + '_edit_action'"
                   class="mr-1 my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onDetailPermission($event, rowData)"
+                  aria-label="(rowData.mandatory ? 'ACTIONS.VIEW' : 'ACTIONS.EDIT') + '.PERMISSION' | translate"
                   [pTooltip]="(rowData.mandatory ? 'ACTIONS.VIEW' : 'ACTIONS.EDIT') + '.PERMISSION' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -467,6 +481,7 @@
                   [id]="'app_detail_permission_table_row_' + row + '_copy_action'"
                   class="mr-1 my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onCopyPermission($event, rowData)"
+                  aria-label="'ACTIONS.COPY.PERMISSION' | translate"
                   [pTooltip]="'ACTIONS.COPY.PERMISSION' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -481,6 +496,7 @@
                   class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onDeletePermission($event, rowData)"
                   [disabled]="rowData.mandatory"
+                  aria-label="'ACTIONS.DELETE.PERMISSION' | translate"
                   [pTooltip]="'ACTIONS.DELETE.PERMISSION' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -556,6 +572,7 @@
                     *ngIf="!rowData.roles[role.id]"
                     class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="onAssignPermission($event, rowData, role)"
+                    aria-label="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                     [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"
@@ -570,6 +587,7 @@
                     *ngIf="rowData.roles[role.id]"
                     class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                     (click)="onRemovePermission($event, rowData, role)"
+                    aria-label="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                     [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                     tooltipPosition="top"
                     tooltipEvent="hover"

diff --git a/src/app/permission/app-search/app-search.component.html b/src/app/permission/app-search/app-search.component.html
@@ -8,16 +8,23 @@
   >
     <div [formGroup]="appSearchCriteriaGroup" class="flex flex-wrap flex-row gap-4 row-gap-3 px-2">
       <div class="flex flex-wrap flex-row align-items-center ml-1 gap-2">
-        <div class="p-selectbutton-title opacity-90 text-sm" [title]="'DIALOG.SEARCH.FILTER.TOOLTIP' | translate">
+        <div
+          class="p-selectbutton-title opacity-90 text-sm"
+          [pTooltip]="'DIALOG.SEARCH.FILTER.TOOLTIP' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        >
           {{ 'DIALOG.SEARCH.FILTER.LABEL' | translate }}
         </div>
         <div class="search-criteria-selectbutton">
           <p-selectButton
             inputid="app_search_criteria_app_type"
             [options]="appTypeItems"
             formControlName="appType"
-            [title]="'DIALOG.SEARCH.FILTER.TOOLTIP' | translate"
             (onChange)="onAppTypeFilterChange($event)"
+            [pTooltip]="'DIALOG.SEARCH.FILTER.TOOLTIP' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           >
             <ng-template let-item pTemplate>{{ item.label | translate }}</ng-template>
           </p-selectButton>
@@ -32,7 +39,9 @@
             formControlName="name"
             class="w-15rem"
             [clear]="true"
-            [title]="'APP.SEARCH.NAME.TOOLTIP' | translate"
+            [pTooltip]="'APP.SEARCH.NAME.TOOLTIP' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           />
           <label for="app_search_criteria_name">{{ 'APP.SEARCH.NAME' | translate }}</label>
         </span>
@@ -45,9 +54,11 @@
       <p-message id="app_search_data_access_issue" severity="error" [text]="exceptionKey | translate"></p-message>
       <p-button
         id="app_search_reload_button"
-        [title]="'ACTIONS.SEARCH.RELOAD' | translate"
-        (onClick)="onSearch()"
         icon="pi pi-refresh"
+        (onClick)="onSearch()"
+        [pTooltip]="'ACTIONS.SEARCH.RELOAD' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></p-button>
     </div>
 
@@ -63,7 +74,9 @@
             [options]="quickFilterItems"
             [(ngModel)]="quickFilterValue"
             (onChange)="onQuickFilterChange($event)"
-            [title]="'DIALOG.SEARCH.QUICK_FILTER.TOOLTIP' | translate"
+            [pTooltip]="'DIALOG.SEARCH.QUICK_FILTER.TOOLTIP' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           >
             <ng-template let-item pTemplate>{{ item.label | translate }}</ng-template>
           </p-selectButton>
@@ -111,8 +124,10 @@
               <span
                 *ngIf="app.apps"
                 [id]="'app_search_data_idx_' + idx + '_apps'"
-                [title]="'APP.APPS' | translate"
                 class="card-badge-right badge-2-1 sm:badge-2-2 p-1 text-sm"
+                [pTooltip]="'APP.APPS' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
                 >{{ app.apps }}</span
               >
               <div class="font-bold text-base md:text-lg text-responsive">

diff --git a/src/app/permission/permission-detail/permission-detail.component.html b/src/app/permission/permission-detail/permission-detail.component.html
@@ -107,8 +107,10 @@
         icon="pi pi-times"
         iconPos="left"
         [label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
-        [title]="'ACTIONS.NAVIGATION.CLOSE.TOOLTIP' | translate"
         (click)="onClose()"
+        [pTooltip]="'ACTIONS.NAVIGATION.CLOSE.TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></button>
       <button
         *ngIf="changeMode !== 'VIEW'"
@@ -120,8 +122,10 @@
         icon="pi pi-times"
         iconPos="left"
         [label]="'ACTIONS.CANCEL' | translate"
-        [title]="'ACTIONS.NAVIGATION.CLOSE_WITHOUT_SAVE' | translate"
         (click)="onClose()"
+        [pTooltip]="'ACTIONS.NAVIGATION.CLOSE_WITHOUT_SAVE' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></button>
       <button
         *ngIf="changeMode !== 'VIEW'"
@@ -132,9 +136,11 @@
         icon="pi pi-save"
         iconPos="left"
         [label]="'ACTIONS.SAVE' | translate"
-        [title]="'ACTIONS.TOOLTIPS.SAVE' | translate"
         [disabled]="!formGroup.valid"
         (click)="onSave()"
+        [pTooltip]="'ACTIONS.TOOLTIPS.SAVE' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></button>
     </div>
   </ng-template>

diff --git a/src/app/permission/role-detail/role-detail.component.html b/src/app/permission/role-detail/role-detail.component.html
@@ -12,13 +12,31 @@
     <div class="flex flex-wrap flex-column row-gap-4 justify-content-between">
       <div class="mt-1">
         <span class="p-float-label" controlErrorAnchor>
-          <input pInputText type="text" class="w-full" id="role_detail_name" formControlName="name" />
+          <input
+            pInputText
+            type="text"
+            class="w-full"
+            id="role_detail_name"
+            formControlName="name"
+            [pTooltip]="'ROLE.NAME' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          />
           <label class="ocx-required-label" for="role_detail_name"> {{ 'ROLE.NAME' | translate }} </label>
         </span>
       </div>
       <div>
         <span class="p-float-label">
-          <input pInputText type="text" class="w-full" id="role_detail_description" formControlName="description" />
+          <input
+            pInputText
+            type="text"
+            class="w-full"
+            id="role_detail_description"
+            formControlName="description"
+            [pTooltip]="'ROLE.DESCRIPTION' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          />
           <label for="role_detail_description">{{ 'ROLE.DESCRIPTION' | translate }} </label>
         </span>
       </div>
@@ -135,8 +153,10 @@
         icon="pi pi-times"
         iconPos="left"
         [label]="'ACTIONS.CANCEL' | translate"
-        [title]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
         (click)="onClose()"
+        [pTooltip]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></button>
       <button
         pButton
@@ -147,6 +167,9 @@
         iconPos="left"
         [label]="'ROLE.IAM.SAVE' | translate"
         (click)="onAddIamRoles()"
+        [pTooltip]="'ROLE.IAM.SAVE.TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></button>
     </div>
   </ng-template>

diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
@@ -6,7 +6,11 @@
   <p-tabView *ngIf="userAssignmentItems; else loading" [(activeIndex)]="selectedTab">
     <p-tabPanel>
       <ng-template pTemplate="header">
-        <span title="{{ 'USER_ROLE_PERMISSIONS.TAB_NAME_PERMISSIONS.TOOLTIP' | translate }}">
+        <span
+          [pTooltip]="'USER_ROLE_PERMISSIONS.TAB_NAME_PERMISSIONS.TOOLTIP' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        >
           {{ 'USER_ROLE_PERMISSIONS.TAB_NAME_PERMISSIONS' | translate }}
         </span>
       </ng-template>
@@ -45,8 +49,10 @@
                 id="up_permission_table_filter_clear"
                 class="p-inputgroup-addon bg-primary cursor-pointer pi pi-filter-slash"
                 (click)="onClearFilterUserAssignmentTable()"
-                [title]="'GENERAL.FILTER_CLEAR' | translate"
                 tabindex="0"
+                [pTooltip]="'GENERAL.FILTER_CLEAR' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
               >
               </a>
             </div>
@@ -55,9 +61,11 @@
                 type="button"
                 id="up_permissions_header_action_reload"
                 styleClass="h-full"
-                [title]="'ACTIONS.SEARCH.RELOAD' | translate"
-                (onClick)="onReload()"
                 icon="pi pi-refresh"
+                (onClick)="onReload()"
+                [pTooltip]="'ACTIONS.SEARCH.RELOAD' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
               >
               </p-button>
             </div>
@@ -102,7 +110,11 @@
 
     <p-tabPanel>
       <ng-template pTemplate="header">
-        <span title="{{ 'USER_ROLE_PERMISSIONS.TAB_NAME_ROLES.TOOLTIP' | translate }}">
+        <span
+          [pTooltip]="'USER_ROLE_PERMISSIONS.TAB_NAME_ROLES.TOOLTIP' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        >
           {{ 'USER_ROLE_PERMISSIONS.TAB_NAME_ROLES' | translate }}
         </span>
       </ng-template>

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -233,7 +233,8 @@
       "LIST": "Liste der fehlenden Rollen",
       "INFO": "(IAM: Identity Access Management = Benutzer & Rollen)",
       "Filter": "Filter",
-      "SAVE": "Auswahl übernehmen"
+      "SAVE": "Auswahl übernehmen",
+      "SAVE.TOOLTIP": "Augewählte Rollen übernehmen"
     }
   },
   "VALIDATION": {