From bfae278411915a0efb05be766a762be3cbc70a37 Mon Sep 17 00:00:00 2001
From: KHAIRUL ARIF DANIAL <khaixd756@gmail.com>
Date: Wed, 5 Aug 2026 11:36:59 +0800
Subject: [PATCH 1/2] a11y: labels for theme toggle, search, category chips

---
 src/app/extensions/ExtensionsPageClient.tsx |  5 +++++
 src/app/templates/TemplatesPageClient.tsx   |  3 +++
 src/components/theme-toggle.tsx             | 14 +++++++++++---
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app/extensions/ExtensionsPageClient.tsx b/src/app/extensions/ExtensionsPageClient.tsx
index 6bac55d..daeaaa2 100644
--- a/src/app/extensions/ExtensionsPageClient.tsx
+++ b/src/app/extensions/ExtensionsPageClient.tsx
@@ -124,7 +124,9 @@ export function ExtensionsPageClient() {
             <div className="mx-auto max-w-5xl py-8 fade-in-up-delay-1">
               <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide mb-4">
                 <button
+                  type="button"
                   onClick={() => setSelectedCategory('')}
+                  aria-pressed={selectedCategory === ''}
                   className={cn(
                     'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
                     selectedCategory === ''
@@ -136,8 +138,10 @@ export function ExtensionsPageClient() {
                 </button>
                 {extensionCategories.map((cat) => (
                   <button
+                    type="button"
                     key={cat}
                     onClick={() => setSelectedCategory(cat)}
+                    aria-pressed={selectedCategory === cat}
                     className={cn(
                       'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
                       selectedCategory === cat
@@ -155,6 +159,7 @@ export function ExtensionsPageClient() {
                   <Input
                     type="search"
                     placeholder="Search extensions..."
+                    aria-label="Search extensions"
                     className="w-full bg-background/50 backdrop-blur-sm pl-8 border-cyan-500/20 focus:border-cyan-500/40 transition-all duration-300"
                     value={searchQuery}
                     onChange={handleSearchChange}
diff --git a/src/app/templates/TemplatesPageClient.tsx b/src/app/templates/TemplatesPageClient.tsx
index b361cd5..c6ec1ac 100644
--- a/src/app/templates/TemplatesPageClient.tsx
+++ b/src/app/templates/TemplatesPageClient.tsx
@@ -108,7 +108,9 @@ export function TemplatesPageClient() {
             <div className="mx-auto max-w-5xl py-4 fade-in-up-delay-1">
               <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide mb-4">
                 <button
+                  type="button"
                   onClick={() => setSelectedCategory('')}
+                  aria-pressed={selectedCategory === ''}
                   className={cn(
                     'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
                     selectedCategory === ''
@@ -139,6 +141,7 @@ export function TemplatesPageClient() {
                   <Input
                     type="search"
                     placeholder="Search templates..."
+                    aria-label="Search templates"
                     className="w-full bg-background/50 backdrop-blur-sm pl-8 border-primary/20 focus:border-primary/40 transition-all duration-300"
                     value={searchQuery}
                     onChange={handleSearchChange}
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index d1ccf7b..3c13fad 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -16,9 +16,17 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="relative h-9 w-9 rounded-full">
-          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative h-9 w-9 rounded-full"
+          aria-label="Toggle theme"
+        >
+          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" aria-hidden="true" />
+          <Moon
+            className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+            aria-hidden="true"
+          />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

From 58b2cf8aebd75196d9f50fb2f26aeb42df3c1c5c Mon Sep 17 00:00:00 2001
From: Khairul <khaixd756@gmail.com>
Date: Mon, 17 Aug 2026 09:59:47 +0800
Subject: [PATCH 2/2] fix(a11y): add type and aria-pressed on template category
 chips

---
 src/app/templates/TemplatesPageClient.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/templates/TemplatesPageClient.tsx b/src/app/templates/TemplatesPageClient.tsx
index c6ec1ac..a192ace 100644
--- a/src/app/templates/TemplatesPageClient.tsx
+++ b/src/app/templates/TemplatesPageClient.tsx
@@ -122,8 +122,10 @@ export function TemplatesPageClient() {
                 </button>
                 {categories.map((cat) => (
                   <button
+                    type="button"
                     key={cat.slug}
                     onClick={() => setSelectedCategory(cat.slug)}
+                    aria-pressed={selectedCategory === cat.slug}
                     className={cn(
                       'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
                       selectedCategory === cat.slug