From 91c85698ae22d0726cbd7124e356bc1a7c8aaa9a Mon Sep 17 00:00:00 2001
From: Doug Richar <drichar@gmail.com>
Date: Mon, 30 Sep 2024 14:19:50 -0400
Subject: [PATCH] fix(ui): enhance overall accessibility and ARIA support
 (#289)

* fix(ui): enhance overall accessibility and ARIA support

- Add ARIA labels and roles to form inputs and buttons
- Enhance color contrast for text elements in dark mode
- Improve semantic structure of headings in card components
- Update `InfoPopover` for better screen reader support
- Refactor form fields in `AddValidatorForm` for accessibility
- Adjust text colors in `Footer` for better visibility

* fix(ui): add ARIA labels to Select components

- Add aria-label attributes to `SelectTrigger` components in:
  - AddValidatorForm
  - NodeSelect
  - SelectAccount
  - UnstakeModal
  - EditEntryGating
  - StakingDetails
- Update placeholder text in `UnstakeModal`'s `SelectValue`
---
 ui/src/components/AddPoolModal.tsx            |   6 +-
 ui/src/components/AddStakeModal.tsx           |   4 +-
 ui/src/components/AddValidatorForm.tsx        | 138 +++++++++++-------
 ui/src/components/AssetLookup.tsx             |   6 +-
 ui/src/components/Footer.tsx                  |   2 +-
 ui/src/components/InfoPopover.tsx             |  18 ++-
 ui/src/components/NfdAvatar.tsx               |   9 +-
 ui/src/components/NfdLookup.tsx               |   3 +
 ui/src/components/NfdThumbnail.tsx            |   2 +-
 ui/src/components/NodeSelect.tsx              |   2 +-
 ui/src/components/SelectAccount.tsx           |   2 +-
 ui/src/components/UnstakeModal.tsx            |  13 +-
 .../components/ValidatorDetails/Details.tsx   |   2 +-
 .../EditCommissionAccount.tsx                 |   3 +-
 .../ValidatorDetails/EditEntryGating.tsx      |  57 ++++++--
 .../ValidatorDetails/EditManagerAccount.tsx   |   7 +-
 .../ValidatorDetails/EditNfdForInfo.tsx       |  10 +-
 .../ValidatorDetails/EditRewardPerPayout.tsx  |   4 +-
 .../ValidatorDetails/EditSunsettingInfo.tsx   |  25 +++-
 .../ValidatorDetails/Highlights.tsx           |  16 +-
 .../ValidatorDetails/LinkPoolToNfdModal.tsx   |   4 +
 .../ValidatorDetails/StakingDetails.tsx       |   8 +-
 ui/src/components/ValidatorTable.tsx          |  11 +-
 ui/src/components/ui/badge.tsx                |   2 +-
 ui/src/components/ui/button.tsx               |   2 +-
 ui/src/components/ui/card.tsx                 |  10 +-
 ui/src/components/ui/select.tsx               |   2 +-
 27 files changed, 254 insertions(+), 114 deletions(-)

diff --git a/ui/src/components/AddPoolModal.tsx b/ui/src/components/AddPoolModal.tsx
index a9de8b70..43bc3b8e 100644
--- a/ui/src/components/AddPoolModal.tsx
+++ b/ui/src/components/AddPoolModal.tsx
@@ -484,11 +484,15 @@ export function AddPoolModal({
                       hidden: !showRewardTokenInfo,
                     })}
                   />
-                  <FormLabel className={cn({ 'text-muted-foreground/50': currentStep < 3 })}>
+                  <FormLabel
+                    htmlFor="link-pool-to-nfd-input"
+                    className={cn({ 'text-muted-foreground/50': currentStep < 3 })}
+                  >
                     Link Pool to NFD
                   </FormLabel>
                   <CollapsibleContent className="space-y-2">
                     <NfdLookup
+                      id="link-pool-to-nfd-input"
                       form={form}
                       name="nfdToLink"
                       nfd={nfdToLink}
