giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix(a11y): fix WCAG AA contrast and WCAG 2.5.3 failures from third report

Browse Source 
- css/tailwind.css: upgrade nav/mobile-nav/theme-toggle text from
  surface-600 (fails 4.5:1) to surface-700 across .site-nav, .nav-dropdown-menu,
  .menu-toggle, .mobile-nav, .mobile-nav-toggle, .theme-toggle, .mobile-theme-toggle
- post.njk: fix AI disclosure details and 'Also on:' span to surface-700
- webmentions.njk: fix summary to surface-700; fix Send button from
  bg-accent-600 (3.18:1) to bg-accent-700 (4.95:1)
- h-card.njk: fix p-adr address and PGP key link to surface-700
- base.njk: fix mobile theme toggle aria-label per WCAG 2.5.3
- post-categories.njk: fix category pills text-accent-700 to text-accent-800
- post-navigation.njk: fix no-OG fallback Previous/Next labels to surface-700

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
2026-03-14 16:13:06 +01:00
parent 856792ebbe
commit 7f4e8c93e2
7 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/tailwind.css
View File

@@ -168,7 +168,7 @@
.site-nav > a,
.site-nav .nav-dropdown-trigger {
@apply text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors py-2;
@apply text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors py-2;
}
/* Navigation dropdown */
@@ -187,7 +187,7 @@
}
.nav-dropdown-menu a {
@apply block px-4 py-2.5 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-surface-900 dark:hover:text-surface-100 no-underline;
@apply block px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-surface-900 dark:hover:text-surface-100 no-underline;
}
.nav-dropdown-divider {
@@ -196,7 +196,7 @@
/* Mobile menu toggle button */
.menu-toggle {
@apply md:hidden p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
@apply md:hidden p-2 rounded-lg text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
}
/* Mobile navigation dropdown */
@@ -207,7 +207,7 @@
}
.mobile-nav a {
@apply block px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors border-b border-surface-100 dark:border-surface-800 last:border-b-0;
@apply block px-4 py-3 text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors border-b border-surface-100 dark:border-surface-800 last:border-b-0;
}
/* Mobile nav collapsible sections */
@@ -216,7 +216,7 @@
}
.mobile-nav-toggle {
@apply flex items-center justify-between w-full px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer;
@apply flex items-center justify-between w-full px-4 py-3 text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer;
}
.mobile-nav-submenu {
@@ -233,7 +233,7 @@
/* Theme toggle button */
.theme-toggle {
@apply p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
@apply p-2 rounded-lg text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
}
.theme-toggle .sun-icon {
@@ -254,7 +254,7 @@
/* Mobile theme toggle */
.mobile-theme-toggle {
@apply flex items-center justify-between w-full px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer border-t border-surface-200 dark:border-surface-700;
@apply flex items-center justify-between w-full px-4 py-3 text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer border-t border-surface-200 dark:border-surface-700;
}
.mobile-theme-toggle .theme-label {