feat: improve accessibility

geromegrignon · geromegrignon · commit b8b4da0792ed · 2024-05-11T00:04:09.000+02:00
diff --git a/angular-hub/index.html b/angular-hub/index.html
@@ -23,6 +23,12 @@
       as="font"
       crossorigin
     />
+    <link
+      rel="preload"
+      href="/assets/fonts/Luciole-Regular.ttf"
+      as="font"
+      crossorigin
+    />
     <script type="application/ld+json"></script>
   </head>
   <body>
diff --git a/angular-hub/src/app/components/cards/community-card.component.ts b/angular-hub/src/app/components/cards/community-card.component.ts
@@ -48,7 +48,7 @@ import { Community } from '../../../models/community.model';
 
         &:hover {
           h3 {
-            color: theme('colors.secondary');
+            @apply text-secondary underline;
           }
         }
       }
diff --git a/angular-hub/src/app/components/cards/event-card.component.ts b/angular-hub/src/app/components/cards/event-card.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
 import { Event } from '../../../models/event.model';
 import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { TagComponent } from '../tag.component';
@@ -11,12 +16,14 @@ import { TagComponent } from '../tag.component';
     <article>
       <a
         [href]="event().url ?? '#'"
+        [title]="eventLinkTitle()"
         target="_blank"
         class="flex w-full items-start gap-4"
       >
         <img
           class="rounded-xl"
           [src]="event().community?.logo"
+          aria-hidden="true"
           height="100"
           width="100"
           alt=""
@@ -26,16 +33,15 @@ import { TagComponent } from '../tag.component';
           <span class="font-bold text-primary" itemprop="date">{{
             event().date
           }}</span>
-          <h3
-            [attr.id]="event().name"
-            class="text-xl font-bold"
-            itemprop="title"
-          >
+          <h3 class="text-xl font-bold">
             {{ event().name || event().community?.name }}
           </h3>
-          <span class="text-gray-500 dark:text-gray-400" itemprop="location">{{
-            event().location
-          }}</span>
+          <div
+            class="text-gray-500 dark:text-gray-400 min-h-4"
+            itemprop="location"
+          >
+            {{ event().location }}
+          </div>
           <ul class="flex flex-wrap gap-2">
             <li class="inline">
               <app-tag [title]="event().language" />
@@ -52,7 +58,7 @@ import { TagComponent } from '../tag.component';
             }
             @if (event().isOnsite) {
               <li class="inline">
-                <app-tag [title]="'Onsite'" color="#963232" />
+                <app-tag [title]="'Onsite'" color="#ae6b09" />
               </li>
             }
           </ul>
@@ -70,7 +76,7 @@ import { TagComponent } from '../tag.component';
 
         &:hover {
           h3 {
-            color: theme('colors.secondary');
+            @apply text-secondary underline;
           }
         }
       }
@@ -79,4 +85,8 @@ import { TagComponent } from '../tag.component';
 })
 export class EventCardComponent {
   event = input.required<Event>();
+
+  eventLinkTitle = computed(() => {
+    return (this.event().name || this.event().community?.name) + 'event link';
+  });
 }
diff --git a/angular-hub/src/app/components/cards/podcast-card.component.ts b/angular-hub/src/app/components/cards/podcast-card.component.ts
@@ -44,7 +44,7 @@ import { TagComponent } from '../tag.component';
 
         &:hover {
           h3 {
-            color: theme('colors.secondary');
+            @apply text-secondary underline;
           }
         }
       }
diff --git a/angular-hub/src/app/components/navigation/navigation.component.html b/angular-hub/src/app/components/navigation/navigation.component.html
@@ -1,5 +1,6 @@
 <header class="flex items-center p-4">
   <p-button
+    aria-label="Open sidebar menu"
     class="flex-none lg:hidden"
     (click)="sidebarVisible = true"
     [text]="true"
@@ -17,7 +18,7 @@
       <!-- Navbar menu content here -->
       <li>
         <a
-          class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
+          class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
           routerLinkActive="routerLinkActive"
           [routerLinkActiveOptions]="{ exact: true }"
           routerLink="/"
@@ -26,23 +27,23 @@
       </li>
       <li>
         <a
-          class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
+          class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
           routerLinkActive="routerLinkActive"
           routerLink="/communities"
           >Communities</a
         >
       </li>
       <li>
         <a
-          class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
+          class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
           routerLinkActive="routerLinkActive"
           routerLink="/podcasts"
           >Podcasts</a
         >
       </li>
       <li>
         <a
-          class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
+          class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
           routerLinkActive="routerLinkActive"
           routerLink="/callforpapers"
           >Call for papers</a
