Skip to content

Commit b8b4da0

Browse files
geromegrignongeromegrignon
committed
feat: improve accessibility
1 parent a882ef7 commit b8b4da0

12 files changed

+58
-25
lines changed

‎angular-hub/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@
2323
as="font"
2424
crossorigin
2525
/>
26+
<link
27+
rel="preload"
28+
href="/assets/fonts/Luciole-Regular.ttf"
29+
as="font"
30+
crossorigin
31+
/>
2632
<script type="application/ld+json"></script>
2733
</head>
2834
<body>

‎angular-hub/src/app/components/cards/community-card.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { Community } from '../../../models/community.model';
4848
4949
&:hover {
5050
h3 {
51-
color: theme('colors.secondary');
51+
@apply text-secondary underline;
5252
}
5353
}
5454
}

‎angular-hub/src/app/components/cards/event-card.component.ts

+21-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
computed,
5+
input,
6+
} from '@angular/core';
27
import { Event } from '../../../models/event.model';
38
import { DatePipe, NgOptimizedImage } from '@angular/common';
49
import { TagComponent } from '../tag.component';
@@ -11,12 +16,14 @@ import { TagComponent } from '../tag.component';
1116
<article>
1217
<a
1318
[href]="event().url ?? '#'"
19+
[title]="eventLinkTitle()"
1420
target="_blank"
1521
class="flex w-full items-start gap-4"
1622
>
1723
<img
1824
class="rounded-xl"
1925
[src]="event().community?.logo"
26+
aria-hidden="true"
2027
height="100"
2128
width="100"
2229
alt=""
@@ -26,16 +33,15 @@ import { TagComponent } from '../tag.component';
2633
<span class="font-bold text-primary" itemprop="date">{{
2734
event().date
2835
}}</span>
29-
<h3
30-
[attr.id]="event().name"
31-
class="text-xl font-bold"
32-
itemprop="title"
33-
>
36+
<h3 class="text-xl font-bold">
3437
{{ event().name || event().community?.name }}
3538
</h3>
36-
<span class="text-gray-500 dark:text-gray-400" itemprop="location">{{
37-
event().location
38-
}}</span>
39+
<div
40+
class="text-gray-500 dark:text-gray-400 min-h-4"
41+
itemprop="location"
42+
>
43+
{{ event().location }}
44+
</div>
3945
<ul class="flex flex-wrap gap-2">
4046
<li class="inline">
4147
<app-tag [title]="event().language" />
@@ -52,7 +58,7 @@ import { TagComponent } from '../tag.component';
5258
}
5359
@if (event().isOnsite) {
5460
<li class="inline">
55-
<app-tag [title]="'Onsite'" color="#963232" />
61+
<app-tag [title]="'Onsite'" color="#ae6b09" />
5662
</li>
5763
}
5864
</ul>
@@ -70,7 +76,7 @@ import { TagComponent } from '../tag.component';
7076
7177
&:hover {
7278
h3 {
73-
color: theme('colors.secondary');
79+
@apply text-secondary underline;
7480
}
7581
}
7682
}
@@ -79,4 +85,8 @@ import { TagComponent } from '../tag.component';
7985
})
8086
export class EventCardComponent {
8187
event = input.required<Event>();
88+
89+
eventLinkTitle = computed(() => {
90+
return (this.event().name || this.event().community?.name) + 'event link';
91+
});
8292
}

‎angular-hub/src/app/components/cards/podcast-card.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import { TagComponent } from '../tag.component';
4444
4545
&:hover {
4646
h3 {
47-
color: theme('colors.secondary');
47+
@apply text-secondary underline;
4848
}
4949
}
5050
}

‎angular-hub/src/app/components/navigation/navigation.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<header class="flex items-center p-4">
22
<p-button
3+
aria-label="Open sidebar menu"
34
class="flex-none lg:hidden"
45
(click)="sidebarVisible = true"
56
[text]="true"
@@ -17,7 +18,7 @@
1718
<!-- Navbar menu content here -->
1819
<li>
1920
<a
20-
class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
21+
class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
2122
routerLinkActive="routerLinkActive"
2223
[routerLinkActiveOptions]="{ exact: true }"
2324
routerLink="/"
@@ -26,23 +27,23 @@
2627
</li>
2728
<li>
2829
<a
29-
class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
30+
class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
3031
routerLinkActive="routerLinkActive"
3132
routerLink="/communities"
3233
>Communities</a
3334
>
3435
</li>
3536
<li>
3637
<a
37-
class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
38+
class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
3839
routerLinkActive="routerLinkActive"
3940
routerLink="/podcasts"
4041
>Podcasts</a
4142
>
4243
</li>
4344
<li>
4445
<a
45-
class="p-button p-button-secondary p-button-text hover:bg-gray-500 py-1"
46+
class="p-button p-button-secondary p-button-text outline-none hover:text-secondary hover:underline underline-offset-8"
4647
routerLinkActive="routerLinkActive"
4748
routerLink="/callforpapers"
4849
>Call for papers</a

