A11Y: interactive TagPill buttons lack 44 px touch targets

kayg commented

2026-10-02 13:08:14 +00:00

Owner

Source audit from rev-a11y (#427), base c4a61e8cf090170f35b1bed3350d9de20c83ecd5. No product changes or production build were made.

A5 — Interactive TagPill targets stay compact on touch

Priority: P2. Family: shared TagPill. Tracking: this issue.
Rule: DESIGN §35, 44 px touch targets. Also inspect 2.5.8 with spacing.

Evidence:

packages/ui/src/components/TagPill.svelte:46: the interactive button
does not use touch-hit or a minimum target token.
packages/ui/src/components/TagPill.svelte:70: the small form uses text
size and 3 px vertical padding. The medium form has a 40 px height fallback.
apps/web/src/lib/components/TagEditor.svelte:151: matching suggestions
render interactive TagPills without a larger control wrapper.
packages/ui/src/components/calendar/ItemPreview.svelte:220: Tags in
the Calendar preview use the same compact interactive form.

Effect: the touch User must hit a compact chip. Shared sizing tokens do not
increase this button to the project minimum.

Fix: keep the compact paint. Add a shared 44 px coarse-pointer target and
enough spacing that adjacent targets do not overlap. Reuse touch-hit if
its expanded area fits the layout; otherwise grow the button's layout box.

Test: inspect the effective targets in Tag editor suggestions and Calendar
preview Tags at 390 and 820 px with touch emulation. Check short Tags and
adjacent remove actions. Each action must have a separate 44 px target.

Duplicate check: searched all-state Forgejo issues for TagPill and accessibility. #162 is the closed general sweep; no component-specific target defect was found.

Use the existing component and tests. Check phone (390 px), tablet (820 px) and desktop (1440 px), light and dark, with macOS shortcut rendering. Keep keyboard and pointer motion durations equal; retain reduced-motion support.

Source audit from rev-a11y (#427), base `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`. No product changes or production build were made. ### A5 — Interactive TagPill targets stay compact on touch Priority: P2. Family: shared TagPill. Tracking: this issue. Rule: DESIGN §35, 44 px touch targets. Also inspect 2.5.8 with spacing. Evidence: - `packages/ui/src/components/TagPill.svelte:46`: the interactive button does not use `touch-hit` or a minimum target token. - `packages/ui/src/components/TagPill.svelte:70`: the small form uses text size and 3 px vertical padding. The medium form has a 40 px height fallback. - `apps/web/src/lib/components/TagEditor.svelte:151`: matching suggestions render interactive TagPills without a larger control wrapper. - `packages/ui/src/components/calendar/ItemPreview.svelte:220`: Tags in the Calendar preview use the same compact interactive form. Effect: the touch User must hit a compact chip. Shared sizing tokens do not increase this button to the project minimum. Fix: keep the compact paint. Add a shared 44 px coarse-pointer target and enough spacing that adjacent targets do not overlap. Reuse `touch-hit` if its expanded area fits the layout; otherwise grow the button's layout box. Test: inspect the effective targets in Tag editor suggestions and Calendar preview Tags at 390 and 820 px with touch emulation. Check short Tags and adjacent remove actions. Each action must have a separate 44 px target. Duplicate check: searched all-state Forgejo issues for TagPill and accessibility. #162 is the closed general sweep; no component-specific target defect was found. Use the existing component and tests. Check phone (390 px), tablet (820 px) and desktop (1440 px), light and dark, with macOS shortcut rendering. Keep keyboard and pointer motion durations equal; retain reduced-motion support.

kayg referenced this issue

2026-10-02 13:16:26 +00:00

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

kayg commented

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

Author

Owner

Exact line anchors for the audited base c4a61e8cf090170f35b1bed3350d9de20c83ecd5: interactive TagPill markup starts at packages/ui/src/components/TagPill.svelte:43, compact padding is at :68, medium height is at :88, and interactive Tag editor suggestions are at apps/web/src/lib/components/TagEditor.svelte:143. Calendar preview Tags remain at packages/ui/src/components/calendar/ItemPreview.svelte:220. These replace nearby line numbers in the first body.

Exact line anchors for the audited base `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`: interactive TagPill markup starts at `packages/ui/src/components/TagPill.svelte:43`, compact padding is at `:68`, medium height is at `:88`, and interactive Tag editor suggestions are at `apps/web/src/lib/components/TagEditor.svelte:143`. Calendar preview Tags remain at `packages/ui/src/components/calendar/ItemPreview.svelte:220`. These replace nearby line numbers in the first body.

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 commented

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

Author

Owner

Additional source check: the shared TagPill is used in compact Calendar previews and TagEditor suggestions with 6 px gaps. I will add the 44 px coarse-pointer target only for interactive pills and check that adjacent targets remain separately operable.

Additional source check: the shared `TagPill` is used in compact Calendar previews and TagEditor suggestions with 6 px gaps. I will add the 44 px coarse-pointer target only for interactive pills and check that adjacent targets remain separately operable.

kayg referenced this issue

2026-10-02 14:04:08 +00:00

A11Y: shared PDF preview has no document text for screen readers #741

kayg referenced this issue

2026-10-02 14:04:08 +00:00

A11Y: warm tooltip closes when the pointer moves onto its text #744

kayg referenced this issue

2026-10-02 14:04:08 +00:00

A11Y: shared focus trap accepts hidden controls and misses phone Settings initial focus #740

kayg referenced this issue

2026-10-02 14:04:09 +00:00

A11Y: Photos timeline scrubber has only a 28 px effective touch target #820

kayg referenced this issue

2026-10-02 14:04:09 +00:00

A11Y: Composer stack and discard buttons are invisible keyboard Tab stops #819

kayg commented

2026-10-02 14:04:09 +00:00

Author

Owner

Started work on job/undo-a11y-a11y, based on 9281e63b0164fd0297d959f37eb0008bfa0aa4d3. Scope: issues #740, #741, #744, #745, #819 and #820. I am reproducing each reported behavior with a regression test before changing implementation.

Started work on `job/undo-a11y-a11y`, based on `9281e63b0164fd0297d959f37eb0008bfa0aa4d3`. Scope: issues #740, #741, #744, #745, #819 and #820. I am reproducing each reported behavior with a regression test before changing implementation.

kayg commented

2026-10-02 17:01:17 +00:00

Author

Owner

Finding #745: shared interactive TagPill buttons used compact 24–40 px boxes, while short labels and adjacent Tag Editor remove actions could leave overlapping or undersized touch targets. The Calendar preview regression failed against the old button markup ([false, false] for two interactive Tags) and passes after the shared component gains a separate coarse-pointer layout box. I added browser assertions for 390/820 px Tag Editor suggestions and remove actions, and Calendar preview target size and activation; server-backed browser execution is pending the shared server binary.

kayg referenced this issue

2026-10-03 06:29:49 +00:00

Saved searches: Trash and Unpin have no Undo action #758

Rows
Columns

A11Y: interactive TagPill buttons lack 44 px touch targets #745

A5 — Interactive TagPill targets stay compact on touch