Improve tab navigation flow for accessibility#1359
Improve tab navigation flow for accessibility#1359NorbertLoh merged 3 commits intoCATcher-org:masterfrom
Conversation
Restructured tabindex order to ensure a logical navigation sequence: focus now moves from the issue title to the description field, followed by the severity and type dropdowns, before reaching less important form elements. Enhances usability for keyboard users and improves overall accessibility.
There was a problem hiding this comment.
Pull Request Overview
This PR restructures the tab navigation sequence in the New Issue form, ensuring focus flows from the title to the description editor, then to the severity/type dropdowns for improved keyboard accessibility.
- Adds
tabindex="1"to the issue title input. - Adds
tabindex="2"to the description textarea. - Adds
tabindex="3"to the dropdown component.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/app/phase-bug-reporting/new-issue/new-issue.component.html | Sets tabindex="1" on the title input |
| src/app/shared/comment-editor/comment-editor.component.html | Sets tabindex="2" on the textarea |
| src/app/shared/label-dropdown/label-dropdown.component.html | Sets tabindex="3" on the mat-select |
| <form [formGroup]="dropdownForm"> | ||
| <mat-form-field style="width: 100%"> | ||
| <mat-select | ||
| tabindex="3" |
There was a problem hiding this comment.
Hardcoding a positive tabindex in a reusable component can lead to focus order conflicts if multiple instances appear. Consider making this value configurable via an @input() or relying on the natural DOM order to maintain sequence.
| @@ -13,6 +13,7 @@ | |||
| <mat-form-field appearance="outline" style="width: 100%"> | |||
| <mat-label></mat-label> | |||
There was a problem hiding this comment.
The is empty, leaving the textarea without a visible label for assistive technologies. Add descriptive text inside the label (e.g., "Description") or use an aria-label to improve screen reader accessibility.
| <mat-label></mat-label> | |
| <mat-label>Enter your comment</mat-label> |
| <div class="column left"> | ||
| <mat-form-field> | ||
| <input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256" /> | ||
| <input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256" tabindex="1"/> |
There was a problem hiding this comment.
[nitpick] Using positive tabindex values increases maintenance complexity and can conflict with natural tab order. It's generally better to reorder elements in the DOM to achieve the desired focus flow instead of hardcoding tabindex.
| <input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256" tabindex="1"/> | |
| <input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256"/> |
|
Hi @NorbertLoh, definitely will implement your suggestion. Sorry for any inconvenience but may I ask what may be aligning the git commit message to others mean? Would it be to follow the convention done by the mass majority? |
Alls good. I have left a comment on your other PR with an example 👍 |
|
Yes, will do the same for this pull request after I have implemented in your suggestion. Thank you! |
Added a tabindex for the submit button for better UX as users can now complete the entire flow of reporting an issue faster and without lifting their fingers away from the keyboard
|
@NorbertLoh Now, the tab navigation flow allows user to complete reporting an issue faster and without lifting the fingers away from the keyboard.
|
Restructured tabindex order to ensure a logical navigation sequence: focus now moves from the issue title to the description field, followed by the severity and type dropdowns, then the submit button before reaching less important form elements. Enhances usability for keyboard users and improves overall accessibility.
Summary:
Fixes #1266
Changes Made:
Proposed Commit Message: