From e8e17129f219efbe4a1e7d815c573b9aba57dfcd Mon Sep 17 00:00:00 2001
From: byot-dot <251207510+byot-dot@users.noreply.github.com>
Date: Mon, 7 Sep 2026 19:33:46 -0600
Subject: [PATCH] fix: improve core control accessibility

---
 src/components/BalanceUI.tsx         |  7 ++++---
 src/components/Settings/Settings.tsx |  2 ++
 src/components/Wallet/Wallet.tsx     | 18 ++++++++++++------
 src/layouts/DefaultLayout.tsx        |  7 ++++++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/BalanceUI.tsx b/src/components/BalanceUI.tsx
index 0f4dbc54..6f54b79c 100644
--- a/src/components/BalanceUI.tsx
+++ b/src/components/BalanceUI.tsx
@@ -101,9 +101,10 @@ export default function BalanceUI({
           balance !== ('GenericFetchError' as GetBalanceError) &&
           token.name &&
           (onBalanceClick ? (
-            <span
+            <button
+              type="button"
               className="cursor-pointer hover:underline"
-              onClick={() => onBalanceClick(Number(BigNumber(balance).dividedBy(`1e${token.decimals}`)))} // ADD
+              onClick={() => onBalanceClick(Number(BigNumber(balance).dividedBy(`1e${token.decimals}`)))}
             >
               <span className="font-medium font-mono">{` ${Number(
                 BigNumber(balance).dividedBy(`1e${token.decimals}`)
@@ -113,7 +114,7 @@ export default function BalanceUI({
           ${token.name == 'SCRT' && isSecretToken ? 's' : ''}${token.name} ${
             token.coingecko_id && currencyPriceString && showCurrencyEquiv ? ` (${currencyPriceString})` : ''
           }`}</span>
-            </span>
+            </button>
           ) : (
             <>
               <span className="font-medium font-mono">{` ${Number(
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 176dd225..0b39305c 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -206,6 +206,8 @@ function Settings() {
       </Modal>
       <div>
         <button
+          type="button"
+          aria-label="Open settings"
           onClick={() => setIsModalOpen(true)}
           className="text-black dark:text-white hover:text-neutral-600 dark:hover:text-neutral-400 transition-colors"
         >
diff --git a/src/components/Wallet/Wallet.tsx b/src/components/Wallet/Wallet.tsx
index a2beed71..5f66c10f 100644
--- a/src/components/Wallet/Wallet.tsx
+++ b/src/components/Wallet/Wallet.tsx
@@ -264,7 +264,16 @@ function Wallet() {
       </Modal>
 
       {isConnected ? (
-        <div onClick={() => setIsMenuOpen(true)} ref={refs.setReference}>
+        <>
+          <button
+            type="button"
+            onClick={() => setIsMenuOpen((open) => !open)}
+            ref={refs.setReference}
+            aria-haspopup="dialog"
+            aria-expanded={isMenuOpen}
+          >
+            <X />
+          </button>
           {isMenuOpen && (
             <div
               className="w-full sm:w-auto px-4 sm:px-0 z-40"
@@ -275,12 +284,9 @@ function Wallet() {
               <ContextMenu />
             </div>
           )}
-          <div>
-            <X />
-          </div>
-        </div>
+        </>
       ) : (
-        <button onClick={() => handleConnectWallet()}>
+        <button type="button" onClick={() => handleConnectWallet()}>
           <X />
         </button>
       )}
diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
index 5aa68bf5..1f7baa98 100644
--- a/src/layouts/DefaultLayout.tsx
+++ b/src/layouts/DefaultLayout.tsx
@@ -56,7 +56,7 @@ export const DefaultLayout = ({ children }: any) => {
                 {icon}
                 {message}
                 {t.type !== 'loading' && (
-                  <button onClick={() => toast.dismiss(t.id)}>
+                  <button type="button" aria-label="Dismiss notification" onClick={() => toast.dismiss(t.id)}>
                     <FontAwesomeIcon icon={faXmark} />
                   </button>
                 )}
@@ -72,6 +72,7 @@ export const DefaultLayout = ({ children }: any) => {
       <div className="flex">
         {/* Menu */}
         <aside
+          id="primary-navigation"
           className={
             (showMobileMenu
               ? 'z-50 left-0 right-0 w-full lg:w-auto min-h-screen bg-white dark:bg-neutral-900'
@@ -103,6 +104,10 @@ export const DefaultLayout = ({ children }: any) => {
               {/* Burger Menu */}
               <div className="flex-initial lg:hidden">
                 <button
+                  type="button"
+                  aria-label="Open navigation menu"
+                  aria-controls="primary-navigation"
+                  aria-expanded={showMobileMenu}
                   onClick={() => setShowMobileMenu(true)}
                   className="text-black dark:text-white hover:text-neutral-600 dark:hover:text-neutral-400 transition-colors"
                 >