LotusGuild/cinny
3
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Accessibility: axe-core findings across the main screens #278

New Issue
Closed
opened 2026-10-04 17:41:32 -04:00 by jared · 1 comment
jared commented 2026-10-04 17:41:32 -04:00
Owner
Copy Link
Copy Source

This is an automated axe-core run (WCAG 2.1 A/AA plus best practice). It covered home, rooms, DMs, voice room, lobby, explore, inbox, all Settings pages, all Room Settings pages and the auth pages, at desktop and phone sizes in dark and light themes.

Lotus-specific:

  • Room Settings dialog has no accessible name (aria-dialog-name, serious): it's role="dialog" aria-modal="true" with no aria-label/aria-labelledby. Seen on every Room Settings page.
  • aria-selected on plain buttons (aria-allowed-attr, critical): the inbox Invites tab buttons and the Room Settings → Permissions selector use aria-selected without role="tab"/option.
  • Unlabelled inputs (label, critical): the pack name input in Room Settings → Emojis & Stickers ("Name"), and the From/To date inputs in Room Settings → Export, whose visible labels aren't associated with them.
  • Composer placeholder contrast is 2.66:1 (#737373 on #333333, needs 4.5:1) in the Lotus dark theme.
  • Nested <p> (React DOM-nesting warning): RoomQuality.tsx:119,155 puts <Text> paragraphs inside SettingTile's description paragraph.

Inherited from upstream (fix when convenient):

  • Avatar <img> without alt in the sidebar "User Settings" button (it's inside a labelled button, so it should be alt="").
  • The timeline scroll container isn't keyboard-focusable (scrollable-region-focusable).
  • Explore uses h6 featured-community headings with no h1–h5 above them (heading-order).
  • No h1 / main landmark on most screens.

False positives ignored: spoiler text contrast (intentionally hidden).

Related: #179, #185 (manual screen-reader QA).

More context

Related nesting warnings are collected in the separate tech-debt issue on Settings <p> nesting. Re-run: node a11y.spec.ts in CI already gates some rules (#222); adding Room Settings and the auth pages to that spec would catch the dialog-name and label findings.

Nesting warnings: #291.

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

This is an automated **axe-core** run (WCAG 2.1 A/AA plus best practice). It covered home, rooms, DMs, voice room, lobby, explore, inbox, all Settings pages, all Room Settings pages and the auth pages, at desktop and phone sizes in dark and light themes. Lotus-specific: - **Room Settings dialog has no accessible name** (`aria-dialog-name`, serious): it's `role="dialog" aria-modal="true"` with no `aria-label`/`aria-labelledby`. Seen on every Room Settings page. - **`aria-selected` on plain buttons** (`aria-allowed-attr`, critical): the inbox Invites tab buttons and the Room Settings → Permissions selector use `aria-selected` without `role="tab"`/`option`. - **Unlabelled inputs** (`label`, critical): the pack name input in Room Settings → Emojis & Stickers ("Name"), and the From/To date inputs in Room Settings → Export, whose visible labels aren't associated with them. - **Composer placeholder contrast is 2.66:1** (`#737373` on `#333333`, needs 4.5:1) in the Lotus dark theme. - **Nested `<p>`** (React DOM-nesting warning): `RoomQuality.tsx:119,155` puts `<Text>` paragraphs inside `SettingTile`'s description paragraph. Inherited from upstream (fix when convenient): - Avatar `<img>` without `alt` in the sidebar "User Settings" button (it's inside a labelled button, so it should be `alt=""`). - The timeline scroll container isn't keyboard-focusable (`scrollable-region-focusable`). - Explore uses `h6` featured-community headings with no `h1`–`h5` above them (`heading-order`). - No `h1` / `main` landmark on most screens. False positives ignored: spoiler text contrast (intentionally hidden). Related: #179, #185 (manual screen-reader QA). ### More context Related nesting warnings are collected in the separate tech-debt issue on Settings `<p>` nesting. Re-run: `node a11y.spec.ts` in CI already gates some rules (#222); adding Room Settings and the auth pages to that spec would catch the dialog-name and label findings. Nesting warnings: #291. --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
jared added the priority: lowa11yarea: settings labels 2026-10-04 17:41:32 -04:00
jared commented 2026-10-04 21:19:33 -04:00
Author
Owner
Copy Link
Copy Source

Round 4 addition: opening the Pinned messages popout by keyboard (focus the header button → Enter) leaves focus on the trigger button instead of moving it into the popout, so screen-reader and keyboard users have to Tab to reach the list. Escape correctly closes it and focus stays on the button. Probably the same for other header popouts that don't use a focus trap.

**Round 4 addition:** opening the **Pinned messages** popout by keyboard (focus the header button → Enter) leaves focus on the trigger button instead of moving it into the popout, so screen-reader and keyboard users have to Tab to reach the list. Escape correctly closes it and focus stays on the button. Probably the same for other header popouts that don't use a focus trap.
jared closed this issue 2026-10-19 17:06:38 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels a11y area: settings priority: low
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#278