From 2687f673fee7d3939a5a217cf3eb7af557d12a14 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:40:37 +0100
Subject: [PATCH] auto-claude: subtask-2-1 - Add accessibility attributes to
 skeleton loading

Added aria-label and aria-busy attributes to SkillsSkeleton component for
better screen reader support. This ensures assistive technologies properly
announce the loading state to users.

Also updated .gitignore to exclude .auto-claude/ directory.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .gitignore                         | 5 ++++-
 src/components/sections/Skills.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index a484ab2..fa65296 100644
--- a/.gitignore
+++ b/.gitignore
@@ -81,4 +81,7 @@ supabase/.temp/
 .history/
 
 # Source images (originals before optimization)
-source-images/
\ No newline at end of file
+source-images/
+
+# Auto Claude data directory
+.auto-claude/
diff --git a/src/components/sections/Skills.tsx b/src/components/sections/Skills.tsx
index 3320a95..549a244 100644
--- a/src/components/sections/Skills.tsx
+++ b/src/components/sections/Skills.tsx
@@ -20,7 +20,7 @@ const Skeleton: React.FC<SkeletonProps> = ({ className }) => (
 );
 
 const SkillsSkeleton = () => (
-  <section id="skills" className="py-24 relative">
+  <section id="skills" className="py-24 relative" aria-label="Loading skills" aria-busy="true">
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <Skeleton className="h-8 w-48 mb-12" />
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">