fix(ui): add aria-labels to icon-only buttons for screen readers (#473)

bun.lock

@@ -529,6 +529,7 @@
         "@workspace/db": "workspace:*",
         "@workspace/db-react": "workspace:*",
         "@workspace/explorer": "workspace:*",
+        "@workspace/i18n": "workspace:*",
         "@workspace/keypair": "workspace:*",
         "@workspace/settings": "workspace:*",
         "@workspace/solana-client": "workspace:*",

packages/i18n/locales/en/portfolio.json

@@ -6,6 +6,7 @@
   "actionRequestAirdrop": "Request Airdrop",
   "actionSend": "Send",
   "actionUseFaucet": "Use faucet",
+  "buttonRefresh": "Refresh activity",
   "labelActivity": "Activity",
   "labelTokens": "Tokens",
   "noTransactions": "No transactions found.",

packages/i18n/locales/en/tools.json

@@ -0,0 +1,3 @@
+{
+  "generateKeypair": "Generate New Keypair"
+}

packages/i18n/locales/en/ui.json

@@ -1,4 +1,8 @@
 {
+  "buttonBack": "Go back",
+  "buttonClose": "Close dialog",
+  "buttonCopy": "Copy to clipboard",
+  "buttonRefresh": "Refresh",
   "errorTitle": "Oops, an error occurred",
   "experimentalWarningDescription": "Use this wallet at your own risk. Do not use any real funds.",
   "experimentalWarningTitle": "This is experimental software.",

packages/i18n/locales/es/portfolio.json

@@ -6,6 +6,7 @@
   "actionRequestAirdrop": "Solicitar airdrop",
   "actionSend": "Enviar",
   "actionUseFaucet": "Usa faucet",
+  "buttonRefresh": "Actualizar actividad",
   "labelActivity": "Actividad",
   "labelTokens": "Tokens",
   "noTransactions": "No se encontraron transacciones.",

packages/i18n/locales/es/tools.json

@@ -0,0 +1,3 @@
+{
+  "generateKeypair": "Generar nuevo par de claves"
+}

packages/i18n/locales/es/ui.json

@@ -1,4 +1,8 @@
 {
+  "buttonBack": "Volver",
+  "buttonClose": "Cerrar diálogo",
+  "buttonCopy": "Copiar al portapapeles",
+  "buttonRefresh": "Refrescar",
   "errorTitle": "Uy, ocurrió un error",
   "experimentalWarningDescription": "Utilice esta billetera bajo su propio riesgo. No use fondos reales.",
   "experimentalWarningTitle": "Este es un software experimental.",

packages/i18n/src/resources.d.ts

@@ -26,6 +26,7 @@ interface Resources {
     actionRequestAirdrop: 'Request Airdrop'
     actionSend: 'Send'
     actionUseFaucet: 'Use faucet'
+    buttonRefresh: 'Refresh activity'
     labelActivity: 'Activity'
     labelTokens: 'Tokens'
     noTransactions: 'No transactions found.'
@@ -160,11 +161,18 @@ interface Resources {
     walletEdit: 'Edit wallet'
     walletSettings: 'Wallet settings'
   }
+  tools: {
+    generateKeypair: 'Generate New Keypair'
+  }
   translation: {
     languageEnglish: 'English'
     languageSpanish: 'Spanish'
   }
   ui: {
+    buttonBack: 'Go back'
+    buttonClose: 'Close dialog'
+    buttonCopy: 'Copy to clipboard'
+    buttonRefresh: 'Refresh'
     errorTitle: 'Oops, an error occurred'
     experimentalWarningDescription: 'Use this wallet at your own risk. Do not use any real funds.'
     experimentalWarningTitle: 'This is experimental software.'

packages/portfolio/src/portfolio-feature-tab-activity.tsx

@@ -24,7 +24,13 @@ export function PortfolioFeatureTabActivity() {
       <div className="flex items-center justify-between">
         <h2 className="font-bold text-xl">{t(($) => $.pageTitleActivity)}</h2>
         <div className="space-x-2">
-          <Button disabled={isLoading} onClick={() => refetch()} size="icon" variant="outline">
+          <Button
+            aria-label={t(($) => $.buttonRefresh)}
+            disabled={isLoading}
+            onClick={() => refetch()}
+            size="icon"
+            variant="outline"
+          >
             {isLoading ? <Spinner /> : <UiIcon icon="refresh" />}
           </Button>
         </div>

packages/settings/src/ui/account-ui-export-secret-button.tsx

@@ -11,7 +11,7 @@ export function AccountExportSecretButton({ account }: { account: Account }) {
   const { t } = useTranslation('settings')
   if (!account.secretKey) {
     return (
-      <Button disabled size="icon" title={t(($) => $.accountNoSecretKey)} type="button" variant="outline">
+      <Button aria-label={t(($) => $.accountNoSecretKey)} disabled size="icon" type="button" variant="outline">
         <UiIcon className="size-4" icon="key" />
       </Button>
     )
@@ -37,7 +37,7 @@ export function AccountExportSecretButton({ account }: { account: Account }) {
       description={t(($) => $.accountCopySecretKeyConfirmDescription)}
       title={t(($) => $.accountCopySecretKeyConfirmTitle)}
     >
-      <Button size="icon" title={t(($) => $.accountCopySecretKey)} variant="outline">
+      <Button aria-label={t(($) => $.accountCopySecretKey)} size="icon" variant="outline">
         <UiIcon className="size-4" icon="key" />
       </Button>
     </UiConfirm>

packages/settings/src/ui/settings-ui-network-list.tsx

@@ -31,7 +31,7 @@ export function SettingsUiNetworkList({
             </ItemTitle>
           </ItemContent>
           <ItemActions>
-            <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
+            <Button aria-label={t(($) => $.actionEdit)} asChild size="icon" variant="outline">
               <Link to={`./${item.id}`}>
                 <UiIcon className="size-4" icon="edit" />
               </Link>
@@ -43,7 +43,7 @@ export function SettingsUiNetworkList({
               description="This action can not be reversed."
               title="Are you sure you want to delete this network?"
             >
-              <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
+              <Button aria-label={t(($) => $.actionDelete)} size="icon" variant="outline">
                 <UiIcon className="size-4 text-red-500" icon="delete" />
               </Button>
             </UiConfirm>

packages/settings/src/ui/settings-ui-wallet-export-mnemonic-button.tsx

@@ -26,7 +26,7 @@ export function SettingsUiWalletExportMnemonicButton({ wallet }: { wallet: Walle
       description="Do you want to copy it to your clipboard?"
       title="Exporting the mnemonic reveals sensitive information."
     >
-      <Button size="icon" title={t(($) => $.actionExportMnemonic)} variant="outline">
+      <Button aria-label={t(($) => $.actionExportMnemonic)} size="icon" variant="outline">
         <UiIcon className="size-4" icon="mnemonic" />
       </Button>
     </UiConfirm>

packages/settings/src/ui/settings-ui-wallet-list-item.tsx

@@ -29,7 +29,7 @@ export function SettingsUiWalletListItem({
       </ItemContent>
       <ItemActions>
         <SettingsUiWalletExportMnemonicButton wallet={item} />
-        <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
+        <Button aria-label={t(($) => $.actionEdit)} asChild size="icon" variant="outline">
           <Link to={`./${item.id}/edit`}>
             <UiIcon className="size-4" icon="edit" />
           </Link>
@@ -41,7 +41,7 @@ export function SettingsUiWalletListItem({
           description="This action can not be reversed."
           title="Are you sure you want to delete this wallet?"
         >
-          <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
+          <Button aria-label={t(($) => $.actionDelete)} size="icon" variant="outline">
             <UiIcon className="size-4 text-red-500" icon="delete" />
           </Button>
         </UiConfirm>

packages/shell/src/ui/shell-ui-menu-actions-popup.tsx

@@ -24,9 +24,9 @@ export function ShellUiMenuActionsPopup({ browser }: { browser: WxtBrowser | und
 
   return (
     <Button
+      aria-label={t(($) => $.actionsSidebarShow)}
       onClick={() => openSidePanel(browser)}
       size="icon"
-      title={t(($) => $.actionsSidebarShow)}
       variant="secondary"
     >
       <UiIcon icon="sidebar" />

packages/shell/src/ui/shell-ui-menu-actions-sidebar.tsx

@@ -5,7 +5,7 @@ import { UiIcon } from '@workspace/ui/components/ui-icon'
 export function ShellUiMenuActionsSidebar() {
   const { t } = useTranslation('shell')
   return (
-    <Button onClick={() => window.close()} size="icon" title={t(($) => $.actionsSidebarHide)} variant="secondary">
+    <Button aria-label={t(($) => $.actionsSidebarHide)} onClick={() => window.close()} size="icon" variant="secondary">
       <UiIcon icon="sidebarClose" />
     </Button>
   )

packages/shell/src/ui/shell-ui-menu-wallets.tsx

@@ -40,7 +40,6 @@ export function ShellUiMenuWallets({
           <UiTextCopyIcon
             onPointerDown={(e) => e.stopPropagation()}
             text={activeAccount.publicKey}
-            title={t(($) => $.accountPublicKeyCopy)}
             toast={t(($) => $.accountPublicKeyCopySuccess)}
             toastFailed={t(($) => $.accountPublicKeyCopyFailed)}
           />
@@ -67,7 +66,6 @@ export function ShellUiMenuWallets({
                     </MenubarRadioItem>
                     <UiTextCopyIcon
                       text={account.publicKey}
-                      title={t(($) => $.accountPublicKeyCopy)}
                       toast={t(($) => $.accountPublicKeyCopySuccess)}
                       toastFailed={t(($) => $.accountPublicKeyCopyFailed)}
                     />

packages/tools/package.json

@@ -6,6 +6,7 @@
     "@workspace/db": "workspace:*",
     "@workspace/db-react": "workspace:*",
     "@workspace/explorer": "workspace:*",
+    "@workspace/i18n": "workspace:*",
     "@workspace/keypair": "workspace:*",
     "@workspace/settings": "workspace:*",
     "@workspace/solana-client": "workspace:*",

packages/tools/src/tools-feature-create-token.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import type { Account } from '@workspace/db/account/account'
 import type { Network } from '@workspace/db/network/network'
 import { ExplorerUiExplorerLink } from '@workspace/explorer/ui/explorer-ui-explorer-link'
+import { useTranslation } from '@workspace/i18n'
 import { getNetworkLabel } from '@workspace/settings/ui/get-network-label'
 import { getExplorerUrl } from '@workspace/solana-client/get-explorer-url'
 import { uiAmountToBigInt } from '@workspace/solana-client/ui-amount-to-big-int'
@@ -17,6 +18,7 @@ import { ellipsify } from '@workspace/ui/lib/ellipsify'
 import { useCallback, useId, useState } from 'react'
 
 export default function ToolsFeatureCreateToken(props: { account: Account; network: Network }) {
+  const { t } = useTranslation('tools')
   const addressId = useId()
   const decimalsId = useId()
   const supplyId = useId()
@@ -109,7 +111,12 @@ export default function ToolsFeatureCreateToken(props: { account: Account; netwo
             <FieldDescription>The address of the mint</FieldDescription>
             <div className="flex items-center gap-2">
               <Input id={addressId} readOnly required value={queryKeypair.data?.address} />
-              <Button onClick={() => queryKeypair.refetch()} size="icon" variant="outline">
+              <Button
+                aria-label={t(($) => $.generateKeypair)}
+                onClick={() => queryKeypair.refetch()}
+                size="icon"
+                variant="outline"
+              >
                 <UiIcon icon="refresh" />
               </Button>
             </div>

packages/ui/src/components/ui-back-button.tsx

@@ -1,11 +1,13 @@
+import { useTranslation } from '@workspace/i18n'
 import { LucideArrowLeft } from 'lucide-react'
 import type { ComponentProps } from 'react'
 import { Link } from 'react-router'
 import { Button } from './button.tsx'
 
 export function UiBackButton(props: ComponentProps<typeof Button>) {
+  const { t } = useTranslation('ui')
   return (
-    <Button asChild size="icon" variant="outline" {...props}>
+    <Button asChild size="icon" variant="outline" {...props} aria-label={t(($) => $.buttonBack)}>
       <Link to="..">
         <LucideArrowLeft />
       </Link>

packages/ui/src/components/ui-back.tsx

@@ -1,11 +1,13 @@
+import { useTranslation } from '@workspace/i18n'
 import { LucideArrowLeft } from 'lucide-react'
 import { Link } from 'react-router'
 
 import { Button } from './button.tsx'
 
 export function UiBack({ to = '..' }: { to?: string }) {
+  const { t } = useTranslation('ui')
   return (
-    <Button asChild size="icon" variant="outline">
+    <Button aria-label={t(($) => $.buttonBack)} asChild size="icon" variant="outline">
       <Link to={to}>
         <LucideArrowLeft />
       </Link>

packages/ui/src/components/ui-experimental-warning.tsx

@@ -11,7 +11,13 @@ export function UiExperimentalWarning({ close }: { close?: () => void }) {
       <AlertTitle>{t(($) => $.experimentalWarningTitle)}</AlertTitle>
       <AlertDescription>{t(($) => $.experimentalWarningDescription)}</AlertDescription>
       {close ? (
-        <Button className="absolute top-2 right-2" onClick={() => close()} size="icon" variant="ghost">
+        <Button
+          aria-label={t(($) => $.buttonClose)}
+          className="absolute top-2 right-2"
+          onClick={() => close()}
+          size="icon"
+          variant="ghost"
+        >
           <LucideX />
         </Button>
       ) : null}

packages/ui/src/components/ui-text-copy-button.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@workspace/i18n'
 import type { ComponentProps } from 'react'
 import { cn } from '../lib/utils.ts'
 import { Button } from './button.tsx'
@@ -11,10 +12,18 @@ export function UiTextCopyButton({
   toastFailed,
   ...props
 }: ComponentProps<typeof Button> & HandleCopyTextProps & { label: string }) {
+  const { t } = useTranslation('ui')
   const { copied, handleCopy } = useHandleCopyText({ text, toast, toastFailed })
 
   return (
-    <Button className="cursor-pointer" onClick={handleCopy} type="button" variant="secondary" {...props}>
+    <Button
+      aria-label={t(($) => $.buttonCopy)}
+      className="cursor-pointer"
+      onClick={handleCopy}
+      type="button"
+      variant="secondary"
+      {...props}
+    >
       <UiIcon className={cn({ 'text-green-500': copied })} icon={copied ? 'copyCheck' : 'copy'} />
       {label}
     </Button>