[A11Y] [High] Form fields missing visible labels for screen readers #1566

Accessibility Issue: Form Fields Missing Visible Labels

WCAG Level: A
Severity: High
Category: Form Accessibility

Issue Description

Multiple form fields (<mat-select>, <input>) within <mat-form-field> containers lack visible <mat-label> elements. This violates WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions). Screen reader users cannot determine the purpose of these form controls.

User Impact

• Affected Users: Screen reader users, users with cognitive disabilities
• Severity: Users cannot understand what information is expected in the form field, making critical functionality inaccessible

Violations Found

File: src/app/shared/components/data-modal/show-pubkey/show-pubkey.component.html

Line: ~20

<mat-form-field fxLayout="column" fxFlex="100" fxFlex.gt-sm="40" fxLayoutAlign="start end">
  <mat-select tabindex="1" [(value)]="selInfoType">
    <!-- Options -->
  </mat-select>
</mat-form-field>

Issue: Info type selector missing label

File: src/app/shared/components/settings/app-settings/app-settings.component.html

Line: ~10

<mat-form-field fxLayout="column" fxLayoutAlign="start start">
  <mat-select autoFocus tabindex="1" name="defaultNode" [(ngModel)]="appConfig.defaultNodeIndex">
    <!-- Options -->
  </mat-select>
</mat-form-field>

Issue: Default node selector missing label

File: src/app/shared/components/horizontal-scroller/horizontal-scroller.component.html

Lines: ~25, ~31

<mat-form-field *ngIf="selScrollRange === scrollRanges[0]" monthlyDate>
  <input #monthlyDt="ngModel" matInput name="monthlyDate" readonly [matDatepicker]="monthlyDatepicker">
  <!-- ... -->
</mat-form-field>

Issue: Date picker inputs missing labels

File: src/app/lnd/on-chain/on-chain-send-modal/on-chain-send-modal.component.html

Lines: Multiple

<mat-form-field fxLayout="column" fxFlex.gt-sm="10">
  <mat-select tabindex="3" [(value)]="selAddressType">
    <!-- Options -->
  </mat-select>
</mat-form-field>

Issue: Address type, transaction type selectors missing labels

Recommended Fix

<!-- Before -->
<mat-form-field fxLayout="column" fxLayoutAlign="start start">
  <mat-select autoFocus tabindex="1" name="defaultNode" [(ngModel)]="appConfig.defaultNodeIndex">
    <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index">
      {{node.lnNode}} ({{node.lnImplementation}})
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- After -->
<mat-form-field fxLayout="column" fxLayoutAlign="start start">
  <mat-label>Default Node</mat-label>
  <mat-select autoFocus name="defaultNode" [(ngModel)]="appConfig.defaultNodeIndex">
    <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index">
      {{node.lnNode}} ({{node.lnImplementation}})
    </mat-option>
  </mat-select>
</mat-form-field>

Changes Made:

1. Add <mat-label> inside each <mat-form-field> with descriptive text
2. Remove positive tabindex values (separate issue [A11Y] [Critical] Positive tabindex values cause unpredictable keyboard navigation #1557)

Additional Instances

Files requiring label additions:

• src/app/shared/components/data-modal/show-pubkey/show-pubkey.component.html - Info type select
• src/app/shared/components/settings/app-settings/app-settings.component.html - Default node select
• src/app/shared/components/horizontal-scroller/horizontal-scroller.component.html - Monthly/yearly date inputs
• src/app/eclair/on-chain/on-chain-send-modal/on-chain-send-modal.component.html - Address type select
• src/app/eclair/transactions/create-invoice-modal/create-invoice.component.html - Time unit select
• src/app/cln/on-chain/on-chain-send-modal/on-chain-send-modal.component.html - Address type select
• src/app/cln/transactions/invoices/create-invoice-modal/create-invoice.component.html - Time unit select
• src/app/lnd/on-chain/on-chain-send-modal/on-chain-send-modal.component.html - Multiple selects
• src/app/lnd/transactions/create-invoice-modal/create-invoice.component.html - Time unit select
• src/app/lnd/peers-channels/channels/close-channel-modal/close-channel.component.html - Close type select
• src/app/lnd/peers-channels/channels/open-channel-modal/open-channel.component.html - Fee type select
• src/app/lnd/peers-channels/channels/bump-fee-modal/bump-fee.component.html - Target conf select

Testing Instructions

1. Open each affected dialog/page in the application
2. Use a screen reader (NVDA/VoiceOver) to navigate to form fields
3. Verify each form field announces its label when focused
4. Confirm labels match the expected input type
5. Test with Lighthouse accessibility audit

Resources

• WCAG 1.3.1 Info and Relationships
• WCAG 3.3.2 Labels or Instructions
• Angular Material Form Field
• WebAIM Form Labels

Acceptance Criteria

• All mat-form-field elements contain mat-label
• Labels are descriptive and match expected input
• Tested with screen reader (NVDA/VoiceOver)
• Lighthouse accessibility audit passes
• Visual appearance unchanged