diff --git a/ui/src/components/AddStakeModal.tsx b/ui/src/components/AddStakeModal.tsx
index 1d0de22f..5e8c23a1 100644
--- a/ui/src/components/AddStakeModal.tsx
+++ b/ui/src/components/AddStakeModal.tsx
@@ -529,11 +529,13 @@ export function AddStakeModal({
                 name="amountToStake"
                 render={({ field }) => (
                   <FormItem className="w-2/3">
-                    <FormLabel>Amount to Stake</FormLabel>
+                    <FormLabel htmlFor="amount-to-stake-input">Amount to Stake</FormLabel>
                     <FormControl>
                       <div className="relative">
                         <Input
+                          id="amount-to-stake-input"
                           className="pr-16"
+                          placeholder="0.000000"
                           {...field}
                           onChange={(e) => {
                             field.onChange(e) // Inform react-hook-form of the change
diff --git a/ui/src/components/AddValidatorForm.tsx b/ui/src/components/AddValidatorForm.tsx
index 022ea690..daa4f1dc 100644
--- a/ui/src/components/AddValidatorForm.tsx
+++ b/ui/src/components/AddValidatorForm.tsx
@@ -375,9 +375,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="owner"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="owner-input">
                       Owner account
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Owner account">
                         Account that controls config (cold wallet recommended)
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -385,14 +385,16 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <div className="flex items-center gap-x-3">
                       <FormControl>
                         <Input
-                          className="font-mono"
-                          placeholder=""
+                          id="owner-input"
+                          className="font-mono placeholder:font-sans"
+                          placeholder="Enter owner account address"
                           autoComplete="new-password"
                           spellCheck="false"
                           {...field}
                         />
                       </FormControl>
                       <Button
+                        type="button"
                         size="sm"
                         variant="outline"
                         onClick={(e) => {
@@ -400,7 +402,10 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                           form.setValue('owner', activeAddress!, { shouldValidate: true })
                         }}
                       >
-                        <WalletMinimal className="hidden mr-2 h-4 w-4 opacity-75 sm:inline" />
+                        <WalletMinimal
+                          className="hidden mr-2 h-4 w-4 opacity-75 sm:inline"
+                          aria-hidden="true"
+                        />
                         Autofill
                       </Button>
                     </div>
@@ -414,9 +419,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="manager"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="manager-input">
                       Manager account
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Manager account">
                         Account that triggers payouts and keyreg transactions (must sign
                         transactions)
                       </InfoPopover>
@@ -425,14 +430,16 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <div className="flex items-center gap-x-3">
                       <FormControl>
                         <Input
-                          className="font-mono"
-                          placeholder=""
+                          id="manager-input"
+                          className="font-mono placeholder:font-sans"
+                          placeholder="Enter manager account address"
                           autoComplete="new-password"
                           spellCheck="false"
                           {...field}
                         />
                       </FormControl>
                       <Button
+                        type="button"
                         size="sm"
                         variant="outline"
                         onClick={(e) => {
@@ -440,7 +447,10 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                           form.setValue('manager', activeAddress!, { shouldValidate: true })
                         }}
                       >
-                        <WalletMinimal className="hidden mr-2 h-4 w-4 opacity-75 sm:inline" />
+                        <WalletMinimal
+                          className="hidden mr-2 h-4 w-4 opacity-75 sm:inline"
+                          aria-hidden="true"
+                        />
                         Autofill
                       </Button>
                     </div>
@@ -454,9 +464,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="validatorCommissionAddress"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="commission-input">
                       Commission account
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Commission account">
                         Account that receives validator commission payments
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -464,14 +474,16 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <div className="flex items-center gap-x-3">
                       <FormControl>
                         <Input
-                          className="font-mono"
-                          placeholder=""
+                          id="commission-input"
+                          className="font-mono placeholder:font-sans"
+                          placeholder="Enter commission account address"
                           autoComplete="new-password"
                           spellCheck="false"
                           {...field}
                         />
                       </FormControl>
                       <Button
+                        type="button"
                         size="sm"
                         variant="outline"
                         onClick={(e) => {
@@ -481,7 +493,10 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                           })
                         }}
                       >
-                        <WalletMinimal className="hidden mr-2 h-4 w-4 opacity-75 sm:inline" />
+                        <WalletMinimal
+                          className="hidden mr-2 h-4 w-4 opacity-75 sm:inline"
+                          aria-hidden="true"
+                        />
                         Autofill
                       </Button>
                     </div>
@@ -498,9 +513,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="minEntryStake"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="min-entry-stake-input">
                       Minimum entry stake
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Minimum entry stake">
                         Minimum stake required to enter a pool
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -508,9 +523,18 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <FormControl>
                       <div className="relative">
                         <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                          <AlgoSymbol verticalOffset={1} className="text-muted-foreground" />
+                          <AlgoSymbol
+                            verticalOffset={1}
+                            className="text-muted-foreground"
+                            aria-hidden="true"
+                          />
                         </div>
-                        <Input className="pl-7" placeholder="1000" {...field} />
+                        <Input
+                          id="min-entry-stake-input"
+                          className="pl-7"
+                          placeholder="0.000000"
+                          {...field}
+                        />
                       </div>
                     </FormControl>
                     <FormMessage>{errors.minEntryStake?.message}</FormMessage>
@@ -523,9 +547,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="epochRoundLength"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="epoch-length-input">
                       Epoch length
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Epoch length">
                         Frequency of rewards payouts, in blocks. If a timeframe is selected, it will
                         be converted to blocks based on the current average block time (approx.{' '}
                         {blockTime.secs} seconds).
@@ -535,13 +559,17 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <FormControl>
                       <div className="flex items-center">
                         <Input
+                          id="epoch-length-input"
                           className="rounded-r-none rounded-l-md focus:z-[2]"
-                          placeholder=""
+                          placeholder={`Enter ${epochTimeframe}`}
                           {...field}
                         />
                         <Select value={epochTimeframe} onValueChange={setEpochTimeframe}>
                           <FormControl>
-                            <SelectTrigger className="w-[11rem] rounded-r-md rounded-l-none -ml-px">
+                            <SelectTrigger
+                              className="w-[11rem] rounded-r-md rounded-l-none -ml-px"
+                              aria-label="Select timeframe"
+                            >
                               <SelectValue placeholder="Select timeframe" />
                             </SelectTrigger>
                           </FormControl>
@@ -584,15 +612,15 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="percentToValidator"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
+                    <FormLabel htmlFor="commission-percent-input">
                       Commission percent
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Commission percent">
                         Payout percentage w/ up to four decimals (e.g., 5.0001)
                       </InfoPopover>
                       <span className="text-primary">*</span>
                     </FormLabel>
                     <FormControl>
-                      <Input placeholder="5.0000" {...field} />
+                      <Input id="commission-percent-input" placeholder="0.0000" {...field} />
                     </FormControl>
                     <FormMessage>{errors.percentToValidator?.message}</FormMessage>
                   </FormItem>
@@ -606,7 +634,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                   <FormItem>
                     <FormLabel>
                       Pools per node
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Pools per node">
                         Number of pools to allow per node (max of 3 is recommended)
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -614,7 +642,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <FormControl>
                       <Select value={field.value} onValueChange={field.onChange}>
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger aria-label="Select number of pools">
                             <SelectValue placeholder="Select number of pools" />
                           </SelectTrigger>
                         </FormControl>
@@ -639,9 +667,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="nfdForInfo"
                 render={({ field }) => (
                   <FormItem className="sm:col-span-2">
-                    <FormLabel>
+                    <FormLabel htmlFor="nfd-for-info-input">
                       Associated NFD
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Associated NFD">
                         NFD which the validator uses to describe their validator pool (optional)
                       </InfoPopover>
                     </FormLabel>
@@ -649,10 +677,11 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                       <div className="flex-1 relative">
                         <FormControl>
                           <Input
+                            id="nfd-for-info-input"
                             className={cn(
                               isFetchingNfdForInfo || nfdForInfoAppId > 0 ? 'pr-10' : '',
                             )}
-                            placeholder=""
+                            placeholder="Enter NFD name"
                             autoComplete="new-password"
                             spellCheck="false"
                             {...field}
@@ -738,6 +767,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
               </p>
               <AssetLookup
                 form={form}
+                id="reward-token-input"
                 name="rewardTokenId"
                 label="Asset ID"
                 asset={rewardToken}
@@ -752,9 +782,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="rewardPerPayout"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Amount per payout</FormLabel>
+                    <FormLabel htmlFor="reward-per-payout-input">Amount per payout</FormLabel>
                     <FormControl>
-                      <Input placeholder="" {...field} />
+                      <Input id="reward-per-payout-input" placeholder="0.0" {...field} />
                     </FormControl>
                     <FormDescription>Enter amount in whole units (not base units)</FormDescription>
                     <FormMessage>{errors.rewardPerPayout?.message}</FormMessage>
@@ -775,7 +805,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                   <FormItem>
                     <FormLabel>
                       Gating type
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Gating type">
                         Require stakers to hold a qualified asset to enter pool (optional)
                       </InfoPopover>
                     </FormLabel>
@@ -804,7 +834,7 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                         }}
                       >
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger aria-label="Select asset gating type">
                             <SelectValue placeholder="Select asset gating type" />
                           </SelectTrigger>
                         </FormControl>
@@ -831,15 +861,19 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="entryGatingAddress"
                 render={({ field }) => (
                   <FormItem className={cn({ hidden: !showCreatorAddressField })}>
-                    <FormLabel>
+                    <FormLabel htmlFor="gating-address-input">
                       Asset creator account
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Asset creator account">
                         Must hold asset created by this account to enter pool
                       </InfoPopover>
                       <span className="text-primary">*</span>
                     </FormLabel>
                     <FormControl>
-                      <Input placeholder="" {...field} />
+                      <Input
+                        id="gating-address-input"
+                        placeholder="Enter creator account address"
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage>{errors.entryGatingAddress?.message}</FormMessage>
                   </FormItem>
@@ -851,12 +885,16 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                   <div key={field.id} className="flex items-end">
                     <AssetLookup
                       form={form}
+                      id={`gating-asset-${index}-input`}
                       name={`entryGatingAssets.${index}.value`}
                       className="flex-1"
                       label={
-                        <FormLabel className={cn(index !== 0 && 'sr-only')}>
+                        <FormLabel
+                          htmlFor={`gating-asset-${index}-input`}
+                          className={cn(index !== 0 && 'sr-only')}
+                        >
                           Asset ID
-                          <InfoPopover className={infoPopoverClassName}>
+                          <InfoPopover className={infoPopoverClassName} label="Asset ID">
                             Must hold asset with this ID to enter pool
                           </InfoPopover>
                           <span className="text-primary">*</span>
@@ -911,9 +949,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="entryGatingNfdCreator"
                 render={({ field }) => (
                   <FormItem className={cn({ hidden: !showCreatorNfdField })}>
-                    <FormLabel>
+                    <FormLabel htmlFor="gating-nfd-creator-input">
                       Asset creator NFD
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Asset creator NFD">
                         Must hold asset created by an account linked to this NFD to enter pool
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -921,8 +959,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                     <div className="relative">
                       <FormControl>
                         <Input
+                          id="gating-nfd-creator-input"
                           className={cn(isFetchingNfdCreator || nfdCreatorAppId > 0 ? 'pr-10' : '')}
-                          placeholder=""
+                          placeholder="Enter NFD name"
                           autoComplete="new-password"
                           spellCheck="false"
                           {...field}
@@ -971,9 +1010,9 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                 name="entryGatingNfdParent"
                 render={({ field }) => (
                   <FormItem className={cn({ hidden: !showParentNfdField })}>
-                    <FormLabel>
+                    <FormLabel htmlFor="gating-nfd-parent-input">
                       Root/parent NFD
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Root/parent NFD">
                         Must hold a segment of this root/parent NFD to enter pool
                       </InfoPopover>
                       <span className="text-primary">*</span>
@@ -982,11 +1021,12 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                       <div className="flex-1 relative">
                         <FormControl>
                           <Input
+                            id="gating-nfd-parent-input"
                             className={cn(
                               '',
                               isFetchingNfdParent || nfdParentAppId > 0 ? 'pr-10' : '',
                             )}
-                            placeholder=""
+                            placeholder="Enter NFD name"
                             autoComplete="new-password"
                             spellCheck="false"
                             {...field}
@@ -1069,14 +1109,14 @@ export function AddValidatorForm({ constraints }: AddValidatorFormProps) {
                   <FormItem
                     className={cn('sm:col-start-2 sm:col-end-3', { hidden: !showMinBalanceField })}
                   >
-                    <FormLabel>
+                    <FormLabel htmlFor="gating-asset-min-balance-input">
                       Minimum balance
-                      <InfoPopover className={infoPopoverClassName}>
+                      <InfoPopover className={infoPopoverClassName} label="Minimum balance">
                         Optional minimum required balance of the entry gating asset.
                       </InfoPopover>
                     </FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <Input id="gating-asset-min-balance-input" placeholder="0.0" {...field} />
                     </FormControl>
                     <FormDescription>No minimum if left blank</FormDescription>
                     <FormMessage>{errors.gatingAssetMinBalance?.message}</FormMessage>
diff --git a/ui/src/components/AssetLookup.tsx b/ui/src/components/AssetLookup.tsx
index 78cab672..ea10f06b 100644
--- a/ui/src/components/AssetLookup.tsx
+++ b/ui/src/components/AssetLookup.tsx
@@ -18,6 +18,7 @@ interface AssetLookupProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > {
   form: UseFormReturn<TFieldValues>
+  id: string
   name: TName
   asset: Asset | null
   setAsset: (asset: Asset | null) => void
@@ -33,6 +34,7 @@ export function AssetLookup<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   form,
+  id,
   name,
   asset,
   setAsset,
@@ -100,7 +102,7 @@ export function AssetLookup<
 
   const renderLabel = () => {
     if (typeof label === 'string') {
-      return <FormLabel>{label}</FormLabel>
+      return <FormLabel htmlFor={id}>{label}</FormLabel>
     }
 
     if (label) {
@@ -121,9 +123,11 @@ export function AssetLookup<
             <div className="flex-1 relative">
               <FormControl>
                 <Input
+                  id={id}
                   className={cn(isFetching || asset ? 'pr-28' : '')}
                   autoComplete="new-password"
                   spellCheck="false"
+                  placeholder="Enter asset ID"
                   {...field}
                   onChange={(e) => {
                     field.onChange(e) // Inform react-hook-form of the change
diff --git a/ui/src/components/Footer.tsx b/ui/src/components/Footer.tsx
index 133cd84e..33767c2b 100644
--- a/ui/src/components/Footer.tsx
+++ b/ui/src/components/Footer.tsx
@@ -52,7 +52,7 @@ export function Footer() {
           ))}
         </div>
         <div className="mt-8 md:order-1 md:mt-0">
-          <p className="text-center text-sm leading-5 text-stone-500">
+          <p className="text-center text-sm leading-5 text-stone-600 dark:text-stone-400">
             Réti Pooling v{__APP_VERSION__} <span className="mx-1 opacity-50">|</span>{' '}
             <a
               href="https://github.com/TxnLab/reti"
diff --git a/ui/src/components/InfoPopover.tsx b/ui/src/components/InfoPopover.tsx
index 7f02eb14..6da4db02 100644
--- a/ui/src/components/InfoPopover.tsx
+++ b/ui/src/components/InfoPopover.tsx
@@ -6,15 +6,25 @@ import { cn } from '@/utils/ui'
 interface InfoPopoverProps extends PopoverContentProps {
   children?: React.ReactNode
   className?: string
+  label: string
 }
 
-export function InfoPopover({ children, className, ...contentProps }: InfoPopoverProps) {
+export function InfoPopover({ children, className, label, ...contentProps }: InfoPopoverProps) {
   return (
     <Popover>
-      <PopoverTrigger className={cn('text-muted-foreground hover:text-foreground', className)}>
-        <CircleHelp className="h-4 w-4 sm:h-3 sm:w-3" />
+      <PopoverTrigger
+        className={cn('text-muted-foreground hover:text-foreground', className)}
+        aria-label={`Info: ${label}`}
+      >
+        <CircleHelp className="h-4 w-4 sm:h-3 sm:w-3" aria-hidden="true" />
       </PopoverTrigger>
-      <PopoverContent side="top" sideOffset={8} className="text-sm" {...contentProps}>
+      <PopoverContent
+        side="top"
+        sideOffset={8}
+        className="text-sm"
+        role="tooltip"
+        {...contentProps}
+      >
         {children}
       </PopoverContent>
     </Popover>
diff --git a/ui/src/components/NfdAvatar.tsx b/ui/src/components/NfdAvatar.tsx
index b8c867f4..39e78309 100644
--- a/ui/src/components/NfdAvatar.tsx
+++ b/ui/src/components/NfdAvatar.tsx
@@ -6,12 +6,17 @@ import { getNfdAvatarUrl } from '@/utils/nfd'
 interface NfdAvatarProps {
   nfd: Nfd
   className?: string
+  alt?: string
 }
 
-const NfdAvatar: React.FC<NfdAvatarProps> = React.memo(function NfdAvatar({ nfd, className = '' }) {
+const NfdAvatar: React.FC<NfdAvatarProps> = React.memo(function NfdAvatar({
+  nfd,
+  className = '',
+  alt,
+}) {
   return (
     <Avatar className={className}>
-      <AvatarImage src={getNfdAvatarUrl(nfd)} alt={nfd.name} />
+      <AvatarImage src={getNfdAvatarUrl(nfd)} alt={alt || nfd.name} />
     </Avatar>
   )
 })
diff --git a/ui/src/components/NfdLookup.tsx b/ui/src/components/NfdLookup.tsx
index 642e2edd..60e75c9b 100644
--- a/ui/src/components/NfdLookup.tsx
+++ b/ui/src/components/NfdLookup.tsx
@@ -25,6 +25,7 @@ interface NfdLookupProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > {
   form: UseFormReturn<TFieldValues>
+  id: string
   name: TName
   nfd: Nfd | null
   setNfd: (nfd: Nfd | null) => void
@@ -42,6 +43,7 @@ export function NfdLookup<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   form,
+  id,
   name,
   nfd,
   setNfd,
@@ -143,6 +145,7 @@ export function NfdLookup<
             <div className="flex-1 relative">
               <FormControl>
                 <Input
+                  id={id}
                   className={cn(isFetchingNfd || nfd ? 'pr-10' : '')}
                   placeholder=""
                   autoComplete="new-password"
diff --git a/ui/src/components/NfdThumbnail.tsx b/ui/src/components/NfdThumbnail.tsx
index 8bc155fc..eaacbe04 100644
--- a/ui/src/components/NfdThumbnail.tsx
+++ b/ui/src/components/NfdThumbnail.tsx
@@ -48,7 +48,7 @@ const NfdThumbnailBase = React.memo(
     const renderChildren = () => (
       <>
         <div className="flex-shrink-0">
-          <NfdAvatar nfd={nfd} className="h-6 w-6" />
+          <NfdAvatar nfd={nfd} className="h-6 w-6" alt="" />
         </div>
         <div className={cn({ truncate })}>{nfd.name}</div>
       </>
diff --git a/ui/src/components/NodeSelect.tsx b/ui/src/components/NodeSelect.tsx
index a3e4c61c..0cd4d9fd 100644
--- a/ui/src/components/NodeSelect.tsx
+++ b/ui/src/components/NodeSelect.tsx
@@ -17,7 +17,7 @@ interface NodeSelectProps {
 export function NodeSelect({ nodesInfo, value, onValueChange }: NodeSelectProps) {
   return (
     <Select onValueChange={onValueChange} value={value}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[180px]" aria-label="Select a node">
         <SelectValue placeholder="Select a node" />
       </SelectTrigger>
       <SelectContent>
diff --git a/ui/src/components/SelectAccount.tsx b/ui/src/components/SelectAccount.tsx
index 63e42321..12be77a9 100644
--- a/ui/src/components/SelectAccount.tsx
+++ b/ui/src/components/SelectAccount.tsx
@@ -17,7 +17,7 @@ interface SelectAccountProps {
 export function SelectAccount({ accounts, activeAccount, onValueChange }: SelectAccountProps) {
   return (
     <Select value={activeAccount?.address} onValueChange={onValueChange}>
-      <SelectTrigger className="w-[180px] bg-background/50">
+      <SelectTrigger className="w-[180px] bg-background/50" aria-label="Select an account">
         <SelectValue placeholder="Select account" />
       </SelectTrigger>
       <SelectContent>
diff --git a/ui/src/components/UnstakeModal.tsx b/ui/src/components/UnstakeModal.tsx
index 83a83dc9..522fc9d1 100644
--- a/ui/src/components/UnstakeModal.tsx
+++ b/ui/src/components/UnstakeModal.tsx
@@ -281,8 +281,8 @@ export function UnstakeModal({ validator, setValidator, stakesByValidator }: Uns
                   ) : (
                     <>
                       <Select onValueChange={handleSetSelectedPool} value={selectedPoolId}>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a verified email to display" />
+                        <SelectTrigger aria-label="Select a pool">
+                          <SelectValue placeholder="Select a pool" />
                         </SelectTrigger>
                         <SelectContent>
                           {stakerPoolsData
@@ -315,10 +315,15 @@ export function UnstakeModal({ validator, setValidator, stakesByValidator }: Uns
                     name="amountToUnstake"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Amount to Unstake</FormLabel>
+                        <FormLabel htmlFor="amount-to-unstake-input">Amount to Unstake</FormLabel>
                         <FormControl>
                           <div className="relative">
-                            <Input className="pr-16" {...field} />
+                            <Input
+                              id="amount-to-unstake-input"
+                              className="pr-16"
+                              placeholder="0.000000"
+                              {...field}
+                            />
                             <Button
                               type="button"
                               size="sm"
diff --git a/ui/src/components/ValidatorDetails/Details.tsx b/ui/src/components/ValidatorDetails/Details.tsx
index 36b1fa19..6036bbee 100644
--- a/ui/src/components/ValidatorDetails/Details.tsx
+++ b/ui/src/components/ValidatorDetails/Details.tsx
@@ -136,7 +136,7 @@ export function Details({ validator }: DetailsProps) {
     <div className="grid gap-4 lg:grid-cols-2">
       <Card className="lg:col-span-3">
         <CardHeader>
-          <CardTitle>Validator Details</CardTitle>
+          <CardTitle as="h2">Validator Details</CardTitle>
         </CardHeader>
         <CardContent className="w-full">
           <div className="border-t border-foreground-muted">
diff --git a/ui/src/components/ValidatorDetails/EditCommissionAccount.tsx b/ui/src/components/ValidatorDetails/EditCommissionAccount.tsx
index 864c3503..81864d34 100644
--- a/ui/src/components/ValidatorDetails/EditCommissionAccount.tsx
+++ b/ui/src/components/ValidatorDetails/EditCommissionAccount.tsx
@@ -134,10 +134,11 @@ export function EditCommissionAccount({ validator }: EditCommissionAccountProps)
               name="validatorCommissionAddress"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Commission account</FormLabel>
+                  <FormLabel htmlFor="commission-account-input">Commission account</FormLabel>
                   <div className="flex items-center gap-x-3">
                     <FormControl>
                       <Input
+                        id="commission-account-input"
                         className="font-mono"
                         placeholder=""
                         autoComplete="new-password"
diff --git a/ui/src/components/ValidatorDetails/EditEntryGating.tsx b/ui/src/components/ValidatorDetails/EditEntryGating.tsx
index 9c284d0c..aef92a3a 100644
--- a/ui/src/components/ValidatorDetails/EditEntryGating.tsx
+++ b/ui/src/components/ValidatorDetails/EditEntryGating.tsx
@@ -348,7 +348,10 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                 <FormItem>
                   <FormLabel>
                     Gating type
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Gating type"
+                    >
                       Require stakers to hold a qualified asset to enter pool (optional)
                     </InfoPopover>
                   </FormLabel>
@@ -377,7 +380,7 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                       }}
                     >
                       <FormControl>
-                        <SelectTrigger>
+                        <SelectTrigger aria-label="Select asset gating type">
                           <SelectValue placeholder="Select asset gating type" />
                         </SelectTrigger>
                       </FormControl>
@@ -404,15 +407,23 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
               name="entryGatingAddress"
               render={({ field }) => (
                 <FormItem className={cn({ hidden: !showCreatorAddressField })}>
-                  <FormLabel>
+                  <FormLabel htmlFor="edit-gating-creator-account-input">
                     Asset creator account
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Asset creator account"
+                    >
                       Must hold asset created by this account to enter pool
                     </InfoPopover>
                     <span className="text-primary">*</span>
                   </FormLabel>
                   <FormControl>
-                    <Input className="font-mono" placeholder="" {...field} />
+                    <Input
+                      id="edit-gating-creator-account-input"
+                      className="font-mono placeholder:font-sans"
+                      placeholder="Enter creator account address"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage>{errors.entryGatingAddress?.message}</FormMessage>
                 </FormItem>
@@ -424,12 +435,19 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                 <div key={field.id} className="flex items-end">
                   <AssetLookup
                     form={form}
+                    id={`edit-gating-asset-${index}-input`}
                     name={`entryGatingAssets.${index}.value`}
                     className="flex-1"
                     label={
-                      <FormLabel className={cn(index !== 0 && 'sr-only')}>
+                      <FormLabel
+                        htmlFor={`edit-gating-asset-${index}-input`}
+                        className={cn(index !== 0 && 'sr-only')}
+                      >
                         Asset ID
-                        <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                        <InfoPopover
+                          className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                          label="Asset ID"
+                        >
                           Must hold asset with this ID to enter pool
                         </InfoPopover>
                         <span className="text-primary">*</span>
@@ -482,9 +500,12 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
               name="entryGatingNfdCreator"
               render={({ field }) => (
                 <FormItem className={cn({ hidden: !showCreatorNfdField })}>
-                  <FormLabel>
+                  <FormLabel htmlFor="edit-gating-creator-nfd-input">
                     Asset creator NFD
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Asset creator NFD"
+                    >
                       Must hold asset created by an account linked to this NFD to enter pool
                     </InfoPopover>
                     <span className="text-primary">*</span>
@@ -492,6 +513,7 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                   <div className="relative">
                     <FormControl>
                       <Input
+                        id="edit-gating-creator-nfd-input"
                         className={cn(isFetchingNfdCreator || nfdCreatorAppId > 0 ? 'pr-10' : '')}
                         placeholder=""
                         autoComplete="new-password"
@@ -542,9 +564,12 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
               name="entryGatingNfdParent"
               render={({ field }) => (
                 <FormItem className={cn({ hidden: !showParentNfdField })}>
-                  <FormLabel>
+                  <FormLabel htmlFor="edit-gating-parent-nfd-input">
                     Root/parent NFD
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Root/parent NFD"
+                    >
                       Must hold a segment of this root/parent NFD to enter pool
                     </InfoPopover>
                     <span className="text-primary">*</span>
@@ -553,6 +578,7 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                     <div className="flex-1 relative">
                       <FormControl>
                         <Input
+                          id="edit-gating-parent-nfd-input"
                           className={cn(
                             '',
                             isFetchingNfdParent || nfdParentAppId > 0 ? 'pr-10' : '',
@@ -640,14 +666,17 @@ export function EditEntryGating({ validator }: EditEntryGatingProps) {
                 <FormItem
                   className={cn('sm:col-start-2 sm:col-end-3', { hidden: !showMinBalanceField })}
                 >
-                  <FormLabel>
+                  <FormLabel htmlFor="edit-gating-min-balance-input">
                     Minimum balance
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Minimum balance"
+                    >
                       Optional minimum required balance of the entry gating asset.
                     </InfoPopover>
                   </FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input id="edit-gating-min-balance-input" placeholder="0.000000" {...field} />
                   </FormControl>
                   <FormDescription>No minimum if left blank</FormDescription>
                   <FormMessage>{errors.gatingAssetMinBalance?.message}</FormMessage>
diff --git a/ui/src/components/ValidatorDetails/EditManagerAccount.tsx b/ui/src/components/ValidatorDetails/EditManagerAccount.tsx
index 8e853635..f150c9b3 100644
--- a/ui/src/components/ValidatorDetails/EditManagerAccount.tsx
+++ b/ui/src/components/ValidatorDetails/EditManagerAccount.tsx
@@ -126,12 +126,13 @@ export function EditManagerAccount({ validator }: EditManagerAccountProps) {
               name="manager"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Manager account</FormLabel>
+                  <FormLabel htmlFor="edit-manager-input">Manager account</FormLabel>
                   <div className="flex items-center gap-x-3">
                     <FormControl>
                       <Input
-                        className="font-mono"
-                        placeholder=""
+                        id="edit-manager-input"
+                        className="font-mono placeholder:font-sans"
+                        placeholder="Enter new manager account address"
                         autoComplete="new-password"
                         spellCheck="false"
                         {...field}
diff --git a/ui/src/components/ValidatorDetails/EditNfdForInfo.tsx b/ui/src/components/ValidatorDetails/EditNfdForInfo.tsx
index ee7668d0..d01ae4f9 100644
--- a/ui/src/components/ValidatorDetails/EditNfdForInfo.tsx
+++ b/ui/src/components/ValidatorDetails/EditNfdForInfo.tsx
@@ -203,9 +203,12 @@ export function EditNfdForInfo({ validator }: EditNfdForInfoProps) {
               name="nfdForInfo"
               render={({ field }) => (
                 <FormItem className="sm:col-span-2">
-                  <FormLabel>
+                  <FormLabel htmlFor="edit-nfd-for-info-input">
                     Associated NFD
-                    <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                    <InfoPopover
+                      className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                      label="Associated NFD"
+                    >
                       NFD which the validator uses to describe their validator pool (optional)
                     </InfoPopover>
                   </FormLabel>
@@ -213,8 +216,9 @@ export function EditNfdForInfo({ validator }: EditNfdForInfoProps) {
                     <div className="flex-1 relative">
                       <FormControl>
                         <Input
+                          id="edit-nfd-for-info-input"
                           className={cn(isFetchingNfdForInfo || nfdForInfoAppId > 0 ? 'pr-10' : '')}
-                          placeholder=""
+                          placeholder="Enter NFD name"
                           autoComplete="new-password"
                           spellCheck="false"
                           {...field}
diff --git a/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx b/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx
index b72d8625..61d5809c 100644
--- a/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx
+++ b/ui/src/components/ValidatorDetails/EditRewardPerPayout.tsx
@@ -149,9 +149,9 @@ export function EditRewardPerPayout({ validator }: EditRewardPerPayoutProps) {
               name="rewardPerPayout"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Amount per payout</FormLabel>
+                  <FormLabel htmlFor="edit-reward-per-payout-input">Amount per payout</FormLabel>
                   <FormControl>
-                    <Input placeholder="" {...field} />
+                    <Input id="edit-reward-per-payout-input" placeholder="0.000000" {...field} />
                   </FormControl>
                   <FormDescription>Enter amount in whole units (not base units)</FormDescription>
                   <FormMessage>{errors.rewardPerPayout?.message}</FormMessage>
diff --git a/ui/src/components/ValidatorDetails/EditSunsettingInfo.tsx b/ui/src/components/ValidatorDetails/EditSunsettingInfo.tsx
index d7c30c0f..9cb82e97 100644
--- a/ui/src/components/ValidatorDetails/EditSunsettingInfo.tsx
+++ b/ui/src/components/ValidatorDetails/EditSunsettingInfo.tsx
@@ -151,13 +151,16 @@ export function EditSunsettingInfo({ validator }: EditSunsettingInfoProps) {
               render={({ field }) => (
                 <FormItem className="flex flex-row items-center justify-between gap-x-4 rounded-lg border p-3 shadow-sm">
                   <div className="space-y-0.5">
-                    <FormLabel>Enable Validator Sunset</FormLabel>
+                    <FormLabel htmlFor="edit-enable-sunsetting-switch">
+                      Enable Validator Sunset
+                    </FormLabel>
                     <FormDescription>
                       Set a date after which stake can no longer be added to this validator
                     </FormDescription>
                   </div>
                   <FormControl>
                     <Switch
+                      id="edit-enable-sunsetting-switch"
                       checked={field.value}
                       onCheckedChange={(e) => {
                         field.onChange(e)
@@ -183,7 +186,10 @@ export function EditSunsettingInfo({ validator }: EditSunsettingInfoProps) {
                 name="sunsettingOn"
                 render={({ field }) => (
                   <FormItem className="col-span-3 sm:col-auto">
-                    <FormLabel className={cn({ 'pointer-events-none': !$enableSunset })}>
+                    <FormLabel
+                      htmlFor="edit-sunsetting-on-input"
+                      className={cn({ 'pointer-events-none': !$enableSunset })}
+                    >
                       Sunset date
                     </FormLabel>
                     <div className="flex items-center gap-x-3">
@@ -209,6 +215,7 @@ export function EditSunsettingInfo({ validator }: EditSunsettingInfoProps) {
                         </PopoverTrigger>
                         <PopoverContent className="w-auto p-0" align="start">
                           <Calendar
+                            id="edit-sunsetting-on-input"
                             mode="single"
                             defaultMonth={field.value}
                             selected={field.value}
@@ -230,14 +237,22 @@ export function EditSunsettingInfo({ validator }: EditSunsettingInfoProps) {
                 name="sunsettingTo"
                 render={({ field }) => (
                   <FormItem className="col-span-2 sm:col-auto">
-                    <FormLabel>
+                    <FormLabel htmlFor="edit-sunsetting-to-input">
                       Migrate to
-                      <InfoPopover className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0">
+                      <InfoPopover
+                        className="mx-1.5 relative top-0.5 sm:mx-1 sm:top-0"
+                        label="Migrate to Validator ID"
+                      >
                         Validator ID that stakers should migrate to, if known (optional)
                       </InfoPopover>
                     </FormLabel>
                     <FormControl>
-                      <Input placeholder="" disabled={!$enableSunset} {...field} />
+                      <Input
+                        id="edit-sunsetting-to-input"
+                        placeholder="Enter Validator ID"
+                        disabled={!$enableSunset}
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage>{errors.sunsettingTo?.message}</FormMessage>
                   </FormItem>
diff --git a/ui/src/components/ValidatorDetails/Highlights.tsx b/ui/src/components/ValidatorDetails/Highlights.tsx
index 898bd547..830945ea 100644
--- a/ui/src/components/ValidatorDetails/Highlights.tsx
+++ b/ui/src/components/ValidatorDetails/Highlights.tsx
@@ -44,7 +44,9 @@ export function Highlights({ validator, constraints }: HighlightsProps) {
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Staked</CardTitle>
+            <CardTitle as="h2" className="text-sm font-medium">
+              Total Staked
+            </CardTitle>
             <Coins className="h-5 w-5 text-muted-foreground" />
           </CardHeader>
           <CardContent>
@@ -61,7 +63,9 @@ export function Highlights({ validator, constraints }: HighlightsProps) {
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Stakers</CardTitle>
+            <CardTitle as="h2" className="text-sm font-medium">
+              Stakers
+            </CardTitle>
             <Users className="h-5 w-5 text-muted-foreground" />
           </CardHeader>
           <CardContent>
@@ -72,7 +76,9 @@ export function Highlights({ validator, constraints }: HighlightsProps) {
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Pools</CardTitle>
+            <CardTitle as="h2" className="text-sm font-medium">
+              Pools
+            </CardTitle>
             <svg
               viewBox="0 0 576 512"
               className="h-5 w-5 text-muted-foreground"
@@ -100,7 +106,9 @@ export function Highlights({ validator, constraints }: HighlightsProps) {
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Commission</CardTitle>
+            <CardTitle as="h2" className="text-sm font-medium">
+              Commission
+            </CardTitle>
             <Percent className="h-5 w-5 text-muted-foreground" />
           </CardHeader>
           <CardContent>
diff --git a/ui/src/components/ValidatorDetails/LinkPoolToNfdModal.tsx b/ui/src/components/ValidatorDetails/LinkPoolToNfdModal.tsx
index 245cc7cf..385c9293 100644
--- a/ui/src/components/ValidatorDetails/LinkPoolToNfdModal.tsx
+++ b/ui/src/components/ValidatorDetails/LinkPoolToNfdModal.tsx
@@ -137,7 +137,11 @@ export function LinkPoolToNfdModal({
         <div>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(handleLinkNfd)}>
+              <label htmlFor="link-pool-to-nfd-input" className="sr-only">
+                NFD Name
+              </label>
               <NfdLookup
+                id="link-pool-to-nfd-input"
                 form={form}
                 name="nfdName"
                 nfd={nfd}
diff --git a/ui/src/components/ValidatorDetails/StakingDetails.tsx b/ui/src/components/ValidatorDetails/StakingDetails.tsx
index bfad1392..50fcaa9d 100644
--- a/ui/src/components/ValidatorDetails/StakingDetails.tsx
+++ b/ui/src/components/ValidatorDetails/StakingDetails.tsx
@@ -271,7 +271,7 @@ export function StakingDetails({ validator, constraints, stakesByValidator }: St
                 </dt>
                 <dd className="flex items-center gap-x-2 text-sm leading-6">
                   <div className="w-full mt-1">
-                    <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">
+                    <p className="text-tremor-default text-stone-500 dark:text-stone-400 flex items-center justify-between">
                       <span>
                         <AlgoDisplayAmount
                           amount={validator.state.totalAlgoStaked}
@@ -419,11 +419,11 @@ export function StakingDetails({ validator, constraints, stakesByValidator }: St
     <>
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-start justify-between gap-x-2">
-            <span>Staking Details</span>
+          <CardTitle as="h2" className="flex items-start justify-between gap-x-2">
+            Staking Details
             {poolsInfo.length > 0 && (
               <Select value={selectedPool} onValueChange={handleSelectValueChange}>
-                <SelectTrigger className="-my-2.5 w-[120px]">
+                <SelectTrigger className="-my-2.5 w-[120px]" aria-label="Select a pool">
                   <SelectValue placeholder="Select a pool" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/ui/src/components/ValidatorTable.tsx b/ui/src/components/ValidatorTable.tsx
index 45fbecfc..66f0d972 100644
--- a/ui/src/components/ValidatorTable.tsx
+++ b/ui/src/components/ValidatorTable.tsx
@@ -176,16 +176,17 @@ export function ValidatorTable({
       cell: ({ row }) => {
         return row.getCanExpand() ? (
           <button
+            type="button"
+            aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+            title={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
             data-state={row.getIsExpanded() ? 'open' : 'closed'}
             className="m-0 p-2 cursor-pointer [&[data-state=open]>svg]:rotate-90"
-            {...{
-              onClick: row.getToggleExpandedHandler(),
-            }}
+            onClick={row.getToggleExpandedHandler()}
           >
-            <ChevronRight className="h-5 w-5" />
+            <ChevronRight className="h-5 w-5" aria-hidden="true" />
           </button>
         ) : (
-          <>&nbsp;</>
+          <span aria-hidden="true">&nbsp;</span>
         )
       },
     },
diff --git a/ui/src/components/ui/badge.tsx b/ui/src/components/ui/badge.tsx
index 3fad48c0..53d67eb9 100644
--- a/ui/src/components/ui/badge.tsx
+++ b/ui/src/components/ui/badge.tsx
@@ -8,7 +8,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        default: 'border-transparent bg-primary text-white shadow hover:bg-primary/80',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index 32f326b7..8e07e251 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-white hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
diff --git a/ui/src/components/ui/card.tsx b/ui/src/components/ui/card.tsx
index d009c087..a17563e2 100644
--- a/ui/src/components/ui/card.tsx
+++ b/ui/src/components/ui/card.tsx
@@ -20,9 +20,13 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardHeader.displayName = 'CardHeader'
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
+  ({ className, as: Comp = 'h3', ...props }, ref) => (
+    <Comp
       ref={ref}
       className={cn('font-semibold leading-none tracking-tight', className)}
       {...props}
diff --git a/ui/src/components/ui/select.tsx b/ui/src/components/ui/select.tsx
index 32ab175e..143ff901 100644
--- a/ui/src/components/ui/select.tsx
+++ b/ui/src/components/ui/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <CaretSortIcon className="h-4 w-4 opacity-50" aria-hidden="true" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))