feat: expandable content announcements for hierarchical tables (CODAP-561)

[emcelroy]

CODAP-561

Improves screen reader support for hierarchical tables' group expand/collapse toggles.

• Adds an aria-live="polite" region to the case table that announces group expand/collapse actions to screen readers
• When expanding/collapsing all groups, announces: "All groups expanded" / "All groups collapsed"
• When expanding/collapsing a single group: "Group expanded, N cases shown" / "Group collapsed, N cases hidden"
• Uses a shared React context (CaseTableAnnounceContext) so any component in the table can trigger announcements — follows the same pattern as the slider component
• Updates toggle button icons to 12x12 SVG files

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.89%. Comparing base (c8eafd2) to head (5297f1a).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2515      +/-   ##
==========================================
+ Coverage   86.87%   86.89%   +0.02%     
==========================================
  Files         784      785       +1     
  Lines       44308    44326      +18     
  Branches    11112    10709     -403     
==========================================
+ Hits        38493    38519      +26     
+ Misses       5804     5796       -8     
  Partials       11       11              

Flag	Coverage Δ
cypress	69.86% <76.19%> (-0.02%)	⬇️
jest	59.57% <100.00%> (+0.43%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cypress]

codap-v3    Run #11031

Run Properties:   Passed #11031  •  39310c5809: Increment the build number

Project	codap-v3
Branch Review	main
Run status	Passed #11031
Run duration	02m 03s
Commit	39310c5809: Increment the build number
Committer	github-actions[bot]
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
View all changes introduced in this branch ↗︎

[Copilot]

Pull request overview

Adds screen reader announcements for expand/collapse actions in hierarchical case tables by introducing an aria-live status region and a shared announce context, plus updating the expand/collapse icons.

Changes:

• Add CaseTableAnnounceContext + aria-live="polite" status region to announce group expand/collapse actions.
• Trigger announcements from the group expand/collapse controls (all groups + single group with case counts).
• Update expand/collapse button icons to new 12×12 SVG assets and add tests for the announcement behavior.

Reviewed changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
v3/src/utilities/translation/lang/en-US.json5	Adds new translation strings for expand/collapse announcements.
v3/src/components/case-table/use-case-table-announce.tsx	Introduces announce context + hook for triggering status messages from table subcomponents.
v3/src/components/case-table/collection-table-spacer.tsx	Emits announcements when toggling a group or toggling all groups.
v3/src/components/case-table/case-table.tsx	Provides announce context and renders a visually-hidden aria-live status region.
v3/src/components/case-table/case-table.scss	Switches expand/collapse button background images to new SVG icons.
v3/src/components/case-table/case-table-announce.test.tsx	Adds tests covering aria-live updates and expand/collapse announcements.
v3/src/assets/icons/row-expand-icon.svg	Adds 12×12 expand icon asset.
v3/src/assets/icons/row-collapse-icon.svg	Adds 12×12 collapse icon asset.

Comments suppressed due to low confidence (1)

v3/src/components/case-table/collection-table-spacer.tsx:176

• The expand/collapse log message computes state using metadata?.isCollapsed(parentCaseId), but the toggle/announcement logic uses wasCollapsed derived from isCaseOrAncestorCollapsed(). These can diverge (e.g. when an ancestor is collapsed), which can make the logged action inaccurate. Use the same pre-toggle boolean (wasCollapsed) to derive the logged action so it matches the actual toggle decision.

    const wasCollapsed = !!metadata?.isCaseOrAncestorCollapsed(parentCaseId)
    // collapse the parent case
    metadata?.applyModelChange(() => {
      metadata?.setIsCollapsed(parentCaseId, !wasCollapsed)
    }, {
      undoStringKey: "DG.Undo.caseTable.expandCollapseOneCase",
      redoStringKey: "DG.Redo.caseTable.expandCollapseOneCase",
      log: logMessageWithReplacement("%@ case %@",
              { state: metadata?.isCollapsed(parentCaseId) ? "Expand" : "Collapse", parentCaseId}, "table")

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kswenson]

👍 Looks good. The following review was developed in conjunction with Claude Code 🤖.

PR Review Summary

Changes: 10 files, +298 / -26 lines

What it does

Adds screen-reader announcements for group expand/collapse actions in hierarchical case tables (CODAP-561, Allyant P2). A polite aria-live region inside the case table announces "All groups expanded/collapsed" for the bulk toggle and "Group expanded/collapsed, N cases shown/hidden" for individual toggles. Also replaces the two expand/collapse .gif sprites with 12×12 SVGs.

The approach

• Introduces a CaseTableAnnounceContext (use-case-table-announce.tsx) providing a (message: string) => void announce function, consumed via useCaseTableAnnounce(). This mirrors the existing pattern in slider-component.tsx exactly (auto-clearing status message, 1s timeout, ref-based timeout cancellation).
• CaseTable owns the state and renders the codap-visually-hidden aria-live region at the bottom of the component tree, wrapping all collection tables in the provider.
• CollectionTableSpacer calls announce() from handleExpandCollapseAllClick and handleExpandCollapseClick, passing translated strings with the child-case count.
• The single-group handler snapshots wasCollapsed before the applyModelChange, which tidies an existing pattern that called isCaseOrAncestorCollapsed twice.
• Adds four translation strings in en-US.json5 (V3.CaseTable.allGroupsExpanded/Collapsed, groupExpanded/Collapsed).
• New SVG icons (row-expand-icon.svg, row-collapse-icon.svg) replace expand.gif/collapse.gif; CSS (case-table.scss) updated.
• Adds case-table-announce.test.tsx with focused tests for both the announce mechanism (timeout/clearing) and the integrated expand/collapse flows. Tests pre-populate child collection rows because RDG doesn't render rows in jsdom — a reasonable workaround.

Assessment

Clean, well-scoped change that follows the established slider-component pattern. Implementation is idiomatic React (context + hook), separation of concerns is good, and the tests cover both unit and integration behavior. Nothing that should block merging.

Issues

None blocking. A few non-issues worth noting for readers:

• Child case count is correct. childCount = childCaseIds?.length || childItemIds?.length correctly reports the number of rows that appear/disappear in the table below the spacer. childCaseIds tracks visible direct children (hidden/filtered cases excluded), which matches what the user sees. The || fallback is effectively dead code since only non-leaf cases get expand buttons, and those always have childCaseIds defined.
• Focus handling unchanged. Expand/collapse doesn't move focus — correct, since the live region informs AT users without disrupting their focus point.
• SVG fill color hard-coded. #006C8E in the new SVGs; the prior .gif didn't theme either, so no regression.

Recommend approve.