fix(a11y): add accessible names to dialog close buttons#1618
Conversation
Modal close buttons rendered only the visible text "X" on a mat-button, so screen reader and voice-control users had no meaningful name to identify or activate them. Convert all 45 dialog close buttons (across 41 modal templates for LND, CLN, Eclair and shared components) to icon buttons with a proper accessible name: - mat-button "X" -> mat-icon-button with a "close" mat-icon - add aria-label="Close dialog" - mark the icon aria-hidden="true" so it is not announced - add type="button" to prevent implicit form submission - drop the positive tabindex; the button now follows natural DOM order Each button keeps its original action untouched ([mat-dialog-close]="false" or (click)="onClose()"). The four "?" info-toggle buttons that share the btn-close-x class are intentionally left unchanged, as they are not close actions. Fixes Ride-The-Lightning#1562
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request standardizes the close buttons across various modals in CLN, Eclair, LND, and shared components by replacing the text 'X' buttons with accessible Material Design close icons (mat-icon-button). The review feedback correctly points out that using fxFlex="5" on these buttons can cause them to squish on smaller screens, distorting the circular ripple and icon. It is recommended to use fxFlex="none" instead to maintain their fixed natural size.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| <span class="page-title">{{alertTitle}}</span> | ||
| </div> | ||
| <button tabindex="6" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button> | ||
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button (click)="onClose()"><mat-icon aria-hidden="true">close</mat-icon></button> |
There was a problem hiding this comment.
Using fxFlex="5" on a mat-icon-button can cause it to squish on smaller screens (e.g., to 16px on a 320px viewport), distorting the circular ripple and icon, and making it extremely difficult to tap. Since mat-icon-button has a fixed natural size, it is better to use fxFlex="none" (which translates to flex: 0 0 auto) to prevent it from shrinking or growing.
<button type="button" aria-label="Close dialog" fxFlex="none" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button (click)="onClose()"><mat-icon aria-hidden="true">close</mat-icon></button>
| <span class="page-title">Send Payment</span> | ||
| </div> | ||
| <button tabindex="8" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button> | ||
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> |
There was a problem hiding this comment.
Using fxFlex="5" on a mat-icon-button can cause it to squish on smaller screens (e.g., to 16px on a 320px viewport), distorting the circular ripple and icon, and making it extremely difficult to tap. Since mat-icon-button has a fixed natural size, it is better to use fxFlex="none" (which translates to flex: 0 0 auto) to prevent it from shrinking or growing.
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> | |
| <button type="button" aria-label="Close dialog" fxFlex="none" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> |
| <span class="page-title">{{sweepAll ? 'Sweep All Funds' : 'Send Funds'}}</span> | ||
| </div> | ||
| <button tabindex="8" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button> | ||
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> |
There was a problem hiding this comment.
Using fxFlex="5" on a mat-icon-button can cause it to squish on smaller screens (e.g., to 16px on a 320px viewport), distorting the circular ripple and icon, and making it extremely difficult to tap. Since mat-icon-button has a fixed natural size, it is better to use fxFlex="none" (which translates to flex: 0 0 auto) to prevent it from shrinking or growing.
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> | |
| <button type="button" aria-label="Close dialog" fxFlex="none" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button [mat-dialog-close]="false"><mat-icon aria-hidden="true">close</mat-icon></button> |
| <span class="page-title">{{data.alertTitle || alertTypeEnum[data.type]}}</span> | ||
| </div> | ||
| <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button> | ||
| <button type="button" aria-label="Close dialog" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button (click)="onClose()"><mat-icon aria-hidden="true">close</mat-icon></button> |
There was a problem hiding this comment.
Using fxFlex="5" on a mat-icon-button can cause it to squish on smaller screens (e.g., to 16px on a 320px viewport), distorting the circular ripple and icon, and making it extremely difficult to tap. Since mat-icon-button has a fixed natural size, it is better to use fxFlex="none" (which translates to flex: 0 0 auto) to prevent it from shrinking or growing.
<button type="button" aria-label="Close dialog" fxFlex="none" fxLayoutAlign="center center" class="btn-close-x p-0" mat-icon-button (click)="onClose()"><mat-icon aria-hidden="true">close</mat-icon></button>
Addresses review feedback on Ride-The-Lightning#1618: a mat-icon-button has a fixed natural size, so keeping it as a flexible flex child with fxFlex="5" could shrink it (down to ~16px on a 320px viewport), distorting the circular ripple/icon and reducing the tap target. Switch the 36 converted close buttons from fxFlex="5" to fxFlex="none" (flex: 0 0 auto) so they retain Material's natural size and never shrink or grow. The CLN send-payment close button has no fxFlex and is unchanged.
1 participant
Modal close buttons rendered only the visible text "X" on a mat-button, so screen reader and voice-control users had no meaningful name to identify or activate them.
Convert all 45 dialog close buttons (across 41 modal templates for LND, CLN, Eclair and shared components) to icon buttons with a proper accessible name:
Each button keeps its original action untouched ([mat-dialog-close]="false" or (click)="onClose()"). The four "?" info-toggle buttons that share the btn-close-x class are intentionally left unchanged, as they are not close actions.
Fixes #1562