Merge pull request #788 from nsemets/fix/ENG-9685

[ENG-9685] Preprint Moderation: Scrollable region must have keyboard access

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,32 @@
     <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"
+  >
+    @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

@@ -28,6 +28,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/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;
+  }
 }