Skip to content

Commit 64a88f1

Browse files
alexanderopalexanderop
authored
Merge pull request #18 from alexanderop/accessibility-improvements
Accessibility improvements
2 parents 8eeb10b + ce7fae9 commit 64a88f1

30 files changed

Lines changed: 330 additions & 65 deletions

‎app.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ useHead({
4242

4343
<template>
4444
<div>
45+
<NuxtRouteAnnouncer />
46+
4547
<NuxtLayout>
4648
<NuxtPage :transition="transition" />
4749
</NuxtLayout>

‎components/BaseButton.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ function handleClick(event: MouseEvent) {
108108
$slots.default && 'mr-2',
109109
]"
110110
/>
111+
111112
<Icon
112113
v-else-if="icon && iconPosition === 'left'"
113114
:name="icon"
@@ -116,7 +117,9 @@ function handleClick(event: MouseEvent) {
116117
$slots.default && 'mr-2',
117118
]"
118119
/>
120+
119121
<slot />
122+
120123
<Icon
121124
v-if="!loading && icon && iconPosition === 'right'"
122125
:name="icon"

‎components/BaseSocials.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ const {
1010
</script>
1111

1212
<template>
13-
<div class="flex-wrap gap-1 justify-center" :class="[{ flex: centered }]">
13+
<div
14+
class="flex-wrap gap-1 justify-center"
15+
:class="[{ flex: centered }]"
16+
>
1417
<BaseLink
1518
v-for="social in SOCIALS"
1619
:key="social.name"
@@ -22,6 +25,7 @@ const {
2225
:name="social.icon"
2326
class="opacity-90 size-6 inline-block scale-125 fill-transparent stroke-2 stroke-current sm:scale-110 group-hover:fill-transparent"
2427
/>
28+
2529
<span class="sr-only">{{ social.linkTitle }}</span>
2630
</BaseLink>
2731
<!-- RSS Feed Link -->
@@ -34,6 +38,7 @@ const {
3438
name="mdi:rss"
3539
class="opacity-90 size-6 inline-block scale-125 fill-transparent stroke-2 stroke-current sm:scale-110 group-hover:fill-transparent"
3640
/>
41+
3742
<span class="sr-only">Subscribe to RSS Feed</span>
3843
</BaseLink>
3944
</div>

‎components/BaseTags.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const moreCount = computed(() => tags.length - (limit || 0))
3232
:variant="variant"
3333
:clickable="clickable"
3434
/>
35+
3536
<span
3637
v-if="hasMore"
3738
class="text-sm text-[var(--color-text-muted)]"

‎components/BlogPosts.vue‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,10 @@ const displayPosts = computed(() => {
6969
</script>
7070

7171
<template>
72-
<div v-if="displayPosts && displayPosts.length > 0" class="my-8">
72+
<div
73+
v-if="displayPosts && displayPosts.length > 0"
74+
class="my-8"
75+
>
7376
<div class="space-y-4">
7477
<article
7578
v-for="(post, index) in displayPosts"
@@ -82,31 +85,51 @@ const displayPosts = computed(() => {
8285
<h3 class="text-lg leading-tight flex-1">
8386
<NuxtLink
8487
:href="`${post.path}`"
85-
class="text-[var(--color-text)] dark:text-[var(--color-primary)] hover:text-[var(--color-primary)]" :class="[transitionClasses]"
88+
class="text-[var(--color-text)] dark:text-[var(--color-primary)] hover:text-[var(--color-primary)]"
89+
:class="[transitionClasses]"
8690
>
8791
{{ post.title }}
8892
</NuxtLink>
8993
</h3>
9094

9195
<!-- Date -->
92-
<div v-if="showDate && post.date" class="text-sm text-[var(--color-text-muted)] whitespace-nowrap">
93-
{{ new Date(post.date).toLocaleDateString() }}
94-
</div>
96+
<NuxtTime
97+
v-if="showDate && post.date"
98+
:datetime="post.date"
99+
month="2-digit"
100+
day="2-digit"
101+
year="numeric"
102+
class="text-sm text-[var(--color-text-muted)] whitespace-nowrap"
103+
/>
95104
</div>
96105

97106
<!-- Excerpt -->
98-
<p v-if="showExcerpt && post.description" class="text-[var(--color-text-muted)] leading-relaxed mt-2">
107+
<p
108+
v-if="showExcerpt && post.description"
109+
class="text-[var(--color-text-muted)] leading-relaxed mt-2"
110+
>
99111
{{ post.description }}
100112
</p>
101113

102114
<!-- Tags -->
103-
<div v-if="showTags && post.tags && post.tags.length > 0" class="mt-3">
104-
<BaseTags :tags="post.tags" variant="small" :limit="3" />
115+
<div
116+
v-if="showTags && post.tags && post.tags.length > 0"
117+
class="mt-3"
118+
>
119+
<BaseTags
120+
:tags="post.tags"
121+
variant="small"
122+
:limit="3"
123+
/>
105124
</div>
106125
</article>
107126
</div>
108127
</div>
109-
<div v-else class="text-[var(--color-text-muted)] py-8 text-center">
128+
129+
<div
130+
v-else
131+
class="text-[var(--color-text-muted)] py-8 text-center"
132+
>
110133
No {{ type }} posts found.
111134
</div>
112135
</template>

‎components/Breadcrumbs.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,16 @@ useBreadcrumbStructuredData(items)
1212
</script>
1313

1414
<template>
15-
<nav aria-label="Breadcrumb navigation" class="breadcrumbs">
15+
<nav
16+
aria-label="Breadcrumb navigation"
17+
class="breadcrumbs"
18+
>
1619
<ul class="text-sm flex flex-wrap gap-2 items-center">
17-
<li v-for="(item, index) in items" :key="index" class="flex gap-2 items-center">
20+
<li
21+
v-for="(item, index) in items"
22+
:key="index"
23+
class="flex gap-2 items-center"
24+
>
1825
<template v-if="item.url">
1926
<NuxtLink
2027
:to="item.url"
@@ -23,6 +30,7 @@ useBreadcrumbStructuredData(items)
2330
{{ item.name }}
2431
</NuxtLink>
2532
</template>
33+
2634
<template v-else>
2735
<span class="text-[var(--color-text)]">
2836
{{ item.name }}

‎components/CodeBlock.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,17 @@ const languageDisplay = computed(() => {
3939
<div class="px-4 py-2 border-b border-border bg-surface-base flex items-center justify-between">
4040
<div class="flex gap-2 items-center">
4141
<!-- Language label -->
42-
<span v-if="language" class="text-xs text-text-muted font-medium">
42+
<span
43+
v-if="language"
44+
class="text-xs text-text-muted font-medium"
45+
>
4346
{{ languageDisplay }}
4447
</span>
4548
<!-- Filename -->
46-
<span v-if="filename" class="text-xs text-text-muted">
49+
<span
50+
v-if="filename"
51+
class="text-xs text-text-muted"
52+
>
4753
{{ filename }}
4854
</span>
4955
</div>
@@ -60,6 +66,7 @@ const languageDisplay = computed(() => {
6066
:name="copied ? 'mdi:check' : 'mdi:content-copy'"
6167
class="h-3.5 w-3.5"
6268
/>
69+
6370
<span>{{ copied ? 'Copied!' : 'Copy' }}</span>
6471
</button>
6572
</div>

‎components/CommandPalette.vue‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ onKeyStroke(['ArrowDown', 'ArrowUp', 'Enter', 'Escape'], (e) => {
7373
<template>
7474
<div
7575
ref="containerRef"
76-
class="border border-[var(--color-border)] rounded-lg bg-[var(--color-background)] flex flex-col h-[500px] max-h-[70vh] shadow-2xl relative" :class="[
76+
class="border border-[var(--color-border)] rounded-lg bg-[var(--color-background)] flex flex-col h-[500px] max-h-[70vh] shadow-2xl relative"
77+
:class="[
7778
containerClass,
7879
]"
7980
role="combobox"
@@ -92,12 +93,16 @@ onKeyStroke(['ArrowDown', 'ArrowUp', 'Enter', 'Escape'], (e) => {
9293
</div>
9394

9495
<!-- Results Container - Scrollable area -->
95-
<div id="command-results" class="flex-1 min-h-0 overflow-y-auto">
96+
<div
97+
id="command-results"
98+
class="flex-1 min-h-0 overflow-y-auto"
99+
>
96100
<!-- Results -->
97101
<template v-if="searchResults.length > 0">
98102
<div class="text-xs text-[var(--color-text-muted)] tracking-wider px-4 py-2 bg-[var(--color-background)] uppercase top-0 sticky">
99103
Posts
100104
</div>
105+
101106
<CommandPaletteResults
102107
:results="searchResults"
103108
:selected-index="selectedIndex"
@@ -110,19 +115,31 @@ onKeyStroke(['ArrowDown', 'ArrowUp', 'Enter', 'Escape'], (e) => {
110115
</template>
111116

112117
<!-- Empty state placeholder to maintain height -->
113-
<div v-else class="flex h-full items-center justify-center">
118+
<div
119+
v-else
120+
class="flex h-full items-center justify-center"
121+
>
114122
<!-- No results -->
115-
<div v-if="query && searchResults.length === 0 && !searchLoading" class="text-[var(--color-text-muted)] px-4 py-8 text-center">
123+
<div
124+
v-if="query && searchResults.length === 0 && !searchLoading"
125+
class="text-[var(--color-text-muted)] px-4 py-8 text-center"
126+
>
116127
No results found for "{{ query }}"
117128
</div>
118129

119130
<!-- Loading state -->
120-
<div v-else-if="searchLoading" class="text-[var(--color-text-muted)] px-4 py-8 text-center">
131+
<div
132+
v-else-if="searchLoading"
133+
class="text-[var(--color-text-muted)] px-4 py-8 text-center"
134+
>
121135
Searching...
122136
</div>
123137

124138
<!-- Initial state -->
125-
<div v-else class="text-[var(--color-text-muted)] px-4 py-8 text-center">
139+
<div
140+
v-else
141+
class="text-[var(--color-text-muted)] px-4 py-8 text-center"
142+
>
126143
Start typing to search...
127144
</div>
128145
</div>

‎components/CommandPaletteInput.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ onMounted(() => {
1717
name="i-heroicons-magnifying-glass"
1818
class="text-[var(--color-text-muted)] ml-4 h-5 w-5"
1919
/>
20+
2021
<input
2122
ref="inputRef"
2223
v-model="model"
@@ -25,12 +26,16 @@ onMounted(() => {
2526
aria-label="Search"
2627
class="text-[var(--color-text)] px-4 py-4 bg-transparent flex-1 placeholder:text-[var(--color-text-muted)] focus:outline-none"
2728
>
29+
2830
<button
2931
type="button"
3032
class="text-[var(--color-text-muted)] p-4 transition-colors hover:text-[var(--color-text)]"
3133
@click="$emit('close')"
3234
>
33-
<Icon name="i-heroicons-x-mark" class="h-5 w-5" />
35+
<Icon
36+
name="i-heroicons-x-mark"
37+
class="h-5 w-5"
38+
/>
3439
</button>
3540
</div>
3641
</template>

‎components/SearchButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ defineEmits<{
1111
@click="$emit('click')"
1212
>
1313
<span class="tracking-wider">Search</span>
14+
1415
<BaseKbd shortcut="cmd-k" />
1516
</button>
1617
</template>

0 commit comments

Comments
 (0)