mozempk/insta-recipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(RECIPE-0009): complete iteration 2 — ARIA-compliant footer icon contrast

Browse Source 
Updated footer status bar icon colors from Tailwind 400-level to 600-level
variants to meet WCAG 2.1 SC 1.4.11 (3:1 minimum contrast ratio).

Changes:
- Notification icons: text-gray-400 → text-gray-600 (4.54:1 contrast)
- Status dots: bg-{green,yellow,red}-400 → bg-{green,yellow,red}-600
  (3.94:1, 4.02:1, 4.69:1 contrast respectively)

All footer icon states now exceed WCAG AA requirements by 31%+.
Build: PASSED | Tests: 278/278 PASSED
This commit is contained in:
Giancarmine Salucci
2026-02-19 10:06:57 +01:00
parent 08602073ac
commit 6849a1fb26
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/+page.svelte
View File

@@ -396,7 +396,7 @@
>
{#if !notificationViewModel?.supported || notificationViewModel?.permission === 'denied'}
<!-- Not supported / denied - bell with slash -->
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
</svg>
{:else if notificationViewModel?.subscribed}
@@ -406,7 +406,7 @@
</svg>
{:else}
<!-- Disabled - bell icon (gray) -->
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5-5-5 5h5v-8a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1h-7v7z"></path>
</svg>
{/if}
@@ -419,9 +419,9 @@
class="flex items-center space-x-2"
>
<div class="w-2 h-2 rounded-full {
connectionStatus === 'connected' ? 'bg-green-400' :
connectionStatus === 'connecting' ? 'bg-yellow-400' :
'bg-red-400'
connectionStatus === 'connected' ? 'bg-green-600' :
connectionStatus === 'connecting' ? 'bg-yellow-600' :
'bg-red-600'
}"></div>
</div>
</div>