A11Y: Analytics heatmap marks have no full-size touch readout alternative #845

New issue

Open

opened 2026-10-02 13:28:00 +00:00 by kayg · 1 comment

kayg commented

2026-10-02 13:28:00 +00:00

Owner

Context

Source accessibility review of origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5, job rev-a11y, assigned #427. Analytics supplies named keyboard buttons over heatmap cells, but those exact-cell buttons remain too small for touch.

Evidence

apps/web/src/lib/components/analytics/BklitAnalyticsHeatmapMarks.tsx:46–59 sets each target to binWidth - gap by binHeight - gap, matching the painted cell exactly.
apps/web/src/lib/components/analytics/BklitKeyboardMarks.tsx:144–150 applies those dimensions to actual interactive buttons.
packages/ui/src/tokens.css:20–22 sets Calendar heatmap column sizing to 0.8125–1.125 rem. At the default 16 px root this is 13–18 px before the 2 px gap is removed.
apps/web/src/lib/components/analytics/BklitAnalytics.tsx:995–1011 caps the Calendar heatmap width with that maximum and uses a 2 px gap. Its mark CSS at :335–347 adds no touch-target expansion.

There is no full-size pointer alternative for each heatmap readout in CalendarHeatmap or BklitChart. The dense date-grid exemption in DESIGN §35 covers date navigation with an equivalent Month/Day action; it does not supply an equivalent Analytics readout. These interactive marks violate the project's 44 px touch rule. The short pitch also needs a rendered WCAG 2.5.8 size/spacing check; do not exempt this entire chart as a date picker.

Expected and exact fix

Preserve exact-cell fine-pointer hover and the existing roving keyboard model (#504). Provide an equivalent touch readout path with separate 44 px targets, for example a real-data list or a shared day/hour selector beside the compact chart. Do not overlap expanded targets across neighboring cells. Reuse the readout data and formatting so all input modes report the same value.

Test idea

Use a long Calendar range and the Time of day chart at 390 and 820 px with touch emulation. Reach each relevant day/hour value through full-size targets. Check their effective rectangles, spacing and value parity with fine-pointer hover and keyboard focus. At 1440 px keep the exact-cell gap miss behavior required by #504. Check both schemes and macOS platform emulation.

Duplicate search

Searches: "chart", accessibility, #504 and #162. #504 owns chart readout/hover geometry; it does not record a touch-target alternative. #162 is a closed general sweep. One issue is filed for the Analytics mark family.

# Context Source accessibility review of `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`, job rev-a11y, assigned #427. Analytics supplies named keyboard buttons over heatmap cells, but those exact-cell buttons remain too small for touch. # Evidence - `apps/web/src/lib/components/analytics/BklitAnalyticsHeatmapMarks.tsx:46–59` sets each target to `binWidth - gap` by `binHeight - gap`, matching the painted cell exactly. - `apps/web/src/lib/components/analytics/BklitKeyboardMarks.tsx:144–150` applies those dimensions to actual interactive buttons. - `packages/ui/src/tokens.css:20–22` sets Calendar heatmap column sizing to 0.8125–1.125 rem. At the default 16 px root this is 13–18 px before the 2 px gap is removed. - `apps/web/src/lib/components/analytics/BklitAnalytics.tsx:995–1011` caps the Calendar heatmap width with that maximum and uses a 2 px gap. Its mark CSS at `:335–347` adds no touch-target expansion. There is no full-size pointer alternative for each heatmap readout in CalendarHeatmap or BklitChart. The dense date-grid exemption in DESIGN §35 covers date navigation with an equivalent Month/Day action; it does not supply an equivalent Analytics readout. These interactive marks violate the project's 44 px touch rule. The short pitch also needs a rendered WCAG 2.5.8 size/spacing check; do not exempt this entire chart as a date picker. # Expected and exact fix Preserve exact-cell fine-pointer hover and the existing roving keyboard model (#504). Provide an equivalent touch readout path with separate 44 px targets, for example a real-data list or a shared day/hour selector beside the compact chart. Do not overlap expanded targets across neighboring cells. Reuse the readout data and formatting so all input modes report the same value. # Test idea Use a long Calendar range and the Time of day chart at 390 and 820 px with touch emulation. Reach each relevant day/hour value through full-size targets. Check their effective rectangles, spacing and value parity with fine-pointer hover and keyboard focus. At 1440 px keep the exact-cell gap miss behavior required by #504. Check both schemes and macOS platform emulation. # Duplicate search Searches: `"chart"`, accessibility, #504 and #162. #504 owns chart readout/hover geometry; it does not record a touch-target alternative. #162 is a closed general sweep. One issue is filed for the Analytics mark family.

kayg commented

2026-10-02 13:32:55 +00:00

Author

Owner

Exact dimension assignment at the audited base c4a61e8cf090170f35b1bed3350d9de20c83ecd5: apps/web/src/lib/components/analytics/BklitKeyboardMarks.tsx:120–125 applies the mark dimensions to the button. This replaces the erroneous :144–150 range in the first body. The dimensions originate at BklitAnalyticsHeatmapMarks.tsx:49 and :55. The final report uses these exact anchors.

Exact dimension assignment at the audited base `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`: `apps/web/src/lib/components/analytics/BklitKeyboardMarks.tsx:120–125` applies the mark dimensions to the button. This replaces the erroneous `:144–150` range in the first body. The dimensions originate at `BklitAnalyticsHeatmapMarks.tsx:49` and `:55`. The final report uses these exact anchors.

kayg referenced this issue

2026-10-02 13:40:35 +00:00

Log attachments: deleted file still shown, attachments not live, batch send not live, Log order, raw camera names #427

kayg referenced this issue from a commit

2026-10-02 16:38:44 +00:00

Add full-size heatmap value readout for touch (#845)

kayg referenced this issue from a commit

2026-10-02 16:38:44 +00:00

Profile and verify touch heatmap readout (#845)

kayg referenced this issue

2026-10-02 19:25:02 +00:00

A11Y: modal surfaces leave the app background live despite their inert contract #848