Fix/accessibility (#359)

* fix(accessibility): update accessibility for some pages

* fix(accessibility): added aria labels

* fix(updates): clean up code

* fix(routes): removed unused route

* fix(accessibility): added aria labels to institutions

* fix(accessibility): removed aria label for header button

* fix(metadata): fixed spacing

* fix(resource-metadata): fixed url

---------

Co-authored-by: Nazar Semets <nazar690@gmail.com>

Author: nsemets

src/app/app.routes.ts

@@ -35,11 +35,6 @@ export const routes: Routes = [
         canActivate: [authGuard],
         providers: [provideStates([ProjectsState])],
       },
-      {
-        path: 'confirm/:userId/:token',
-        loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
-        data: { skipBreadcrumbs: true },
-      },
       {
         path: 'register',
         canActivate: [redirectIfLoggedInGuard],

src/app/core/components/root/root.component.html

@@ -26,4 +26,4 @@
   </div>
 }
 
-<p-confirm-dialog styleClass="w-full md:w-6 xl:w-5" />
+<p-confirm-dialog id="dialog" styleClass="w-full md:w-6 xl:w-5" [header]="'common.dialogs.confirmation' | translate" />

src/app/core/components/root/root.component.ts

@@ -1,3 +1,5 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { ConfirmDialog } from 'primeng/confirmdialog';
 
 import { CommonModule } from '@angular/common';
@@ -23,6 +25,7 @@ import { IS_MEDIUM, IS_WEB } from '@osf/shared/helpers';
     BreadcrumbComponent,
     RouterOutlet,
     SidenavComponent,
+    TranslatePipe,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],

src/app/features/admin-institutions/components/admin-table/admin-table.component.html

@@ -32,11 +32,12 @@
         [showToggleAll]="false"
         [showClear]="false"
         [dropdownIcon]="'hidden'"
+        [ariaLabel]="'common.accessibility.customizeOptions' | translate"
       >
         <ng-template let-values pTemplate="selectedItems">
           <div class="flex align-items-center gap-2">
