fix(preprints): fixed accessibility issues

Author: nsemets

src/app/features/moderation/components/my-reviewing-navigation/my-reviewing-navigation.component.html

@@ -1,4 +1,4 @@
-<h4>{{ provider().name }}</h4>
+<h3>{{ provider().name }}</h3>
 
 <div class="flex flex-column gap-2 mt-2">
   @for (tab of tabOptions; track $index) {

src/app/features/moderation/components/preprint-recent-activity-list/preprint-recent-activity-list.component.html

@@ -6,31 +6,33 @@
     <p-skeleton height="2.5rem"></p-skeleton>
   </div>
 } @else {
-  <div class="overflow-auto">
-    <div class="w-max">
-      @for (item of reviews(); track $index) {
-        <div
-          class="recent-activity-item flex w-full align-items-center justify-content-between py-2 white-space-nowrap"
-        >
-          <div class="flex align-items-center gap-1">
-            <osf-icon
-              [class]="reviewStatusIcon[item.toState].value"
-              [iconClass]="reviewStatusIcon[item.toState].icon"
-            ></osf-icon>
-            <span class="ml-2">{{ item.creator.name }}</span>
-            <span>{{ preprintReviewStatus[item.toState].label | translate: { name: item.preprint.name } }}</span>
-            <span>{{ item.provider.name }}</span>
-          </div>
-
-          <p class="flex flex-wrap gap-1 ml-3">
-            {{ item.dateModified | date: 'MMM d, y h:mm a' }}
-          </p>
+  <div
+    class="overflow-auto"
+    tabindex="0"
+    role="region"
+    [attr.aria-label]="'project.overview.recentActivity.title' | translate"
+    osfHorizontalScrollKeyboard
+  >
+    @for (item of reviews(); track $index) {
+      <div class="recent-activity-item flex w-full align-items-center justify-content-between py-2 white-space-nowrap">
+        <div class="flex align-items-center gap-1">
+          <osf-icon
+            [class]="reviewStatusIcon[item.toState].value"
+            [iconClass]="reviewStatusIcon[item.toState].icon"
+          ></osf-icon>
+          <span class="ml-2">{{ item.creator.name }}</span>
+          <span>{{ preprintReviewStatus[item.toState].label | translate: { name: item.preprint.name } }}</span>
+          <span>{{ item.provider.name }}</span>
         </div>
-      }
-    </div>
+
+        <p class="flex flex-wrap gap-1 ml-3">
+          {{ item.dateModified | date: 'MMM d, y h:mm a' }}
+        </p>
+      </div>
+    }
   </div>
 
-  @if (totalCount() > 10) {
+  @if (totalCount() > rows()) {
     <osf-custom-paginator
       class="block mt-4"
       [first]="first()"

src/app/features/moderation/components/preprint-recent-activity-list/preprint-recent-activity-list.component.scss

@@ -1,5 +1,6 @@
 .recent-activity-item {
   border-bottom: 1px solid var(--grey-2);
+  min-width: max-content;
 
   &:hover {
     background-color: var(--grey-3);

src/app/features/moderation/components/preprint-recent-activity-list/preprint-recent-activity-list.component.ts

@@ -9,13 +9,22 @@ import { ChangeDetectionStrategy, Component, input, output, signal } from '@angu
 
 import { CustomPaginatorComponent } from '@osf/shared/components/custom-paginator/custom-paginator.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
+import { HorizontalScrollKeyboardDirective } from '@osf/shared/directives/horizontal-scroll-keyboard.directive';
 
 import { PreprintReviewStatus, ReviewStatusIcon } from '../../constants';
 import { PreprintReviewActionModel } from '../../models';
 
 @Component({
   selector: 'osf-preprint-recent-activity-list',
-  imports: [TableModule, DatePipe, TranslatePipe, IconComponent, Skeleton, CustomPaginatorComponent],
+  imports: [
+    TableModule,
+    DatePipe,
+    TranslatePipe,
+    IconComponent,
+    Skeleton,
+    CustomPaginatorComponent,
+    HorizontalScrollKeyboardDirective,
+  ],
   templateUrl: './preprint-recent-activity-list.component.html',
   styleUrl: './preprint-recent-activity-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,6 +37,7 @@ export class PreprintRecentActivityListComponent {
   pageChanged = output<number>();
 
   first = signal(0);
+  rows = signal(10);
   readonly reviewStatusIcon = ReviewStatusIcon;
   readonly preprintReviewStatus = PreprintReviewStatus;
 

src/app/features/preprints/pages/preprint-details/preprint-details.component.ts

@@ -32,7 +32,6 @@ import { ResetState } from '@osf/features/files/store';
 import { ReviewPermissions } from '@osf/shared/enums/review-permissions.enum';
 import { pathJoin } from '@osf/shared/helpers/path-join.helper';
 import { FixSpecialCharPipe } from '@osf/shared/pipes/fix-special-char.pipe';
-import { AnalyticsService } from '@osf/shared/services/analytics.service';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 import { MetaTagsService } from '@osf/shared/services/meta-tags.service';
@@ -101,7 +100,6 @@ export class PreprintDetailsComponent implements OnInit, OnDestroy {
   private readonly metaTags = inject(MetaTagsService);
   private readonly datePipe = inject(DatePipe);
   private readonly dataciteService = inject(DataciteService);
-  private readonly analyticsService = inject(AnalyticsService);
   private readonly prerenderReady = inject(PrerenderReadyService);
 
   private readonly environment = inject(ENVIRONMENT);

src/app/shared/components/resource-card/resource-card.component.html

@@ -8,7 +8,7 @@
           <div class="flex align-items-center gap-2">
             <h2>
               <a
-                class="dark-blue-link word-break-word"
+                class="block line-height-4 dark-blue-link word-break-word"
                 [href]="resource().absoluteUrl"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -33,7 +33,7 @@ <h2>
             <div class="line-height-3">
               @for (affiliatedEntity of affiliatedEntities().slice(0, limit); track $index) {
                 <a
-                  class="word-break-word"
+                  class="word-break-word block line-height-3"
                   [href]="affiliatedEntity.absoluteUrl"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -53,7 +53,7 @@ <h2>
             <div class="flex flex-row gap-1 line-height-3">
               <p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
               <a
-                class="white-space-normal word-break-word"
+                class="block line-height-4 white-space-normal word-break-word"
                 [href]="resource().isPartOf!.absoluteUrl"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -67,7 +67,7 @@ <h2>
             <div class="flex flex-row gap-1 line-height-3">
               <p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
               <a
-                class="white-space-normal"
+                class="block line-height-4 white-space-normal"
                 [href]="resource().isContainedBy!.absoluteUrl"
                 target="_blank"
                 rel="noopener noreferrer"

src/app/shared/directives/horizontal-scroll-keyboard.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, HostListener, input } from '@angular/core';
+
+@Directive({
+  selector: '[osfHorizontalScrollKeyboard]',
+})
+export class HorizontalScrollKeyboardDirective {
+  scrollAmount = input<number>(50);
+
+  @HostListener('keydown', ['$event'])
+  onKeydown(event: KeyboardEvent): void {
+    const container = event.currentTarget as HTMLElement;
+    if (!container) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        container.scrollBy({ left: this.scrollAmount(), behavior: 'smooth' });
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        container.scrollBy({ left: -this.scrollAmount(), behavior: 'smooth' });
+        break;
+      case 'Home':
+        event.preventDefault();
+        container.scrollTo({ left: 0, behavior: 'smooth' });
+        break;
+      case 'End':
+        event.preventDefault();
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+        break;
+    }
+  }
+}

src/styles/_base.scss

@@ -92,4 +92,9 @@
     margin-bottom: mix.rem(4px);
     font-weight: 400;
   }
+
+  *:focus-visible {
+    outline: 1px solid var(--pr-blue-1);
+    outline-offset: 2px;
+  }
 }