feat: improve a11y

Author: dmaduzia

apps/blog/src/assets/i18n/en.json

@@ -312,5 +312,10 @@
       "section1": "We’ll transfer your article to the CMS and schedule its publication.",
       "section2": "We’ll also promote it on social media to maximize its reach."
     }
+  },
+  "relatedArticles": {
+    "title": "Related Articles",
+    "previousSlide": "Previous slide",
+    "nextSlide": "Next slide"
   }
 }

apps/blog/src/assets/i18n/pl.json

@@ -315,5 +315,10 @@
       "section1": "Teraz my zajmiemy się przeniesieniem twojego artykułu do CMS’a i zaplanujemy jego opublikowanie",
       "section2": "Zajmiemy się również jego promowaniem w mediach społecznościowych, aby jak najwięcej osób mogło skorzystać z wiedzy, którą w nim zawarłeś!"
     }
+  },
+  "relatedArticles": {
+    "title": "Powiązane artykuły",
+    "previousSlide": "Poprzedni slajd",
+    "nextSlide": "Następny slajd"
   }
 }

libs/blog/articles/feature-related-articles/src/lib/related-articles.component.ts

@@ -5,53 +5,87 @@ import {
   input,
   OnInit,
 } from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o';
 
 import { RelatedArticleListStore } from '@angular-love/blog/articles/data-access';
 import { UiArticleCardComponent } from '@angular-love/blog/articles/ui-article-card';
+import { ButtonComponent } from '@angular-love/blog/shared/ui-button';
 
 @Component({
   selector: 'al-related-articles',
   template: `
     @if (store.isFetchRelatedArticleListLoaded()) {
-      <strong class="text-3xl">Related Articles</strong>
-      <owl-carousel-o [options]="customOptions">
-        @for (article of store.relatedArticles(); track $index) {
-          <ng-template carouselSlide>
-            <al-article-card [article]="article" cardType="compact" />
-          </ng-template>
-          <ng-template carouselSlide>
-            <al-article-card [article]="article" cardType="compact" />
-          </ng-template>
-        }
-      </owl-carousel-o>
+      <ng-container *transloco="let t; read: 'relatedArticles'">
+        <h2 class="mb-4 text-3xl font-bold">{{ t('title') }}</h2>
+        <div class="relative lg:px-14">
+          <owl-carousel-o #carousel role="list" [options]="customOptions">
+            @for (article of store.relatedArticles(); track $index) {
+              <ng-template carouselSlide>
+                <!-- Prevents focus rings from being cut off -->
+                <li class="list-none py-1">
+                  <al-article-card [article]="article" cardType="compact" />
+                </li>
+              </ng-template>
+            }
+          </owl-carousel-o>
+          <div
+            class="absolute left-0 top-1/2 hidden w-full -translate-y-1/2 justify-between lg:flex"
+          >
+            <button
+              al-button
+              type="button"
+              class="bg-al-pink text-white"
+              [attr.aria-label]="t('previousSlide')"
+              (click)="carousel.prev()"
+              size="small"
+            >
+              <span class="text-2xl">‹</span>
+            </button>
+            <button
+              al-button
+              type="button"
+              class="bg-al-pink text-white"
+              [attr.aria-label]="t('nextSlide')"
+              (click)="carousel.next()"
+              size="small"
+            >
+              <span class="text-2xl">›</span>
+            </button>
+          </div>
+        </div>
+      </ng-container>
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [RelatedArticleListStore],
-  imports: [UiArticleCardComponent, CarouselModule],
+  imports: [
+    UiArticleCardComponent,
+    CarouselModule,
+    ButtonComponent,
+    TranslocoDirective,
+  ],
 })
 export class RelatedArticlesComponent implements OnInit {
   readonly id = input.required<number>();
   customOptions: OwlOptions = {
     loop: true,
     mouseDrag: false,
     touchDrag: true,
-    pullDrag: false,
+    pullDrag: true,
     dots: true,
-    margin: 24, // Add spacing between items
+    margin: 24,
     navSpeed: 700,
     navText: ['', ''],
     responsive: {
       // Keep in mind these breakpoints refer to container width, not the viewport width
       0: {
         items: 1,
       },
-      640: {
+      540: {
         items: 2,
       },
     },
-    nav: true,
   };
 
   readonly store = inject(RelatedArticleListStore);

libs/blog/shared/ui-avatar/src/lib/avatar.component.ts

@@ -9,9 +9,6 @@ type AvatarSize = '32' | '96';
   styleUrls: ['./avatar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgOptimizedImage],
-  host: {
-    class: 'block',
-  },
 })
 export class AvatarComponent {
   readonly imageSrc = input.required<string>();