-            <i class="fa fa-table-columns text-primary font-bold"></i>
-            <span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
+            <i class="fas fa-table-columns text-primary text-xl"></i>
+            <span class="text-primary">{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
           </div>
         </ng-template>
 
@@ -49,18 +50,19 @@
         icon="fa fa-download text-primary text-xl"
         outlined
         styleClass="grey-border-color"
+        [ariaLabel]="'common.buttons.download' | translate"
         (onClick)="downloadMenu.toggle($event)"
       />
 
       @if (reportsLink()) {
         <a
           pButton
           [href]="reportsLink()"
-          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding no-underline"
+          icon="fas fa-chart-pie text-xl"
+          class="p-button p-button-outlined font-bold grey-border-color no-underline"
           target="_blank"
-        >
-          <i class="fa fa-chart-pie text-xl"></i>
-        </a>
+          [attr.aria-label]="'common.buttons.reportsLink' | translate"
+        ></a>
       }
     </div>
   </div>
@@ -112,7 +114,7 @@
                   <a
                     [href]="getLinkUrl(rowData[col.field])"
                     [target]="getLinkTarget(rowData[col.field], col)"
-                    class="text-primary no-underline hover:underline"
+                    class="font-bold no-underline hover:underline"
                   >
                     @if (col.dateFormat) {
                       {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
@@ -135,6 +137,7 @@
                     [icon]="col.iconClass"
                     variant="text"
                     severity="info"
+                    [ariaLabel]="'common.accessibility.tooltipBtn' | translate"
                     (onClick)="onIconClick(rowData, col)"
                   />
                 }
@@ -158,14 +161,21 @@
 @if (isNextPreviousPagination()) {
   <div class="flex column-gap-2 w-full justify-content-center pt-2">
     @if (firstLink() && prevLink()) {
-      <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(firstLink())" />
+      <p-button
+        icon="fas fa-angles-left"
+        severity="contrast"
+        text
+        [ariaLabel]="'common.accessibility.goToFirstPage' | translate"
+        (onClick)="switchPage(firstLink())"
+      />
     }
 
     <p-button
       icon="fas fa-angle-left"
       severity="contrast"
       text
       [disabled]="!prevLink()"
+      [ariaLabel]="'common.accessibility.goToPreviousPage' | translate"
       (onClick)="switchPage(prevLink())"
     />
 
@@ -174,6 +184,7 @@
       severity="contrast"
       text
       [disabled]="!nextLink()"
+      [ariaLabel]="'common.accessibility.goToNextPage' | translate"
       (onClick)="switchPage(nextLink())"
     />
   </div>

src/app/features/admin-institutions/mappers/institution-preprint-to-table-data.mapper.ts

@@ -1,15 +1,11 @@
-import { extractPathAfterDomain } from '@osf/features/admin-institutions/helpers';
 import { ResourceModel } from '@shared/models';
 
+import { extractPathAfterDomain } from '../helpers';
 import { TableCellData, TableCellLink } from '../models';
 
 export function mapPreprintResourceToTableData(preprint: ResourceModel): TableCellData {
   return {
-    title: {
-      text: preprint.title,
-      url: preprint.absoluteUrl,
-      target: '_blank',
-    } as TableCellLink,
+    title: preprint.title,
     link: {
       text: preprint.absoluteUrl.split('/').pop() || preprint.absoluteUrl,
       url: preprint.absoluteUrl,

src/app/features/admin-institutions/mappers/institution-project-to-table-data.mapper.ts

@@ -1,13 +1,11 @@
-import { extractPathAfterDomain } from '@osf/features/admin-institutions/helpers';
-import { TableCellData, TableCellLink } from '@osf/features/admin-institutions/models';
 import { ResourceModel } from '@shared/models';
 
+import { extractPathAfterDomain } from '../helpers';
+import { TableCellData, TableCellLink } from '../models';
+
 export function mapProjectResourceToTableCellData(project: ResourceModel): TableCellData {
   return {
-    title: {
-      url: project.absoluteUrl,
-      text: project.title,
-    } as TableCellLink,
+    title: project.title,
     link: {
       url: project.absoluteUrl,
       text: project.absoluteUrl.split('/').pop() || project.absoluteUrl,

src/app/features/admin-institutions/mappers/institution-registration-to-table-data.mapper.ts

@@ -5,11 +5,7 @@ import { TableCellData, TableCellLink } from '../models';
 
 export function mapRegistrationResourceToTableData(registration: ResourceModel): TableCellData {
   return {
-    title: {
-      text: registration.title,
-      url: registration.absoluteUrl,
-      target: '_blank',
-    } as TableCellLink,
+    title: registration.title,
     link: {
       text: registration.absoluteUrl.split('/').pop() || registration.absoluteUrl,
       url: registration.absoluteUrl,

src/app/features/admin-institutions/mappers/institution-user-to-table-data.mapper.ts

@@ -1,17 +1,11 @@
-import { InstitutionUser, TableCellData } from '@osf/features/admin-institutions/models';
+import { InstitutionUser, TableCellData } from '../models';
 
 import { environment } from 'src/environments/environment';
 
 export function mapUserToTableCellData(user: InstitutionUser): TableCellData {
   return {
     id: user.id,
-    userName: user.userName
-      ? {
-          text: user.userName,
-          url: `${environment.webUrl}/${user.userId}`,
-          target: '_blank',
-        }
-      : '-',
+    userName: user.userName || '-',
     department: user.department || '-',
     userLink: {
       text: user.userId,

src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.html

@@ -18,7 +18,7 @@ <h3 class="title">
   <div slot="otherFilters">
     <p-button
       styleClass="grey-border-color"
-      icon="fa fa-filter text-primary text-xl"
+      icon="fas fa-filter text-primary text-xl"
       [label]="'adminInstitutions.common.filters' | translate"
       outlined
       (onClick)="filtersVisible.set(!filtersVisible())"

src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html

@@ -11,13 +11,15 @@
   [reportsLink]="institution()!.linkToExternalReportsArchive"
 >
   <div slot="amount" class="flex items-center">
-    <h3 class="title">{{ resourcesCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
+    <p class="text-primary font-bold">
+      {{ resourcesCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}
+    </p>
   </div>
 
   <div slot="otherFilters">
     <p-button
       styleClass="grey-border-color"
-      icon="fa fa-filter text-primary text-xl"
+      icon="fas fa-filter text-primary text-xl"
       [label]="'adminInstitutions.common.filters' | translate"
       outlined
       (onClick)="filtersVisible.set(!filtersVisible())"