Fix/accessibility

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())"

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

@@ -1,3 +0,0 @@
-.title {
-  color: var(--pr-blue-1);
-}

src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.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-users/institutions-users.component.ts

@@ -14,7 +14,7 @@ import { FormsModule } from '@angular/forms';
 
 import { UserSelectors } from '@osf/core/store/user';
 import { SelectComponent } from '@osf/shared/components';
-import { TABLE_PARAMS } from '@osf/shared/constants';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { Primitive } from '@osf/shared/helpers';
 import { SearchFilters } from '@osf/shared/models';
 import { ToastService } from '@osf/shared/services';
@@ -49,7 +49,7 @@ export class InstitutionsUsersComponent {
   });
 
   currentPage = signal(1);
-  currentPageSize = signal(TABLE_PARAMS.rows);
+  currentPageSize = signal(DEFAULT_TABLE_PARAMS.rows);
   first = signal(0);
 
   selectedDepartment = signal<string | null>(null);

src/app/features/analytics/components/view-duplicates/view-duplicates.component.html

@@ -28,6 +28,7 @@ <h2 class="flex align-items-center gap-2">
                     icon="fas fa-ellipsis-vertical"
                     raised
                     variant="outlined"
+                    [ariaLabel]="'common.buttons.more' | translate"
                     (onClick)="componentActionMenu.toggle($event)"
                   >
                   </p-button>

src/app/features/home/pages/dashboard/dashboard.component.html

@@ -10,11 +10,11 @@
   <div class="quick-search-container py-4 px-3 md:px-4">
     <p class="text-center mb-4 xl:mb-6">
       {{ 'home.loggedIn.dashboard.quickSearch.goTo' | translate }}
-      <a routerLink="/my-projects">
+      <a class="font-bold" routerLink="/my-projects">
         {{ 'home.loggedIn.dashboard.quickSearch.myProjects' | translate }}
       </a>
       {{ 'home.loggedIn.dashboard.quickSearch.toOrganize' | translate }}
-      <a routerLink="/search">
+      <a class="font-bold" routerLink="/search">
         {{ 'home.loggedIn.dashboard.quickSearch.search' | translate }}
       </a>
       {{ 'home.loggedIn.dashboard.quickSearch.osf' | translate }}

src/app/features/home/pages/dashboard/dashboard.component.ts

