dotCMS / dotCMS/core

[TASK] Finish the ARIA grid wiring on the shared folder list view

Open
#37,439 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

OKR : User Experience Team : Scout
Dominant language
Java
Stars
970
Forks
486
Avg merge
3d 33m
Merged PRs (30d)
170

Description

Parent

Follow-up from #32591 / PR #37436 (Content Drive keybindings). Raised in review.

Problem

dot-folder-list-view now sets [attr.aria-selected] on every row, but the container is still
PrimeNG's default role="table". aria-selected is only fully meaningful on a row inside
role="grid" (or a listbox/tree), so some assistive technology ignores it, and the listing's
selection state is not reliably announced.

aria-multiselectable was tried and removed in the same PR: role="table" does not support it, so
it was wiring that only looked connected.

Why it was not done in #37436

Switching to role="grid" brings the grid keyboard contract with it. A screen reader enters focus
mode on a grid row, and Left/Right — which today read cell by cell in browse mode — would do nothing,
because cell-level navigation is not implemented. Half a grid is a worse listing to read than a
table, so the role was left alone and the gap recorded.

What "done" looks like
  • role="grid" on the table, aria-multiselectable driven by selectionMode
  • Left/Right arrow navigation between cells within the focused row, per the APG grid pattern
  • aria-rowcount / aria-rowindex on a paginated listing, so position is announced against the
    full result set rather than the rendered page
  • Verified against a real screen reader (NVDA and VoiceOver), not only unit assertions
Where
  • core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.html
    (row block comment records the current decision)
  • core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.ts
    ($ptConfig)

Shared by Content Drive, the Asset Picker and the Action Center preview, so a change here is
cross-portlet.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in core-web/libs/ui/src/lib/components/dot-folder-list-view/dot-folder-list-view.component.html, reading the row block comment and current table wiring, then inspect dot-folder-list-view.component.ts around $ptConfig. Trace the shared Content Drive, Asset Picker and Action Center preview uses. Done means the grid role, selection state, cell navigation and paginated row positions work, verified with NVDA and VoiceOver.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.