From ffe5d814fc582770dde207219e56d600f61958d8 Mon Sep 17 00:00:00 2001
From: Al-Ghani Desta Setyawan <kou.real@outlook.com>
Date: Wed, 24 Dec 2025 15:06:42 +0800
Subject: [PATCH] Enhance accessibility features across the application

- Added skip link to main content in App component for better navigation
- Implemented focus trap in ContributorModal and CreationStudio components to manage keyboard navigation
- Added aria-labels and titles to various elements for improved screen reader support
- Updated Footer and Navbar components with appropriate aria-labels for social media links and menu buttons
- Improved Info page with aria-expanded attribute for FAQ buttons
- Introduced .hintrc file for accessibility linting configuration
---
 .hintrc                             | 13 +++++++
 App.tsx                             |  5 ++-
 components/ContributorModal.tsx     | 52 +++++++++++++++++++++++++--
 components/CreationStudio/index.tsx | 56 +++++++++++++++++++++++++++--
 components/Footer.tsx               |  4 +--
 components/Navbar.tsx               |  3 +-
 pages/Info.tsx                      |  4 +--
 7 files changed, 126 insertions(+), 11 deletions(-)
 create mode 100644 .hintrc

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..e099e67
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": [
+      "default",
+      {
+        "aria-valid-attr-value": "off"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/App.tsx b/App.tsx
index 7d480d3..0c7831e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -77,6 +77,9 @@ export default function App() {
     <ErrorBoundary>
       <Router>
         <ScrollToTop />
+        <a href="#main-content" className="sr-only focus:not-sr-only absolute top-4 left-4 z-[100] bg-white text-black px-4 py-2 rounded-md font-bold shadow-lg">
+          Langsung ke konten utama
+        </a>
         <div className="min-h-screen bg-[#030303] text-white selection:bg-rose-500/30 font-sans overflow-x-hidden flex flex-col relative">
           <div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
             <div className="absolute inset-0 opacity-[0.02]" style={{ backgroundImage: `url("https://grainy-gradients.vercel.app/noise.svg")`, backgroundSize: '100px 100px' }}></div>
@@ -87,7 +90,7 @@ export default function App() {
 
           <div className="relative z-10 flex flex-col min-h-screen">
             <Navbar />
-            <main className="flex-grow container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
+            <main id="main-content" className="flex-grow container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
               <AnimatedRoutes />
             </main>
             <Footer />
diff --git a/components/ContributorModal.tsx b/components/ContributorModal.tsx
index 4ddc413..892e52e 100644
--- a/components/ContributorModal.tsx
+++ b/components/ContributorModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Download, ExternalLink, X, Sparkles, Wand2, Heart, Palette } from 'lucide-react';
 import html2canvas from 'html2canvas';
@@ -36,6 +36,50 @@ export const ContributorModal: React.FC<ContributorDetailProps> = ({
     isOwner,
 }) => {
     const modalRef = useRef<HTMLDivElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus Trap
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+                return;
+            }
+
+            if (e.key === 'Tab') {
+                const focusableElements = modalRef.current?.parentElement?.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                
+                if (!focusableElements || focusableElements.length === 0) return;
+
+                const firstElement = focusableElements[0] as HTMLElement;
+                const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        e.preventDefault();
+                        lastElement.focus();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        e.preventDefault();
+                        firstElement.focus();
+                    }
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        // Focus the close button initially or the modal itself
+        setTimeout(() => closeButtonRef.current?.focus(), 100);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
 
     const handleDownload = async () => {
         if (!modalRef.current) return;
@@ -71,7 +115,7 @@ export const ContributorModal: React.FC<ContributorDetailProps> = ({
 
     return (
         <AnimatePresence>
-            <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 overflow-hidden" style={{ paddingTop: 'max(1rem, env(safe-area-inset-top))' }}>
+            <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 overflow-hidden pt-[max(1rem,env(safe-area-inset-top))]">
                 {/* Backdrop with blur */}
                 <motion.div
                     initial={{ opacity: 0 }}
@@ -88,8 +132,10 @@ export const ContributorModal: React.FC<ContributorDetailProps> = ({
                 >
                     {/* Close Button */}
                     <button
+                        ref={closeButtonRef}
                         onClick={onClose}
                         className="absolute top-6 right-6 z-30 p-2 bg-white/5 hover:bg-white/20 text-white rounded-full transition-all backdrop-blur-md"
+                        aria-label="Tutup detail kontributor"
                     >
                         <X size={20} />
                     </button>
@@ -161,6 +207,8 @@ export const ContributorModal: React.FC<ContributorDetailProps> = ({
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         className="p-3 rounded-full bg-white/5 text-white hover:bg-white hover:text-black transition-all duration-300"
+                                        title="Lihat profil GitHub"
+                                        aria-label="Lihat profil GitHub"
                                     >
                                         <ExternalLink size={18} />
                                     </a>
diff --git a/components/CreationStudio/index.tsx b/components/CreationStudio/index.tsx
index fb06e0d..f734b22 100644
--- a/components/CreationStudio/index.tsx
+++ b/components/CreationStudio/index.tsx
@@ -54,6 +54,51 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
 
     // Refs
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus Trap
+    React.useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+                return;
+            }
+
+            if (e.key === 'Tab') {
+                const focusableElements = modalRef.current?.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                
+                if (!focusableElements || focusableElements.length === 0) return;
+
+                const firstElement = focusableElements[0] as HTMLElement;
+                const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        e.preventDefault();
+                        lastElement.focus();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        e.preventDefault();
+                        firstElement.focus();
+                    }
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        // Focus the close button initially
+        setTimeout(() => closeButtonRef.current?.focus(), 100);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
 
     const handleMediumSelect = (m: Medium) => {
         setMedium(m);
@@ -120,6 +165,7 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
                     />
 
                     <motion.div
+                        ref={modalRef}
                         initial={{ opacity: 0, scale: 0.95 }}
                         animate={{ opacity: 1, scale: 1 }}
                         exit={{ opacity: 0, scale: 0.95 }}
@@ -129,7 +175,7 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
                         <div className="flex items-center justify-between p-6 border-b border-white/5 bg-black/50 backdrop-blur-md z-10">
                             <div className="flex items-center gap-4">
                                 {step !== 'selection' && (
-                                    <button onClick={() => setStep(step === 'details' ? 'editor' : 'selection')} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+                                    <button onClick={() => setStep(step === 'details' ? 'editor' : 'selection')} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white" aria-label="Kembali">
                                         <ArrowLeft size={20} />
                                     </button>
                                 )}
@@ -164,7 +210,7 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
                                 </div>
                             )}
 
-                            <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+                            <button ref={closeButtonRef} onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white" aria-label="Tutup Creation Studio">
                                 <X size={20} />
                             </button>
                         </div>
@@ -259,6 +305,7 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
                                                             onChange={handleImageUpload}
                                                             accept="image/*"
                                                             className="hidden"
+                                                            title="Upload Image"
                                                         />
                                                     </div>
                                                 )}
@@ -302,6 +349,7 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
                                                         onChange={handleImageUpload}
                                                         accept="video/*"
                                                         className="hidden"
+                                                        title="Upload Video"
                                                     />
                                                 </div>
                                             )
@@ -352,11 +400,13 @@ export const CreationStudio: React.FC<Props> = ({ isOpen, onClose, onPublish })
 
                                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                             <div className="space-y-2">
-                                                <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider">Division</label>
+                                                <label htmlFor="division-select" className="block text-xs font-bold text-gray-500 uppercase tracking-wider">Division</label>
                                                 <select
+                                                    id="division-select"
                                                     value={formData.division}
                                                     onChange={(e) => setFormData(prev => ({ ...prev, division: e.target.value as any }))}
                                                     className="w-full bg-[#111] border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none"
+                                                    title="Select Division"
                                                 >
                                                     {divisions.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
                                                 </select>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index e05cba2..11351b3 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -13,10 +13,10 @@ export const Footer = () => {
         </div>
 
         <div className="flex items-center gap-8">
-          <a href="https://www.instagram.com/ourcreativity.ofc/" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-white transition-colors" title="Instagram">
+          <a href="https://www.instagram.com/ourcreativity.ofc/" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-white transition-colors" title="Instagram" aria-label="Instagram">
             <Instagram size={20} />
           </a>
-          <a href="https://www.tiktok.com/@ourcreativity.ofc" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-white transition-colors" title="TikTok">
+          <a href="https://www.tiktok.com/@ourcreativity.ofc" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-white transition-colors" title="TikTok" aria-label="TikTok">
             <Music2 size={20} />
           </a>
         </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 3c83e3f..9f13d00 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -63,7 +63,7 @@ export const Navbar = () => {
             >
                 <motion.div layout className={`flex items-center justify-between w-full ${isMobileMenuOpen ? '' : (showFullMenu ? 'gap-8' : 'gap-2')}`}>
                     {/* Logo */}
-                    <Link to="/" className="flex items-center gap-2 group shrink-0" onClick={() => setIsMobileMenuOpen(false)}>
+                    <Link to="/" className="flex items-center gap-2 group shrink-0" onClick={() => setIsMobileMenuOpen(false)} aria-label="Beranda">
                         <motion.div
                             layout
                             className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center text-white group-hover:bg-white group-hover:text-black transition-colors"
@@ -150,6 +150,7 @@ export const Navbar = () => {
                         <button
                             className="md:hidden text-white p-2"
                             onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                            aria-label={isMobileMenuOpen ? "Tutup Menu" : "Buka Menu"}
                         >
                             {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
                         </button>
diff --git a/pages/Info.tsx b/pages/Info.tsx
index 6a8487d..b401142 100644
--- a/pages/Info.tsx
+++ b/pages/Info.tsx
@@ -21,8 +21,7 @@ const faqs = [
 
 const Noise = () => (
   <div
-    className="absolute inset-0 opacity-[0.05] pointer-events-none z-0 mix-blend-overlay"
-    style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E")` }}
+    className="absolute inset-0 opacity-[0.05] pointer-events-none z-0 mix-blend-overlay bg-[url('data:image/svg+xml,%3Csvg%20viewBox=%270%200%20200%20200%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter%20id=%27noiseFilter%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.65%27%20numOctaves=%273%27%20stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url(%23noiseFilter)%27%20opacity=%271%27/%3E%3C/svg%3E')]"
   ></div>
 );
 
@@ -126,6 +125,7 @@ export const Info = () => {
               <button
                 onClick={() => setOpenFaq(openFaq === i ? null : i)}
                 className="w-full flex items-center justify-between p-6 text-left hover:bg-white/5 transition-colors"
+                aria-expanded={openFaq === i}
               >
                 <span className="font-bold text-white text-lg">{faq.q}</span>
                 <ChevronDown