@@ -16,7 +16,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { CreateProjectDialogComponent } from '@osf/features/my-projects/components';
 import { IconComponent, MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
-import { MY_PROJECTS_TABLE_PARAMS } from '@osf/shared/constants';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { SortOrder } from '@osf/shared/enums';
 import { IS_MEDIUM } from '@osf/shared/helpers';
 import { MyResourcesItem, MyResourcesSearchFilters, TableParameters } from '@osf/shared/models';
@@ -44,7 +44,7 @@ export class DashboardComponent implements OnInit {
   readonly activeProject = signal<MyResourcesItem | null>(null);
   readonly sortColumn = signal<string | undefined>(undefined);
   readonly sortOrder = signal<SortOrder>(SortOrder.Asc);
-  readonly tableParams = signal<TableParameters>({ ...MY_PROJECTS_TABLE_PARAMS });
+  readonly tableParams = signal<TableParameters>({ ...DEFAULT_TABLE_PARAMS });
 
   readonly projects = select(MyResourcesSelectors.getProjects);
   readonly totalProjectsCount = select(MyResourcesSelectors.getTotalProjects);
@@ -73,7 +73,7 @@ export class DashboardComponent implements OnInit {
   setupQueryParamsSubscription(): void {
     this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       const page = Number(params['page']) || 1;
-      const rows = Number(params['rows']) || MY_PROJECTS_TABLE_PARAMS.rows;
+      const rows = Number(params['rows']) || DEFAULT_TABLE_PARAMS.rows;
       const sortField = params['sortField'];
       const sortOrder = params['sortOrder'] as SortOrder;
       const search = params['search'] || '';

src/app/features/institutions/pages/institutions-list/institutions-list.component.html

@@ -18,13 +18,7 @@
         @for (institution of institutions(); track $index) {
           <a class="dark-blue-link" [routerLink]="[institution.id]">
             <div class="border-1 border-round-xl grey-border-color px-5 py-4 flex align-items-center gap-4">
-              <img
-                class="fit-contain"
-                [ngSrc]="institution.assets.logo"
-                [alt]="institution.name"
-                width="60"
-                height="60"
-              />
+              <img class="fit-contain" [ngSrc]="institution.assets.logo" [alt]="'Logo'" width="60" height="60" />
 
               <h2>{{ institution.name }}</h2>
             </div>

src/app/features/institutions/pages/institutions-list/institutions-list.component.ts

@@ -27,7 +27,7 @@ import {
   SearchInputComponent,
   SubHeaderComponent,
 } from '@osf/shared/components';
-import { TABLE_PARAMS } from '@osf/shared/constants';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { parseQueryFilterParams } from '@osf/shared/helpers';
 import { QueryParams } from '@osf/shared/models';
 import { FetchInstitutions, InstitutionsSelectors } from '@osf/shared/stores';
@@ -59,7 +59,7 @@ export class InstitutionsListComponent {
 
   queryParams = toSignal(this.route.queryParams);
   currentPage = signal(1);
-  currentPageSize = signal(TABLE_PARAMS.rows);
+  currentPageSize = signal(DEFAULT_TABLE_PARAMS.rows);
   first = signal(0);
 
   institutions = select(InstitutionsSelectors.getInstitutions);

src/app/features/meetings/pages/meetings-landing/meetings-landing.component.spec.ts

@@ -15,7 +15,7 @@ import { MeetingsState } from '@osf/features/meetings/store';
 import { parseQueryFilterParams } from '@osf/shared/helpers';
 import { MOCK_MEETING } from '@osf/shared/mocks';
 import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
-import { TABLE_PARAMS } from '@shared/constants';
+import { DEFAULT_TABLE_PARAMS } from '@shared/constants';
 import { SortOrder } from '@shared/enums';
 
 import { MeetingsFeatureCardComponent } from '../../components';
@@ -73,10 +73,10 @@ describe('MeetingsLandingComponent', () => {
     expect(component.partnerOrganizations).toEqual(PARTNER_ORGANIZATIONS);
     expect(component.meetingsFeatureCards).toEqual(MEETINGS_FEATURE_CARDS);
     expect(component.skeletonData).toHaveLength(10);
-    expect(component.tableParams().rows).toBe(TABLE_PARAMS.rows);
+    expect(component.tableParams().rows).toBe(DEFAULT_TABLE_PARAMS.rows);
     expect(component.tableParams().firstRowIndex).toBe(0);
     expect(component.currentPage()).toBe(1);
-    expect(component.currentPageSize()).toBe(TABLE_PARAMS.rows);
+    expect(component.currentPageSize()).toBe(DEFAULT_TABLE_PARAMS.rows);
     expect(component.sortColumn()).toBe('');
     expect(component.sortOrder()).toBe(SortOrder.Asc);
   });

src/app/features/meetings/pages/meetings-landing/meetings-landing.component.ts

@@ -26,7 +26,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Meeting } from '@osf/features/meetings/models';
 import { GetAllMeetings, MeetingsSelectors } from '@osf/features/meetings/store';
 import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
-import { TABLE_PARAMS } from '@shared/constants';
+import { DEFAULT_TABLE_PARAMS } from '@shared/constants';
 import { SortOrder } from '@shared/enums';
 import { parseQueryFilterParams } from '@shared/helpers';
 import { QueryParams, SearchFilters, TableParameters } from '@shared/models';
@@ -62,9 +62,9 @@ export class MeetingsLandingComponent {
   sortColumn = signal('');
   sortOrder = signal<SortOrder>(SortOrder.Asc);
   currentPage = signal(1);
-  currentPageSize = signal(TABLE_PARAMS.rows);
+  currentPageSize = signal(DEFAULT_TABLE_PARAMS.rows);
   tableParams = signal<TableParameters>({
-    ...TABLE_PARAMS,
+    ...DEFAULT_TABLE_PARAMS,
     firstRowIndex: 0,
   });
 

src/app/features/metadata/components/metadata-affiliated-institutions/metadata-affiliated-institutions.component.html

@@ -6,10 +6,12 @@ <h2>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h2>
       <p-button
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
-        (click)="openEditAffiliatedInstitutionsDialog.emit()"
+        (onClick)="openEditAffiliatedInstitutionsDialog.emit()"
       ></p-button>
     }
   </div>
 
-  <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" [showTitle]="false" />
+  <div class="mt-4">
+    <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" [showTitle]="false" />
+  </div>
 </p-card>