GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6360 from kayyrod21/a11y/lighthouse-aria-label

Browse source 
fix(a11y): add accessible names to network selector and toggle buttons
This commit is contained in:
mononaut 2026-03-14 18:59:37 +09:00 • committed by GitHub
commit 7bd9d889fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 54 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/components/blockchain/blockchain.component.html
View file

@ -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>

8
frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
View file

@ -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}">

4
frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
View file

@ -52,6 +52,10 @@ export class LiquidMasterPageComponent implements OnInit, OnDestroy {
});
}
get networkDisplayName(): string {
return this.stateService.networkDisplayName;
}
collapse(): void {
this.navCollapsed = !this.navCollapsed;
}

2
frontend/src/app/components/master-page/master-page.component.html
View file

@ -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}">

4
frontend/src/app/components/master-page/master-page.component.ts
View file

@ -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,

15
frontend/src/app/services/state.service.ts
View file

@ -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 =>