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>