Skip to content

Improve tab navigation flow for accessibility #1359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NorbertLoh merged 3 commits into from
Jul 25, 2025
+4 −1
Merged

Improve tab navigation flow for accessibility #1359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf712d3
refactor: improve tab navigation flow for accessibility
Jun 28, 2025
d3dc544
Add Submit button to the main tab navigation flow
Jul 8, 2025
18b71cf
Merge branch 'master' into improve-tab-navigation
e1121208 Jul 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/app/phase-bug-reporting/new-issue/new-issue.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h1 class="mat-display-1 title">New Issue</h1>
<div class="row">
<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"/>
Copy link

Copilot AI Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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.

Suggested change
<input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256" tabindex="1"/>
<input id="title" formControlName="title" matInput placeholder="Title" required maxlength="256"/>

Copilot uses AI. Check for mistakes.
<mat-error *ngIf="title.errors && title.errors['required'] && (title.touched || title.dirty)"> Title required. </mat-error>
<mat-error *ngIf="title.errors && title.errors['whitespace']"> Title cannot contain only whitespaces. </mat-error>
<mat-error *ngIf="title.errors && title.errors['maxlength']"> Title cannot exceed 256 characters. </mat-error>
Expand All @@ -30,6 +30,7 @@ <h1 class="mat-display-1 title">New Issue</h1>
mat-stroked-button
color="primary"
[disabled]="!newIssueForm.valid || isFormPending"
tabindex="4"
>
{{ this.submitButtonText }}
</button>
Expand Down
1 change: 1 addition & 0 deletions src/app/shared/comment-editor/comment-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<mat-form-field appearance="outline" style="width: 100%">
<mat-label></mat-label>
Copy link

Copilot AI Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<mat-label></mat-label>
<mat-label>Enter your comment</mat-label>

Copilot uses AI. Check for mistakes.
<textarea
tabindex="2"
(paste)="onPaste($event)"
(keydown)="onKeyPress($event)"
(beforeinput)="handleBeforeInputChange($event)"
Expand Down
1 change: 1 addition & 0 deletions src/app/shared/label-dropdown/label-dropdown.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<form [formGroup]="dropdownForm">
<mat-form-field style="width: 100%">
<mat-select
tabindex="3"
Copy link

Copilot AI Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
[ngClass]="dropdownTextColor"
formControlName="{{ attributeName }}"
placeholder="{{ this.labelService.getLabelTitle(attributeName) }}"
Expand Down
Loading