fix: improve keyboard accessibility across UI components

sallymoc · sallymoc · commit 16ddd42b1cec · 2026-02-25T23:58:43.000+01:00
- Add aria-label to icon-only DropdownMenu triggers (language picker,
  network selector, burger menu) with i18n translations for all locales
- Add aria-label to SearchBar input and CopyTextButton
- Add aria-expanded to ChevronToggleButton
- Add proper ARIA roles to Tabs (role=tablist, role=tab, aria-selected,
  role=tabpanel)
- Fix Breadcrumbs separator: use aria-hidden instead of aria-label
- Remove incorrect role=button from Links and external anchors
- Update DropdownMenu.Trigger to forward aria-label prop
diff --git a/public/locales/ar/global.json b/public/locales/ar/global.json
@@ -1,9 +1,12 @@
 {
   "address": "عنوان",
   "balance": "الرصيد",
+  "navigationMenu": "قائمة التنقل",
   "noResultsFound": "لم يتم العثور على نتائج",
   "noResultsFoundFor": "لم يتم العثور على نتائج لـ \"{{keyword}}\"",
   "searchPlaceholder": "البحث عن TXs، ticks، IDs، tokens، contracts، exchanges...",
+  "selectLanguage": "اختر اللغة",
+  "selectNetwork": "اختر الشبكة",
   "tick": "تيك",
   "transaction": "معاملة",
   "transactions": "معاملات"
diff --git a/public/locales/de/global.json b/public/locales/de/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Adresse",
   "balance": "Kontostand",
+  "navigationMenu": "Navigationsmenü",
   "noResultsFound": "Keine Ergebnisse Gefunden",
   "noResultsFoundFor": "Keine Ergebnisse gefunden für \"{{keyword}}\"",
   "searchPlaceholder": "TXs, Ticks, IDs, Tokens, Verträge, Börsen suchen...",
+  "selectLanguage": "Sprache auswählen",
+  "selectNetwork": "Netzwerk auswählen",
   "tick": "Tick",
   "transaction": "Transaktion",
   "transactions": "Transaktionen"
diff --git a/public/locales/en/global.json b/public/locales/en/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Address",
   "balance": "Balance",
+  "navigationMenu": "Navigation menu",
   "noResultsFound": "No Results Found",
   "noResultsFoundFor": "No results found for \"{{keyword}}\"",
   "searchPlaceholder": "Search TXs, ticks, IDs, tokens, contracts, exchanges...",
+  "selectLanguage": "Select language",
+  "selectNetwork": "Select network",
   "tick": "Tick",
   "transaction": "Transaction",
   "transactions": "Transactions"
diff --git a/public/locales/es/global.json b/public/locales/es/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Dirección",
   "balance": "Saldo",
+  "navigationMenu": "Menú de navegación",
   "noResultsFound": "No Se Encontraron Resultados",
   "noResultsFoundFor": "No se encontraron resultados para \"{{keyword}}\"",
   "searchPlaceholder": "Buscar TXs, ticks, IDs, tokens, contratos, exchanges...",
+  "selectLanguage": "Seleccionar idioma",
+  "selectNetwork": "Seleccionar red",
   "tick": "Tick",
   "transaction": "Transacción",
   "transactions": "Transacciones"
diff --git a/public/locales/fr/global.json b/public/locales/fr/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Adresse",
   "balance": "Solde",
+  "navigationMenu": "Menu de navigation",
   "noResultsFound": "Aucun Résultat Trouvé",
   "noResultsFoundFor": "Aucun résultat trouvé pour \"{{keyword}}\"",
   "searchPlaceholder": "Rechercher TXs, ticks, IDs, tokens, contrats, exchanges...",
+  "selectLanguage": "Sélectionner la langue",
+  "selectNetwork": "Sélectionner le réseau",
   "tick": "Tick",
   "transaction": "Transaction",
   "transactions": "Transactions"
diff --git a/public/locales/ja/global.json b/public/locales/ja/global.json
@@ -1,9 +1,12 @@
 {
   "address": "住所",
   "balance": "残高",
+  "navigationMenu": "ナビゲーションメニュー",
   "noResultsFound": "結果が見つかりません",
   "noResultsFoundFor": "「{{keyword}}」の結果が見つかりません",
   "searchPlaceholder": "TX、ティック、ID、トークン、コントラクト、取引所を検索...",
+  "selectLanguage": "言語を選択",
+  "selectNetwork": "ネットワークを選択",
   "tick": "ティック",
   "transaction": "取引",
   "transactions": "取引"
diff --git a/public/locales/nl/global.json b/public/locales/nl/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Adres",
   "balance": "Balans",
+  "navigationMenu": "Navigatiemenu",
   "noResultsFound": "Geen Resultaten Gevonden",
   "noResultsFoundFor": "Geen resultaten gevonden voor \"{{keyword}}\"",
   "searchPlaceholder": "Zoek TXs, ticks, IDs, tokens, contracten, exchanges...",
+  "selectLanguage": "Taal selecteren",
+  "selectNetwork": "Netwerk selecteren",
   "tick": "Tick",
   "transaction": "Transactie",
   "transactions": "Transacties"
diff --git a/public/locales/pt/global.json b/public/locales/pt/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Endereço",
   "balance": "Saldo",
+  "navigationMenu": "Menu de navegação",
   "noResultsFound": "Nenhum Resultado Encontrado",
   "noResultsFoundFor": "Nenhum resultado encontrado para \"{{keyword}}\"",
   "searchPlaceholder": "Pesquisar TXs, ticks, IDs, tokens, contratos, exchanges...",
+  "selectLanguage": "Selecionar idioma",
+  "selectNetwork": "Selecionar rede",
   "tick": "Tick",
   "transaction": "Transação",
   "transactions": "Transações"
diff --git a/public/locales/ru/global.json b/public/locales/ru/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Адрес",
   "balance": "Баланс",
+  "navigationMenu": "Меню навигации",
   "noResultsFound": "Результаты Не Найдены",
   "noResultsFoundFor": "Результаты не найдены для \"{{keyword}}\"",
   "searchPlaceholder": "Поиск TX, тиков, ID, токенов, контрактов, бирж...",
+  "selectLanguage": "Выбрать язык",
+  "selectNetwork": "Выбрать сеть",
   "tick": "Тик",
   "transaction": "Транзакция",
   "transactions": "Транзакции"
diff --git a/public/locales/tr/global.json b/public/locales/tr/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Adres",
   "balance": "Bakiye",
+  "navigationMenu": "Gezinme menüsü",
   "noResultsFound": "Sonuç Bulunamadı",
   "noResultsFoundFor": "\"{{keyword}}\" için sonuç bulunamadı",
   "searchPlaceholder": "TX, tick, ID, token, sözleşme, borsa ara...",
+  "selectLanguage": "Dil seçin",
+  "selectNetwork": "Ağ seçin",
   "tick": "Tik",
   "transaction": "İşlem",
   "transactions": "İşlemler"
diff --git a/public/locales/vi/global.json b/public/locales/vi/global.json
@@ -1,9 +1,12 @@
 {
   "address": "Địa chỉ",
   "balance": "Số dư",
+  "navigationMenu": "Menu điều hướng",
   "noResultsFound": "Không Tìm Thấy Kết Quả",
   "noResultsFoundFor": "Không tìm thấy kết quả cho \"{{keyword}}\"",
   "searchPlaceholder": "Tìm TX, tick, ID, token, hợp đồng, sàn giao dịch...",
+  "selectLanguage": "Chọn ngôn ngữ",
+  "selectNetwork": "Chọn mạng",
   "tick": "Tick",
   "transaction": "Giao dịch",
   "transactions": "Các giao dịch"
diff --git a/public/locales/zh/global.json b/public/locales/zh/global.json
@@ -1,9 +1,12 @@
 {
   "address": "地址",
   "balance": "余额",
+  "navigationMenu": "导航菜单",
   "noResultsFound": "未找到结果",
   "noResultsFoundFor": "未找到 \"{{keyword}}\" 的结果",
   "searchPlaceholder": "搜索 TX、刻度、ID、代币、合约、交易所...",
+  "selectLanguage": "选择语言",
+  "selectNetwork": "选择网络",
   "tick": "刻度",
   "transaction": "交易",
   "transactions": "交易"
diff --git a/src/components/ui/Breadcrumbs.tsx b/src/components/ui/Breadcrumbs.tsx
@@ -12,7 +12,7 @@ function Breadcrumbs({ children }: Props) {
           <Fragment key={`breadcrumb-${String(index)}`}>
             <li className="flex items-center">{child}</li>
             {index < Children.count(children) - 1 && (
-              <li aria-label="breadcrums-separator" className="mx-8 text-sm text-gray-500">
+              <li aria-hidden="true" className="mx-8 text-sm text-gray-500">
                 /
               </li>
             )}
diff --git a/src/components/ui/DropdownMenu.tsx b/src/components/ui/DropdownMenu.tsx
@@ -13,6 +13,7 @@ interface DropdownMenuProps {
 interface DropdownMenuTriggerPropsBase {
   onToggle?: () => void
   className?: string
+  'aria-label'?: string
 }
 
 interface DropdownMenuTriggerWithAs extends DropdownMenuTriggerPropsBase {
@@ -100,7 +101,10 @@ const ClonedComponent = <T extends HTMLElement>({
   })
 
 DropdownMenu.Trigger = forwardRef<HTMLElement, DropdownMenuTriggerProps>(
-  function DropdownMenuTrigger({ children, onToggle, className, as }, ref) {
+  function DropdownMenuTrigger(
+    { children, onToggle, className, as, 'aria-label': ariaLabel },
+    ref
+  ) {
     if (as) {
       return (
         <div ref={ref as React.Ref<HTMLDivElement>}>
@@ -115,6 +119,7 @@ DropdownMenu.Trigger = forwardRef<HTMLElement, DropdownMenuTriggerProps>(
         onClick={onToggle}
         className={className}
         ref={ref as React.Ref<HTMLButtonElement>}
+        aria-label={ariaLabel}
       >
         {children}
       </button>
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
@@ -83,8 +83,9 @@ Tabs.List = function TabsList({
     <div
       className={clsxTwMerge(variant === 'default' && 'border-b-1 border-primary-60', className)}
     >
-      <nav
+      <div
         aria-label="Tabs"
+        role="tablist"
         className={clsxTwMerge('flex space-x-2', variant === 'buttons' && 'gap-6')}
       >
         {Children.map(children, (child, index) =>
@@ -96,7 +97,7 @@ Tabs.List = function TabsList({
               })
             : child
         )}
-      </nav>
+      </div>
     </div>
   )
 }
@@ -132,8 +133,9 @@ Tabs.Tab = function TabsTab({
         variant === 'default' ? defaultVariantClasses : buttonsVariantClasses,
         className
       )}
+      role="tab"
       onClick={onClick}
-      aria-current={isSelected ? 'page' : undefined}
+      aria-selected={isSelected}
     >
       {children}
     </button>
@@ -155,5 +157,9 @@ Tabs.Panels = function TabsPanels({ children, className, currentIndex }: TabsPan
 Tabs.Panel = function TabsPanel({ children, isSelected, className }: TabsPanelProps) {
   if (!isSelected) return null
 
-  return <div className={className}>{children}</div>
+  return (
+    <div role="tabpanel" className={className}>
+      {children}
+    </div>
+  )
 }
diff --git a/src/components/ui/buttons/ChevronToggleButton.tsx b/src/components/ui/buttons/ChevronToggleButton.tsx
@@ -22,6 +22,7 @@ export default function ChevronToggleButton({
         className
       )}
       onClick={onClick}
+      aria-expanded={isOpen}
     >
       {children && <span className="text-center font-space text-sm">{children}</span>}
       <ChevronDownIcon
diff --git a/src/components/ui/buttons/CopyTextButton.tsx b/src/components/ui/buttons/CopyTextButton.tsx
@@ -48,6 +48,7 @@ export default function CopyTextButton({
           className
         )}
         onClick={handleCopy}
+        aria-label={isCopied ? t('copied') : getTooltipText()}
       >
         {isCopied ? (
           <CheckIcon className="size-14 text-success-40" />
diff --git a/src/components/ui/layouts/Footer.tsx b/src/components/ui/layouts/Footer.tsx
@@ -20,7 +20,7 @@ function FooterLink({ label, to, isInternal }: FooterLinkProps) {
     )
   }
   return (
-    <a href={to} className={footerTextClass} target="_blank" role="button" rel="noreferrer">
+    <a href={to} className={footerTextClass} target="_blank" rel="noreferrer">
       {label}
     </a>
   )
diff --git a/src/components/ui/layouts/Header/BurgerMenu.tsx b/src/components/ui/layouts/Header/BurgerMenu.tsx
@@ -23,7 +23,10 @@ export default function BurgerMenu({ navigationMenus, activePath }: Props) {
 
   return (
     <DropdownMenu show={showMenu} onToggle={handleToggleMenu}>
-      <DropdownMenu.Trigger className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-60/80">
+      <DropdownMenu.Trigger
+        className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-60/80"
+        aria-label={t('navigationMenu')}
+      >
         <div className="relative size-24">
           <XmarkIcon
             className={clsxTwMerge(
diff --git a/src/components/ui/layouts/Header/LanguagePicker.tsx b/src/components/ui/layouts/Header/LanguagePicker.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { GlobeGrayIcon } from '@app/assets/icons'
 import { Alert, DropdownMenu } from '@app/components/ui'
@@ -10,6 +11,7 @@ import type { Language } from '@app/types'
 import { clsxTwMerge } from '@app/utils'
 
 export default function LanguagePicker() {
+  const { t } = useTranslation('global')
   const dispatch = useAppDispatch()
   const { language } = useAppSelector(selectLocale)
   const [showDropdown, setShowDropdown] = useState(false)
@@ -27,7 +29,10 @@ export default function LanguagePicker() {
   return (
     <ErrorBoundary fallback={<Alert variant="error" className="mx-5 my-2.5" />}>
       <DropdownMenu show={showDropdown} onToggle={handleDropdownToggle}>
-        <DropdownMenu.Trigger className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-70">
+        <DropdownMenu.Trigger
+          className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-70"
+          aria-label={t('selectLanguage')}
+        >
           <GlobeGrayIcon className="h-18 w-18" />
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
diff --git a/src/components/ui/layouts/Header/NetworkSelector.tsx b/src/components/ui/layouts/Header/NetworkSelector.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { QubicWhiteLogo } from '@app/assets/icons'
 import { Alert, DropdownMenu } from '@app/components/ui'
@@ -8,14 +9,18 @@ import { EXPLORER_NETWORK_URLS } from '@app/constants/qubic'
 import { clsxTwMerge } from '@app/utils'
 
 export default function NetworkSelector() {
+  const { t } = useTranslation('global')
   const [showDropdown, setShowDropdown] = useState(false)
 
   const handleDropdownToggle = () => setShowDropdown((prev) => !prev)
 
   return (
     <ErrorBoundary fallback={<Alert variant="error" className="mx-5 my-2.5" />}>
       <DropdownMenu show={showDropdown} onToggle={handleDropdownToggle}>
-        <DropdownMenu.Trigger className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-70">
+        <DropdownMenu.Trigger
+          className="rounded-full p-8 transition-colors duration-500 ease-in-out hover:bg-primary-70"
+          aria-label={t('selectNetwork')}
+        >
           <QubicWhiteLogo className="size-28 shrink-0 rounded border border-primary-60 p-4" />
         </DropdownMenu.Trigger>
         <DropdownMenu.Content className="ltr:left-auto ltr:right-0">
diff --git a/src/components/ui/layouts/Header/SearchBar/EntityResultItem.tsx b/src/components/ui/layouts/Header/SearchBar/EntityResultItem.tsx
@@ -51,7 +51,6 @@ export default function EntityResultItem({ entity, searchTerm, onClick }: Props)
     <Link
       className="flex flex-col gap-2 break-all rounded-12 px-12 py-6 hover:bg-primary-60"
       to={Routes.NETWORK.ADDRESS(entity.address)}
-      role="button"
       onClick={onClick}
     >
       <div className="flex items-center gap-8">
diff --git a/src/components/ui/layouts/Header/SearchBar/ResultItem.tsx b/src/components/ui/layouts/Header/SearchBar/ResultItem.tsx
@@ -35,7 +35,6 @@ function ResultItem({ type, link, result, subInfo, onClick }: Props) {
     <Link
       className="flex flex-col gap-2 break-all rounded-12 px-12 py-6 hover:bg-primary-60"
       to={link}
-      role="button"
       onClick={onClick}
     >
       <div className="flex items-center gap-8">
diff --git a/src/components/ui/layouts/Header/SearchBar/SearchBar.tsx b/src/components/ui/layouts/Header/SearchBar/SearchBar.tsx
@@ -283,6 +283,7 @@ export default function SearchBar() {
               <input
                 className="w-full bg-inherit py-12 text-base placeholder:font-space placeholder:text-base placeholder:text-gray-50 focus:outline-none sm:text-sm"
                 placeholder={t('searchPlaceholder')}
+                aria-label={t('searchPlaceholder')}
                 value={keyword}
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
