From 23b1d4adf0a13e0ab7c4798cc4fa11f09408f154 Mon Sep 17 00:00:00 2001 From: Rushikesh Barve <84287593+Rishi943@users.noreply.github.com> Date: Fri, 10 Jul 2026 05:38:38 -0400 Subject: [PATCH] fix(a11y): name icon-only buttons, add keyboard access, fix task tabindex (#8885) * fix(a11y): name icon-only buttons, add keyboard access, fix task tabindex Addresses the three groups from #8826: - Add translated aria-labels to unnamed icon-only buttons (search clear, note/side-nav/feature more_vert triggers, focus-mode close, board edit, track-time dialog suffix buttons); simple-counter buttons use the counter title as their accessible name. Adds one new global key G.MORE_ACTIONS. - Make mouse-only controls keyboard-accessible (role=button, tabindex=0, Enter/Space handlers, aria-expanded where they toggle): formly-collapsible header, worklog week day rows, task detail panel created/completed date editors, and the task time/estimate cell (attributes conditional so parents with subtasks gain no tab stop). - Change task host tabindex from 1 to 0 so tasks no longer jump ahead of all other page content in tab order (WCAG 2.4.3). Fixes #8826 Co-Authored-By: Claude Fable 5 * fix(a11y): import TranslatePipe in focus-mode-overlay FocusModeOverlayComponent's template uses the translate pipe (added aria-label) but the standalone component did not import TranslatePipe, breaking the production AOT build (NG8004). Add it to imports, matching every other component touched in this change. --------- Co-authored-by: Claude Fable 5 Co-authored-by: Johannes Millan --- .../magic-side-nav/nav-item/nav-item.component.html | 3 +++ .../boards/board-panel/board-panel.component.html | 1 + .../focus-mode-overlay/focus-mode-overlay.component.html | 1 + .../focus-mode-overlay/focus-mode-overlay.component.ts | 2 ++ .../dialog-track-time/dialog-track-time.component.html | 2 ++ src/app/features/note/note/note.component.html | 1 + .../simple-counter-button.component.html | 3 +++ .../task-detail-panel/task-detail-panel.component.html | 8 ++++++++ src/app/features/tasks/task/task.component.html | 7 +++++++ src/app/features/tasks/task/task.component.ts | 2 +- .../worklog/worklog-week/worklog-week.component.html | 5 +++++ src/app/pages/search-page/search-page.component.html | 1 + src/app/t.const.ts | 1 + .../formly-collapsible/formly-collapsible.component.html | 5 +++++ src/assets/i18n/en.json | 1 + 15 files changed, 42 insertions(+), 1 deletion(-) diff --git a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.html b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.html index 8c5ff5df7b..3694392bc6 100644 --- a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.html +++ b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.html @@ -38,6 +38,7 @@ #settingsBtn class="additional-btn" mat-icon-button + [attr.aria-label]="T.G.MORE_ACTIONS | translate" > more_vert @@ -81,6 +82,7 @@ #folderSettingsBtn class="additional-btn" mat-icon-button + [attr.aria-label]="T.G.MORE_ACTIONS | translate" > more_vert @@ -148,6 +150,7 @@ #featureSettingsBtn class="additional-btn" mat-icon-button + [attr.aria-label]="T.G.MORE_ACTIONS | translate" > more_vert diff --git a/src/app/features/boards/board-panel/board-panel.component.html b/src/app/features/boards/board-panel/board-panel.component.html index 2f21d1cd57..5954954d53 100644 --- a/src/app/features/boards/board-panel/board-panel.component.html +++ b/src/app/features/boards/board-panel/board-panel.component.html @@ -12,6 +12,7 @@ diff --git a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.html b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.html index 514baafb76..ea4afeca36 100644 --- a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.html +++ b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.html @@ -9,6 +9,7 @@ class="close-btn" mat-icon-button (click)="closeOverlay()" + [attr.aria-label]="T.G.CLOSE | translate" > close diff --git a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.ts b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.ts index 08fe071017..cceb19b08d 100644 --- a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.ts +++ b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.ts @@ -18,6 +18,7 @@ import { FocusModeBreakComponent } from '../focus-mode-break/focus-mode-break.co import { FocusModeService } from '../focus-mode.service'; import { FocusScreen } from '../focus-mode.model'; import { isInputElement } from '../../../util/dom-element'; +import { TranslatePipe } from '@ngx-translate/core'; @Component({ selector: 'focus-mode-overlay', @@ -32,6 +33,7 @@ import { isInputElement } from '../../../util/dom-element'; FocusModeMainComponent, FocusModeSessionDoneComponent, FocusModeBreakComponent, + TranslatePipe, ], }) export class FocusModeOverlayComponent implements OnDestroy { diff --git a/src/app/features/issue/shared/dialog-track-time/dialog-track-time.component.html b/src/app/features/issue/shared/dialog-track-time/dialog-track-time.component.html index cefd094c4a..333441cd06 100644 --- a/src/app/features/issue/shared/dialog-track-time/dialog-track-time.component.html +++ b/src/app/features/issue/shared/dialog-track-time/dialog-track-time.component.html @@ -56,12 +56,14 @@ diff --git a/src/app/features/note/note/note.component.html b/src/app/features/note/note/note.component.html index e481780f36..77fcf385b0 100644 --- a/src/app/features/note/note/note.component.html +++ b/src/app/features/note/note/note.component.html @@ -58,6 +58,7 @@ diff --git a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.html b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.html index 47cded1e8d..47b45c154e 100644 --- a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.html +++ b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.html @@ -10,6 +10,7 @@ (longPress)="edit()" [color]="sc.isOn ? 'accent' : ''" [class.isOn]="sc.isOn" + [attr.aria-label]="sc.title" class="main-btn stopwatch" mat-icon-button > @@ -34,6 +35,7 @@ (click)="toggleCounter()" (contextmenu)="edit($event)" (longPress)="edit()" + [attr.aria-label]="sc.title" class="main-btn" color="" mat-icon-button @@ -68,6 +70,7 @@ [color]="sc.isOn && !isTimeUp() ? 'accent' : ''" [class.isOn]="sc.isOn && !isTimeUp()" [class.isTimeUp]="isTimeUp()" + [attr.aria-label]="sc.title" class="main-btn repeated-countdown" mat-icon-button > diff --git a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.html b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.html index dcd4c92dd8..2d10fbf578 100644 --- a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.html +++ b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.html @@ -361,6 +361,10 @@ class="edit-date-info" [title]="T.G.EDIT | translate" (click)="editCreated()" + (keydown.enter)="editCreated()" + (keydown.space)="$event.preventDefault(); editCreated()" + role="button" + tabindex="0" > Created on {{ task().created | localeDate: 'short' : undefined : locale() }} @@ -369,6 +373,10 @@ class="edit-date-info" [title]="T.G.EDIT | translate" (click)="editCompleted()" + (keydown.enter)="editCompleted()" + (keydown.space)="$event.preventDefault(); editCompleted()" + role="button" + tabindex="0" > Completed on {{ task().doneOn | localeDate: 'short' : undefined : locale() }} diff --git a/src/app/features/tasks/task/task.component.html b/src/app/features/tasks/task/task.component.html index 5b00b934bb..92d56f6c2e 100644 --- a/src/app/features/tasks/task/task.component.html +++ b/src/app/features/tasks/task/task.component.html @@ -56,6 +56,13 @@
diff --git a/src/app/pages/search-page/search-page.component.html b/src/app/pages/search-page/search-page.component.html index 0b288cfb79..0a27ec7b69 100644 --- a/src/app/pages/search-page/search-page.component.html +++ b/src/app/pages/search-page/search-page.component.html @@ -17,6 +17,7 @@ mat-icon-button matSuffix (click)="clearSearch()" + [attr.aria-label]="T.G.CLEAR | translate" > clear diff --git a/src/app/t.const.ts b/src/app/t.const.ts index b795c8e45b..2677f69717 100644 --- a/src/app/t.const.ts +++ b/src/app/t.const.ts @@ -2327,6 +2327,7 @@ const T = { ICON_INP_DESCRIPTION: 'G.ICON_INP_DESCRIPTION', INBOX_PROJECT_TITLE: 'G.INBOX_PROJECT_TITLE', MINUTES: 'G.MINUTES', + MORE_ACTIONS: 'G.MORE_ACTIONS', MOVE_BACKWARD: 'G.MOVE_BACKWARD', MOVE_FORWARD: 'G.MOVE_FORWARD', NEXT: 'G.NEXT', diff --git a/src/app/ui/formly-collapsible/formly-collapsible.component.html b/src/app/ui/formly-collapsible/formly-collapsible.component.html index 59e5b90aa6..c3400a7f15 100644 --- a/src/app/ui/formly-collapsible/formly-collapsible.component.html +++ b/src/app/ui/formly-collapsible/formly-collapsible.component.html @@ -1,5 +1,10 @@
expand_more diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c51dd49868..eadb43d24c 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -2267,6 +2267,7 @@ "ICON_INP_DESCRIPTION": "All UTF-8 emojis are also supported!", "INBOX_PROJECT_TITLE": "Inbox", "MINUTES": "{{m}} minutes", + "MORE_ACTIONS": "More actions", "MOVE_BACKWARD": "Move backward", "MOVE_FORWARD": "Move forward", "NEXT": "Next",