‎angular-hub/src/app/components/navigation/navigation.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.routerLinkActive {
2-
@apply bg-gray-500 text-black;
2+
@apply text-secondary underline;
33
}
44

55
.sidebarActive {

‎angular-hub/src/app/components/tag.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
66
changeDetection: ChangeDetectionStrategy.OnPush,
77
template: `
88
<div
9-
class="inline-block px-2 text-sm font-semibold rounded-md text-white"
9+
class="inline-block px-2 text-sm leading-6 font-semibold rounded-md text-black"
1010
[style.background]="color()"
1111
>
1212
{{ title() }}
@@ -15,5 +15,5 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
1515
})
1616
export class TagComponent {
1717
title = input.required<string>();
18-
color = input<string>('#963296');
18+
color = input<string>('#9051ff');
1919
}

‎angular-hub/src/app/pages/communities/index.page.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const routeMeta: RouteMeta = {
3434
class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"
3535
>
3636
<p-dropdown
37+
ariaLabel="Select a country"
3738
name="language"
3839
[options]="countries()"
3940
[style]="{ width: '230px' }"

‎angular-hub/src/app/pages/index.page.ts

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const routeMeta: RouteMeta = {
3939
class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"
4040
>
4141
<p-calendar
42+
ariaLabel="Select a date"
4243
name="date"
4344
[style]="{ width: '230px' }"
4445
[ngModel]="date()"
@@ -47,6 +48,7 @@ export const routeMeta: RouteMeta = {
4748
[showClear]="true"
4849
/>
4950
<p-dropdown
51+
ariaLabel="Select a language"
5052
name="language"
5153
[style]="{ width: '230px' }"
5254
[options]="languages()"
@@ -57,6 +59,7 @@ export const routeMeta: RouteMeta = {
5759
/>
5860
<div class="flex items-center gap-2">
5961
<p-inputSwitch
62+
ariaLabel="Display remote events only"
6063
id="remote"
6164
name="remote"
6265
[ngModel]="isRemote()"

‎angular-hub/src/public/assets/fonts/Luciole-Regular.ttf

164 KB
Binary file not shown.

‎angular-hub/src/styles.scss

+14-2
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,31 @@
1616
font-display: swap;
1717
}
1818

19+
@font-face {
20+
font-family: 'Luciole';
21+
src: local('Trebutchet MS'), url('/assets/fonts/Luciole-Regular.ttf');
22+
font-display: swap;
23+
}
24+
1925
/* You can add global styles to this file, and also import other style files */
2026
:root {
21-
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
27+
font-family: Luciole, sans-serif;
2228
}
2329

2430
body {
2531
margin: 0;
2632
display: flex;
2733
min-height: 100vh;
34+
font-family: Luciole, sans-serif;
35+
line-height: 1.5;
2836
}
2937

3038
.logo {
3139
@apply box-content;
3240
}
3341

3442
.title {
35-
font-family: 'Pixelify', 'sans-serif';
43+
font-family: Pixelify, 'sans-serif';
3644
background-image: linear-gradient(
3745
to right,
3846
#bf25b9,
@@ -47,6 +55,10 @@ body {
4755
-webkit-text-fill-color: transparent;
4856
}
4957

58+
.p-button {
59+
font-family: Luciole, 'sans-serif';
60+
}
61+
5062
@media (prefers-reduced-motion) {
5163
::view-transition-group(*),
5264
::view-transition-old(*),

‎angular-hub/tailwind.config.cjs

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ module.exports = {
1010
theme: {
1111
extend: {
1212
colors: {
13-
primary: '#BF25B9',
13+
primary: '#ff56f8',
1414
secondary: '#00bee0',
1515
},
1616
backgroundColor: {
17-
primary: '#BF25B9',
17+
primary: '#ff56f8',
1818
secondary: '#00bee0',
1919
},
2020
borderColor: {
21-
primary: '#BF25B9',
21+
primary: '#ff56f8',
2222
secondary: '#00bee0',
2323
},
2424
},

0 commit comments

Comments
 (0)