From 644d2ebc0345fc35142968ff560206d5d97c4065 Mon Sep 17 00:00:00 2001
From: RootDeveloperDS <206297792+RootDeveloperDS@users.noreply.github.com>
Date: Mon, 10 Aug 2026 02:25:40 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20and=20interaction=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `aria-label` to the main `<nav>` element in `TopNav.tsx` for better screen reader support.
- Added `focus-visible` utility classes to the terminal contact links and copy button in `TerminalTab.tsx` to ensure clear keyboard navigation visibility.
- Added a subtle scale animation on hover (`group-hover:scale-110 transition-transform`) to the contact icons in `TerminalTab.tsx` for enhanced premium interaction feedback.
---
 .Jules/palette.md                        | 3 +++
 src/components/portfolio/TerminalTab.tsx | 6 +++---
 src/components/portfolio/TopNav.tsx      | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..d5ab240
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2023-10-27 - A11y & Focus Enhancements
+**Learning:** Adding `focus-visible` classes to interactive elements like custom buttons or links significantly improves keyboard accessibility without degrading the mouse/touch experience. Simple hover transitions (like a subtle scale) boost the premium feel.
+**Action:** Always verify custom interactive components have clear focus rings (`focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-background`). Ensure semantic tags like `<nav>` have `aria-label`s for screen readers.
diff --git a/src/components/portfolio/TerminalTab.tsx b/src/components/portfolio/TerminalTab.tsx
index 74bc8e4..975a4a8 100644
--- a/src/components/portfolio/TerminalTab.tsx
+++ b/src/components/portfolio/TerminalTab.tsx
@@ -272,9 +272,9 @@ export function TerminalTab() {
               rel="noopener noreferrer"
               aria-label={`Connect via ${label}`}
               onClick={() => sendTelegramNotification("Clicked Contact Channel (Terminal)", { channel: label, url: href })}
-              className="bento-card group flex items-center gap-3 !p-3 hover:border-primary/60 sm:gap-4 sm:!p-4"
+              className="bento-card group flex items-center gap-3 !p-3 hover:border-primary/60 sm:gap-4 sm:!p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-background"
             >
-              <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary sm:h-10 sm:w-10">
+              <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary sm:h-10 sm:w-10 transition-transform duration-300 group-hover:scale-110">
                 <Icon className="h-4 w-4 sm:h-5 sm:w-5" />
               </span>
               <div className="min-w-0 flex-1">
@@ -291,7 +291,7 @@ export function TerminalTab() {
                     navigator.clipboard.writeText(value);
                     toast({ title: "Copied", description: value });
                   }}
-                  className="shrink-0 text-muted-foreground transition-colors hover:text-primary"
+                  className="shrink-0 text-muted-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                   aria-label="Copy email"
                 >
                   <Copy className="h-4 w-4" />
diff --git a/src/components/portfolio/TopNav.tsx b/src/components/portfolio/TopNav.tsx
index a5b9262..becf9e0 100644
--- a/src/components/portfolio/TopNav.tsx
+++ b/src/components/portfolio/TopNav.tsx
@@ -31,7 +31,7 @@ export const TopNav = memo(function TopNav({ active, onChange, onOpenPalette }:
         </button>
 
         {/* Tabs Navigation */}
-        <nav className="flex items-center gap-0.5 sm:gap-1 rounded-full bg-secondary/40 p-0.5 sm:p-1 shrink-0">
+        <nav aria-label="Main Navigation" className="flex items-center gap-0.5 sm:gap-1 rounded-full bg-secondary/40 p-0.5 sm:p-1 shrink-0">
           {tabs.map((t) => {
             const isActive = active === t.id;
             return (