From 974b84d58077678e06ff3de4918ac6f7dd4576d9 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com> Date: Tue, 10 Feb 2026 14:37:32 +0100 Subject: [PATCH] [67399] Fix accessibility issues in Angular templates detected by ESLint (#21339) * Tell eslint to ignore click rule on router links See https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/click-events-have-key-events.md * Pass fixing accessibility issues found by ESLint - fixes failing tests in configuration modal - uses button instead of link in my account timer - uses button instead of div for buttons of scrollable tabs - sets correct role for links and divs which are clickable - sets href on links * Add role="button" and preventDefault() to accessibility fixes Co-authored-by: myabc <755+myabc@users.noreply.github.com> * remove tabindex for the item of draggable auto completer * remove prevent default from drop modal * Fix test to select the button --------- Co-authored-by: Alexander Brandon Coles Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: myabc <755+myabc@users.noreply.github.com> --- frontend/eslint.config.mjs | 4 ++++ .../input/global-search-input.component.html | 10 +++++++--- .../admin/types/group-edit-in-place.html | 8 ++++++-- .../admin/types/query-group.component.html | 7 ++++++- .../bcf-wp-attribute-group.component.html | 7 ++++--- .../ifc-viewer/ifc-viewer.component.html | 2 +- .../board-list-container.component.html | 6 +++++- .../in-app-notification-entry.component.html | 9 ++++++++- .../planner/team-planner.component.html | 1 + .../wp-edit-field/wp-replacement-label.html | 5 ++++- .../draggable-autocomplete.component.html | 9 ++++++--- .../op-autocompleter.component.html | 12 ++++++++++-- ...package-autocompleter-template.component.html | 6 ++++++ .../info/op-exclusion-info.component.html | 15 +++++++++------ .../components/primer/dynamic-icon.directive.ts | 5 +---- .../scrollable-tabs.component.html | 16 ++++++++++------ .../stop-existing-timer-modal.component.html | 1 + .../timer/timer-account-menu.component.html | 7 ++++--- .../timer/timer-account-menu.component.sass | 8 +++++++- .../components/toaster/toast.component.html | 12 ++++++------ .../drop-modal/drop-modal.component.html | 2 ++ .../global_styles/content/_scrollable_tabs.sass | 1 + .../support/components/bcf_details_viewpoints.rb | 2 +- 23 files changed, 110 insertions(+), 45 deletions(-) diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs index 6516882b6e4..8c9e8b67404 100644 --- a/frontend/eslint.config.mjs +++ b/frontend/eslint.config.mjs @@ -146,6 +146,10 @@ export default defineConfig([ ...angular.configs.templateAccessibility, ], rules: { + '@angular-eslint/template/click-events-have-key-events': [ + 'error', + { 'ignoreWithDirectives': ['uiSref'] } + ], '@angular-eslint/template/elements-content': [ 'error', { 'allowList': ['textContent'] } diff --git a/frontend/src/app/core/global_search/input/global-search-input.component.html b/frontend/src/app/core/global_search/input/global-search-input.component.html index bcdef37e012..79ba5b741a7 100644 --- a/frontend/src/app/core/global_search/input/global-search-input.component.html +++ b/frontend/src/app/core/global_search/input/global-search-input.component.html @@ -66,14 +66,18 @@ @if (!item.id) {
-
+
{{ currentValue }}
{{ item.text }} ↵
-
+
} @else { + (click)="startEditing()" + (keydown.enter)="startEditing()" + (keydown.space)="startEditing()"> } @if (editing) { diff --git a/frontend/src/app/features/admin/types/query-group.component.html b/frontend/src/app/features/admin/types/query-group.component.html index a2bf7930306..47e6afddaa3 100644 --- a/frontend/src/app/features/admin/types/query-group.component.html +++ b/frontend/src/app/features/admin/types/query-group.component.html @@ -15,7 +15,12 @@ />
- + {{ text.edit_query }} diff --git a/frontend/src/app/features/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.html b/frontend/src/app/features/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.html index 3c4f99b60cf..b0b79b1b7fb 100644 --- a/frontend/src/app/features/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.html +++ b/frontend/src/app/features/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.html @@ -17,13 +17,14 @@
} @if (viewerVisible && createAllowed) { - {{text.viewpoint}} - + } } diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html index 6c1d76e9cae..8b6d01e14c6 100644 --- a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html +++ b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html @@ -90,7 +90,7 @@
diff --git a/frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.html b/frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.html index c345945cfad..b85f2174ce6 100644 --- a/frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.html +++ b/frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.html @@ -41,7 +41,11 @@ } @if (board.editable) {
+ role="button" + tabindex="0" + (click)="addList(board)" + (keydown.enter)="addList(board)" + (keydown.space)="addList(board)">
diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html index 01e403fe667..7c053e6cdc9 100644 --- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html +++ b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html @@ -1,6 +1,10 @@
@if (workPackage$ && (workPackage$ | async); as workPackage) { @@ -51,9 +55,12 @@ } diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html index 3a296070f7b..3ebc827c247 100644 --- a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html +++ b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html @@ -132,6 +132,7 @@ }
+ @if (!(showAddAssignee$ | async) && !(dropzone$ | async)?.dragging) {
diff --git a/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.html b/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.html index ee80ffd0355..d5999c90c3c 100644 --- a/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.html +++ b/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.html @@ -28,7 +28,7 @@
- +
@if (isRemovable(item)) { - + >
}
} diff --git a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html index 205ce35ffd3..da99c7cfe84 100644 --- a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html +++ b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html @@ -222,7 +222,11 @@ @if (resource === 'work_packages') { - × + × @if (item.id) { × + ×
  • - + (keydown.enter)="toggleOpen($event)" + (keydown.space)="toggleOpen($event)" + > + +
    diff --git a/frontend/src/app/shared/components/primer/dynamic-icon.directive.ts b/frontend/src/app/shared/components/primer/dynamic-icon.directive.ts index 6c9681a3eff..43f5e9dba7e 100644 --- a/frontend/src/app/shared/components/primer/dynamic-icon.directive.ts +++ b/frontend/src/app/shared/components/primer/dynamic-icon.directive.ts @@ -40,14 +40,11 @@ export class DynamicIconDirective { readonly icon = input.required(); readonly size = input('medium'); - private loaded = false; - constructor() { effect(() => { const name = this.icon(); - if (!name || this.loaded) return; + if (!name) return; - this.loaded = true; this.renderIcon(name); }); } diff --git a/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html b/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html index 0d0d9af2847..b1556484b68 100644 --- a/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html +++ b/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html @@ -75,20 +75,24 @@
    • } -
    -
    -
    +
    +