diff --git a/angular-hub/src/app/components/navigation/navigation.component.scss b/angular-hub/src/app/components/navigation/navigation.component.scss
@@ -1,5 +1,5 @@
 .routerLinkActive {
-  @apply bg-gray-500 text-black;
+  @apply text-secondary underline;
 }
 
 .sidebarActive {
diff --git a/angular-hub/src/app/components/tag.component.ts b/angular-hub/src/app/components/tag.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div
-      class="inline-block px-2 text-sm font-semibold rounded-md text-white"
+      class="inline-block px-2 text-sm leading-6 font-semibold rounded-md text-black"
       [style.background]="color()"
     >
       {{ title() }}
@@ -15,5 +15,5 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 })
 export class TagComponent {
   title = input.required<string>();
-  color = input<string>('#963296');
+  color = input<string>('#9051ff');
 }
diff --git a/angular-hub/src/app/pages/communities/index.page.ts b/angular-hub/src/app/pages/communities/index.page.ts
@@ -34,6 +34,7 @@ export const routeMeta: RouteMeta = {
       class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"
     >
       <p-dropdown
+        ariaLabel="Select a country"
         name="language"
         [options]="countries()"
         [style]="{ width: '230px' }"
diff --git a/angular-hub/src/app/pages/index.page.ts b/angular-hub/src/app/pages/index.page.ts
@@ -39,6 +39,7 @@ export const routeMeta: RouteMeta = {
       class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"
     >
       <p-calendar
+        ariaLabel="Select a date"
         name="date"
         [style]="{ width: '230px' }"
         [ngModel]="date()"
@@ -47,6 +48,7 @@ export const routeMeta: RouteMeta = {
         [showClear]="true"
       />
       <p-dropdown
+        ariaLabel="Select a language"
         name="language"
         [style]="{ width: '230px' }"
         [options]="languages()"
@@ -57,6 +59,7 @@ export const routeMeta: RouteMeta = {
       />
       <div class="flex items-center gap-2">
         <p-inputSwitch
+          ariaLabel="Display remote events only"
           id="remote"
           name="remote"
           [ngModel]="isRemote()"
diff --git a/angular-hub/src/public/assets/fonts/Luciole-Regular.ttf b/angular-hub/src/public/assets/fonts/Luciole-Regular.ttf
diff --git a/angular-hub/src/styles.scss b/angular-hub/src/styles.scss
@@ -16,23 +16,31 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Luciole';
+  src: local('Trebutchet MS'), url('/assets/fonts/Luciole-Regular.ttf');
+  font-display: swap;
+}
+
 /* You can add global styles to this file, and also import other style files */
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Luciole, sans-serif;
 }
 
 body {
   margin: 0;
   display: flex;
   min-height: 100vh;
+  font-family: Luciole, sans-serif;
+  line-height: 1.5;
 }
 
 .logo {
   @apply box-content;
 }
 
 .title {
-  font-family: 'Pixelify', 'sans-serif';
+  font-family: Pixelify, 'sans-serif';
   background-image: linear-gradient(
     to right,
     #bf25b9,
@@ -47,6 +55,10 @@ body {
   -webkit-text-fill-color: transparent;
 }
 
+.p-button {
+  font-family: Luciole, 'sans-serif';
+}
+
 @media (prefers-reduced-motion) {
   ::view-transition-group(*),
   ::view-transition-old(*),
diff --git a/angular-hub/tailwind.config.cjs b/angular-hub/tailwind.config.cjs
@@ -10,15 +10,15 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#BF25B9',
+        primary: '#ff56f8',
         secondary: '#00bee0',
       },
       backgroundColor: {
-        primary: '#BF25B9',
+        primary: '#ff56f8',
         secondary: '#00bee0',
       },
       borderColor: {
-        primary: '#BF25B9',
+        primary: '#ff56f8',
         secondary: '#00bee0',
       },
     },

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ import { Community } from '../../../models/community.model';`
`48`	`48`
`49`	`49`	`&:hover {`
`50`	`50`	`h3 {`
`51`		`- color: theme('colors.secondary');`
	`51`	`+ @apply text-secondary underline;`
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ import { TagComponent } from '../tag.component';`
`44`	`44`
`45`	`45`	`&:hover {`
`46`	`46`	`h3 {`
`47`		`- color: theme('colors.secondary');`
	`47`	`+ @apply text-secondary underline;`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.routerLinkActive {`
`2`		`- @apply bg-gray-500 text-black;`
	`2`	`+ @apply text-secondary underline;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.sidebarActive {`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ export const routeMeta: RouteMeta = {`
`34`	`34`	`class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"`
`35`	`35`	`>`
`36`	`36`	`<p-dropdown`
	`37`	`+ ariaLabel="Select a country"`
`37`	`38`	`name="language"`
`38`	`39`	`[options]="countries()"`
`39`	`40`	`[style]="{ width: '230px' }"`