From 8adc7274341217d52256f511b0f396260efba347 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 31 Mar 2026 19:45:12 -0300
Subject: [PATCH] fix(a11y): fix Account dropdown trigger contrast in dark mode

Replace btn btn-link with scoped styles using semantic design tokens.
The trigger now uses --color-text-default for proper theme-aware
contrast and --color-text-action (purple) on hover for the label only.

Closes #6902

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/components/navigation/AccountDropdown.tsx  |  6 ++++--
 frontend/web/styles/project/_project-nav.scss      | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/web/components/navigation/AccountDropdown.tsx b/frontend/web/components/navigation/AccountDropdown.tsx
index 851702555154..1aae3dbf7391 100644
--- a/frontend/web/components/navigation/AccountDropdown.tsx
+++ b/frontend/web/components/navigation/AccountDropdown.tsx
@@ -56,7 +56,7 @@ const AccountDropdown: React.FC = () => {
   return (
     <div className='feature-action' tabIndex={-1}>
       <button
-        className='btn btn-link p-0 d-flex ps-3 lh-1 align-items-center'
+        className='account-dropdown-trigger d-flex ps-3 lh-1 align-items-center'
         onClick={(e) => {
           e.stopPropagation()
           setIsOpen(!isOpen)
@@ -68,7 +68,9 @@ const AccountDropdown: React.FC = () => {
         <span className='mr-1'>
           <Icon name='person' width={20} fill='#9DA4AE' />
         </span>
-        <span className='d-none d-md-block'>Account</span>
+        <span className='d-none d-md-block account-dropdown-trigger__label'>
+          Account
+        </span>
       </button>
 
       {isOpen &&
diff --git a/frontend/web/styles/project/_project-nav.scss b/frontend/web/styles/project/_project-nav.scss
index 06e3b3c5751b..51cbdfa8abd4 100644
--- a/frontend/web/styles/project/_project-nav.scss
+++ b/frontend/web/styles/project/_project-nav.scss
@@ -13,6 +13,20 @@ nav a {
     font-weight: bold;
   }
 }
+.account-dropdown-trigger {
+  color: var(--color-text-default);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-weight: 500;
+  &:hover,
+  &:focus {
+    .account-dropdown-trigger__label {
+      color: var(--color-text-action);
+    }
+  }
+}
 .nav-sub-link-disabled {
   cursor: not-allowed;
   span {