svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

a11y: comprehensive WCAG 2.1 Level AA accessibility audit

Browse Source 
- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
  for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 18:58:08 +01:00
parent db75bd05ea
commit e236b4bf65
77 changed files with 638 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
blogroll.njk
View File

@@ -14,17 +14,19 @@ permalink: /blogroll/
<p class="text-surface-600 dark:text-surface-400">
Blogs I follow - <span x-text="blogs.length" class="font-medium"></span> feeds
</p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.lastSync">
<p class="text-xs text-surface-600 dark:text-surface-400 mt-2" x-show="status?.lastSync">
Last synced: <span class="font-mono" x-text="formatDate(status?.lastSync, 'full')"></span>
</p>
</header>
{# Tab Navigation - All Blogs first, then one tab per category #}
<div class="mb-6 border-b border-surface-200 dark:border-surface-700">
<nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs">
<nav class="flex gap-1 overflow-x-auto -mb-px" role="tablist" aria-label="Blogroll categories">
<button
@click="switchTab('blogs')"
:class="activeTab === 'blogs' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'blogs' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
:aria-selected="(activeTab === 'blogs').toString()"
role="tab" id="blogroll-tab-blogs" aria-controls="blogroll-panel-blogs"
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
>
All Blogs
@@ -32,7 +34,9 @@ permalink: /blogroll/
<template x-for="cat in categories" :key="cat.name">
<button
@click="switchTab('category:' + cat.name)"
:class="activeTab === 'category:' + cat.name ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'category:' + cat.name ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
:aria-selected="(activeTab === 'category:' + cat.name).toString()"
role="tab" :id="'blogroll-tab-' + cat.name.toLowerCase().replace(/\s+/g, '-')" :aria-controls="'blogroll-panel-' + cat.name.toLowerCase().replace(/\s+/g, '-')"
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
>
<span x-text="cat.name"></span>
@@ -46,8 +50,8 @@ permalink: /blogroll/
{# Main Content #}
<div class="main-content">
{# Loading State #}
<div x-show="loading" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<div x-show="loading" class="text-center py-12" role="status">
<svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24" aria-hidden="true">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -55,13 +59,13 @@ permalink: /blogroll/
</div>
{# Error State #}
<div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
<div x-show="error" role="alert" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
<p class="text-red-700 dark:text-red-400" x-text="error"></p>
<button @click="fetchData()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
</div>
{# All Blogs Tab #}
<div x-show="activeTab === 'blogs' && !loading" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div x-show="activeTab === 'blogs' && !loading" role="tabpanel" id="blogroll-panel-blogs" aria-labelledby="blogroll-tab-blogs" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<template x-for="blog in blogs" :key="blog.id">
<a
:href="blog.siteUrl || blog.feedUrl"
@@ -71,16 +75,16 @@ permalink: /blogroll/
>
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
<img x-show="blog.photo" :src="blog.photo" class="w-10 h-10 object-cover" loading="lazy" />
<img x-show="blog.photo" :src="blog.photo" :alt="blog.title" class="w-10 h-10 object-cover" loading="lazy" />
<span x-show="!blog.photo" class="text-white text-sm font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
</div>
<div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors" x-text="blog.title"></h3>
<p x-show="blog.category" class="text-xs text-surface-500 truncate" x-text="blog.category"></p>
<p x-show="blog.category" class="text-xs text-surface-600 dark:text-surface-400 truncate" x-text="blog.category"></p>
</div>
</div>
<p x-show="blog.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-2 mb-3" x-text="blog.description"></p>
<div class="flex items-center gap-3 text-xs text-surface-500">
<div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400">
<span x-text="`${blog.itemCount || 0} posts`"></span>
<span :class="blog.status === 'active' ? 'text-green-500' : 'text-red-500'">
<span x-show="blog.status === 'active'" class="flex items-center gap-1">
@@ -99,15 +103,15 @@ permalink: /blogroll/
{# Empty State for Blogs #}
<div x-show="!loading && blogs.length === 0 && activeTab === 'blogs' && !error" class="text-center py-12">
<svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
<p class="text-surface-600 dark:text-surface-400 text-lg">No blogs yet.</p>
<p class="text-surface-500 text-sm mt-2">Add blogs via the admin dashboard.</p>
<p class="text-surface-600 dark:text-surface-400 text-sm mt-2">Add blogs via the admin dashboard.</p>
</div>
{# Category Items Tab (one for each category) #}
<div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
<div x-show="activeTab.startsWith('category:') && !loading" role="tabpanel" :id="'blogroll-panel-' + activeTab.replace('category:', '').toLowerCase().replace(/\s+/g, '-')" :aria-labelledby="'blogroll-tab-' + activeTab.replace('category:', '').toLowerCase().replace(/\s+/g, '-')" class="space-y-4">
<template x-for="item in categoryItems" :key="item.id">
<article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors shadow-sm">
<div class="flex items-start gap-4">
@@ -126,7 +130,7 @@ permalink: /blogroll/
Upcoming
</span>
</div>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500 mb-3">
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-600 dark:text-surface-400 mb-3">
<a
:href="item.blog?.siteUrl || '#'"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
@@ -167,7 +171,7 @@ permalink: /blogroll/
<a
x-show="item.blog?.siteUrl"
:href="item.blog?.siteUrl"
class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
class="inline-flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300"
target="_blank"
rel="noopener"
>
@@ -221,11 +225,11 @@ permalink: /blogroll/
{# Empty State for Category Items #}
<div x-show="categoryItems.length === 0 && !error" class="text-center py-12">
<svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
</svg>
<p class="text-surface-600 dark:text-surface-400 text-lg">No posts in this category yet.</p>
<p class="text-surface-500 text-sm mt-2">Posts will appear once blogs are synced.</p>
<p class="text-surface-600 dark:text-surface-400 text-sm mt-2">Posts will appear once blogs are synced.</p>
</div>
</div>
</div>
@@ -256,11 +260,11 @@ permalink: /blogroll/
<div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.blogs?.count || 0"></span>
<span class="text-xs text-surface-500 uppercase">Blogs</span>
<span class="text-xs text-surface-600 dark:text-surface-400 uppercase">Blogs</span>
</div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.items?.count || 0"></span>
<span class="text-xs text-surface-500 uppercase">Posts</span>
<span class="text-xs text-surface-600 dark:text-surface-400 uppercase">Posts</span>
</div>
</div>
</div>
@@ -283,7 +287,7 @@ permalink: /blogroll/
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
>
<span x-text="cat.name"></span>
<span class="text-surface-500" x-text="`(${cat.count})`"></span>
<span class="text-surface-600 dark:text-surface-400" x-text="`(${cat.count})`"></span>
</button>
</li>
</template>