A11Y: keep one shared sr-only utility #308

New issue

Open

opened 2026-09-28 07:32:12 +00:00 by kayg · 2 comments

kayg commented

2026-09-28 07:32:12 +00:00

Owner

Evidence

apps/web/src/calternal-app.css:262 already defines a global .sr-only rule. A source scan found 13 more .sr-only style blocks inside Svelte components and routes. Examples are packages/ui/src/components/ModeHeader.svelte:851, packages/ui/src/components/PopoverSurface.svelte:267, packages/ui/src/components/calendar/AgendaList.svelte:527, and apps/web/src/lib/notes/NoteView.svelte:1179.

The copies differ. Some use clip-path: inset(50%); others use clip: rect(...); one copy omits width, height and white-space. This also makes calternal-app.css's note at line 665 that the component copies were removed stale.

Rule

Accessibility is a hard requirement. The reuse gate says duplicated logic is a defect.

Fix

Keep one app-wide .sr-only rule. Give it the complete clipping fallback. Remove local copies and use the global class in every component. Keep all labels in the accessibility tree.

Owner

apps/web/src/calternal-app.css owns the existing shared utility. The app shell loads it for the web UI.

## Evidence `apps/web/src/calternal-app.css:262` already defines a global `.sr-only` rule. A source scan found 13 more `.sr-only` style blocks inside Svelte components and routes. Examples are `packages/ui/src/components/ModeHeader.svelte:851`, `packages/ui/src/components/PopoverSurface.svelte:267`, `packages/ui/src/components/calendar/AgendaList.svelte:527`, and `apps/web/src/lib/notes/NoteView.svelte:1179`. The copies differ. Some use `clip-path: inset(50%)`; others use `clip: rect(...)`; one copy omits width, height and white-space. This also makes `calternal-app.css`'s note at line 665 that the component copies were removed stale. ## Rule Accessibility is a hard requirement. The reuse gate says duplicated logic is a defect. ## Fix Keep one app-wide `.sr-only` rule. Give it the complete clipping fallback. Remove local copies and use the global class in every component. Keep all labels in the accessibility tree. ## Owner `apps/web/src/calternal-app.css` owns the existing shared utility. The app shell loads it for the web UI.

kayg referenced this issue

2026-09-28 08:31:30 +00:00

AUDIT: app-wide chrome consistency (headers, blur, breadcrumbs, pills, links, type scale) #237

kayg commented

2026-09-30 04:17:02 +00:00

Author

Owner

Consistency-hunt update from current dev at dfb5964a2fcf13dc8b9a50a319eee09bc386f322 (2026-09-30). I found 14 local .sr-only rules plus the shared rule in apps/web/src/calternal-app.css:260; the previous report counted 13 local copies (+1). The additional copies include apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:711 and apps/web/src/lib/mail/MailView.svelte:665. Other copies remain in packages/ui/src/components/ModeHeader.svelte:873, PopoverSurface.svelte:287, and apps/web/src/lib/notes/NoteView.svelte:1246.

Rule: keep one complete, app-wide clipped-label rule so every label stays in the accessibility tree. Fix: remove local rules and use the shared class. Owner: apps/web/src/calternal-app.css.

Consistency-hunt update from current `dev` at `dfb5964a2fcf13dc8b9a50a319eee09bc386f322` (2026-09-30). I found 14 local `.sr-only` rules plus the shared rule in `apps/web/src/calternal-app.css:260`; the previous report counted 13 local copies (+1). The additional copies include `apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:711` and `apps/web/src/lib/mail/MailView.svelte:665`. Other copies remain in `packages/ui/src/components/ModeHeader.svelte:873`, `PopoverSurface.svelte:287`, and `apps/web/src/lib/notes/NoteView.svelte:1246`. Rule: keep one complete, app-wide clipped-label rule so every label stays in the accessibility tree. Fix: remove local rules and use the shared class. Owner: `apps/web/src/calternal-app.css`.

kayg commented

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

Author

Owner

Updated source evidence for #308 from rev-consistency (#427), origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5:

The shared utility remains at apps/web/src/calternal-app.css:260-269. Local .sr-only copies still exist in apps/web/src/lib/mail/MailView.svelte:666, apps/web/src/lib/photos/PhotosView.svelte:1086, apps/web/src/lib/files/UploadToast.svelte:322, apps/web/src/lib/notes/NoteView.svelte:1258, apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:927, packages/ui/src/components/PopoverSurface.svelte:295, packages/ui/src/components/ModeHeader.svelte:835, packages/ui/src/components/calendar/AgendaList.svelte:838, and packages/ui/src/components/calendar/AttachmentDeck.svelte:608. Several have no padding/margin/border reset, unlike the shared rule.

The comment at apps/web/src/calternal-app.css:623 still says component copies were removed. Update it with the removal. Keep component positioning overrides only where required for behaviour; the hidden clipping recipe has one owner. Test that the labels remain in the accessibility tree and their controls remain named. No new duplicate issue was filed.

Updated source evidence for #308 from rev-consistency (#427), `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`: The shared utility remains at `apps/web/src/calternal-app.css:260-269`. Local `.sr-only` copies still exist in `apps/web/src/lib/mail/MailView.svelte:666`, `apps/web/src/lib/photos/PhotosView.svelte:1086`, `apps/web/src/lib/files/UploadToast.svelte:322`, `apps/web/src/lib/notes/NoteView.svelte:1258`, `apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:927`, `packages/ui/src/components/PopoverSurface.svelte:295`, `packages/ui/src/components/ModeHeader.svelte:835`, `packages/ui/src/components/calendar/AgendaList.svelte:838`, and `packages/ui/src/components/calendar/AttachmentDeck.svelte:608`. Several have no padding/margin/border reset, unlike the shared rule. The comment at `apps/web/src/calternal-app.css:623` still says component copies were removed. Update it with the removal. Keep component positioning overrides only where required for behaviour; the hidden clipping recipe has one owner. Test that the labels remain in the accessibility tree and their controls remain named. No new duplicate issue was filed.

kayg referenced this issue

2026-10-02 13:13:47 +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

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

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

kayg referenced this issue

2026-10-02 13:19:51 +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

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