From fc611e03cd7d8ccd9055ec365816c5f415c935bc Mon Sep 17 00:00:00 2001
From: kayyrod21 <kaylee.rodriguez@live.com>
Date: Mon, 2 Mar 2026 19:48:38 -0500
Subject: [PATCH] fix(a11y): add accessible names to network selector and
 toggle buttons

---
 .../blockchain/blockchain.component.html      | 29 +++++++++++++++++--
 .../liquid-master-page.component.html         |  8 ++++-
 .../liquid-master-page.component.ts           |  4 +++
 .../master-page/master-page.component.html    |  2 +-
 .../master-page/master-page.component.ts      |  4 +++
 frontend/src/app/services/state.service.ts    | 15 ++++++++--
 6 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html
index af3bf52b1..8e261aa7c 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -1,4 +1,4 @@
-<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
+<div class="text-center blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
   <div #positionContainer class="position-container" [ngClass]="network ? network : ''" [style]="positionStyle">
     <span>
       <div class="blocks-wrapper">
@@ -10,8 +10,31 @@
         </ng-container>
       </div>
       <div id="divider" [hidden]="pageIndex > 0">
-        <button class="block-display-toggle" (click)="toggleBlockDisplayMode()"><fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon></button>
-        <button class="time-toggle" (click)="toggleTimeDirection()"><fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon></button>
+        <button
+          type="button"
+          class="block-display-toggle"
+          (click)="toggleBlockDisplayMode()"
+          [attr.aria-label]="blockDisplayMode === 'fees'
+            ? 'Switch to displaying block sizes'
+            : 'Switch to displaying total fees per block'"
+          [attr.title]="blockDisplayMode === 'fees'
+            ? 'Switch to displaying block sizes'
+            : 'Switch to displaying total fees per block'">
+          <fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon>
+        </button>
+
+        <button
+          type="button"
+          class="time-toggle"
+          (click)="toggleTimeDirection()"
+          [attr.aria-label]="timeLtr
+            ? 'Switch to displaying newest blocks on the right'
+            : 'Switch to displaying newest blocks on the left'"
+          [attr.title]="timeLtr
+            ? 'Switch to displaying newest blocks on the right'
+            : 'Switch to displaying newest blocks on the left'">
+          <fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon>
+        </button>
       </div>
     </span>
   </div>
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index f98bafff6..13ca303c5 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -45,7 +45,13 @@
   </a>
 
   <div ngbDropdown (window:resize)="onResize()" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.REGTEST_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+    <button
+      ngbDropdownToggle
+      type="button"
+      class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center"
+      aria-haspopup="true"
+      [attr.aria-label]="'Select network. Current: ' + networkDisplayName"
+      [attr.title]="'Select network. Current: ' + networkDisplayName">
       <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'liquid' : network.val" width="20" height="20" viewBox="0 0 125 125"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
index 8605b073e..75f734d44 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
@@ -52,6 +52,10 @@ export class LiquidMasterPageComponent implements OnInit, OnDestroy {
     });
   }
 
+  get networkDisplayName(): string {
+    return this.stateService.networkDisplayName;
+  }
+
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 52092274a..e9e161e8b 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -58,7 +58,7 @@
   </a>
 
   <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="isDropdownVisible">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true" aria-label="Select network">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true" [attr.aria-label]="'Select network. Current: ' + networkDisplayName" [attr.title]="'Select network. Current: ' + networkDisplayName">
       <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index b39f8ec93..68fcef0a7 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -80,6 +80,10 @@ export class MasterPageComponent implements OnInit, OnDestroy {
     this.setDropdownVisibility();
   }
 
+  get networkDisplayName(): string {
+    return this.stateService.networkDisplayName;
+  }
+
   setDropdownVisibility(): void {
     const networks = [
       this.env.TESTNET_ENABLED,
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 592825fdc..1b24fdba6 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -466,7 +466,18 @@ export class StateService {
   networkSupportsLightning() {
     return this.env.LIGHTNING && this.lightningNetworks.includes(this.network);
   }
-
+  get networkDisplayName(): string {
+    const labels: Record<string, string> = {
+      '': 'Mainnet',
+      'signet': 'Signet',
+      'testnet': 'Testnet3',
+      'testnet4': 'Testnet4',
+      'regtest': 'Regtest',
+      'liquid': 'Liquid',
+      'liquidtestnet': 'Liquid Testnet',
+    };
+    return labels[this.network] ?? this.network;
+  }
   getHiddenProp(){
     const prefixes = ['webkit', 'moz', 'ms', 'o'];
     if ('hidden' in document) { return 'hidden'; }
@@ -499,7 +510,6 @@ export class StateService {
   isAnyTestnet(): boolean {
     return ['testnet', 'testnet4', 'signet', 'regtest', 'liquidtestnet'].includes(this.network);
   }
-
   resetChainTip() {
     this.latestBlockHeight = -1;
     this.chainTip$.next(-1);
@@ -528,7 +538,6 @@ export class StateService {
       this.searchFocus$.next(true);
     }
   }
-
   private testIsProdDomain(prodDomains: string[]): boolean {
     const hostname = document.location.hostname;
     return prodDomains.some(domain =>