Skip to content

fix(a11y): two empty states are a single aria-hidden icon with no text - #529

Closed
KimSreng1 wants to merge 3 commits into
thoth-tech:11.0.xfrom
ontrack-features-t2-2026:fix/a11y-sr04
Closed

KimSreng1 wants to merge 3 commits into
thoth-tech:11.0.xfrom
ontrack-features-t2-2026:fix/a11y-sr04

Conversation

@KimSreng1

Copy link
Copy Markdown

Description

Two empty states (the task comments panel when a task has no comments, and
the staff inbox list when filters match zero tasks) each rendered a single
mat-icon with aria-hidden="true" applied by MatIcon itself, and no
accompanying text. This left screen reader users with no way to distinguish
an empty state from a failed load. Added visible text next to each icon and
explicitly marked both icons decorative, following the text-only pattern
already used in notifications-page.component.html:46-52.

Fixes A11Y-SR04

Type of change

  • Bug fix

Branch/commit combo

  • doubtfire-web: fix/a11y-sr04 off origin/11.0.x @ 6f808cf
  • doubtfire-api: origin/11.0.x @ 41e50d9db4d12c0792b353fddf1494b01ad197c0
  • doubtfire-deploy: origin/11.0.x @ 41e50d9db4d12c0792b353fddf1494b01ad197c0

How Has This Been Tested?

Added vitest cases to task-comments-viewer.component.spec.ts and
staff-task-list.component.spec.ts covering both the empty-state-rendered and
non-empty (no-render) paths for each component. Run via:

npx ng test --include=src/app/tasks/task-comments-viewer/task-comments-viewer.component.spec.ts --include=src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.spec.ts --watch=false

Result: 2 test files, 6 tests, all passing.

The task-comments-viewer empty state was also manually reproduced and
confirmed in-browser (logged in as a student, opened a task with zero
comments). The staff-task-list empty state could not be manually reproduced
in-browser, since no seeded fixture tutor account had any tasks assigned to
filter down from verified instead via code inspection and the component
test, using a template override of the exact fixed markup (see note below).

Note: this fix touched two components, so two spec files were run rather
than the single file the card describes.

image image

Not covered: real screen-reader announcement behaviour (VoiceOver/NVDA)
wasn't manually verified — only that the accessible text node exists/is
visible in the DOM. Both spec files test the empty-state markup via a
template override (a copied snippet of the fixed block) rather than
rendering each component's full real template, since the full templates
require additional Angular Material modules (MatMenuModule, CDK virtual
scroll, and others) and extensive service mocking out of scope for this
a11y-focused fix.

Testing Checklist:

  • Tested in latest Chrome

maplefoxgit and others added 3 commits August 3, 2026 12:12
Updated the Pull Request template to include new sections for Jira ticket, summary, testing, security, and evidence.
…uest-template

Revise Pull Request template structure and content
@KimSreng1

Copy link
Copy Markdown
Author

Opened against the wrong repo (thoth-tech instead of ontrack-features-t2-2026), closing and reopening correctly.

@KimSreng1 KimSreng1 closed this Sep 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants