fix(a11y): Incorrect `li` markup being used in message lists
Merged
DO
2mo ago+148+148+012345678901234567890123456789-22-22-01234567890123456789
Proposed changes (including videos or screenshots)
Both message lists were rendering <li> elements inside virtua's VList. That container is a <div> with role="list", and VList wraps every row in another <div> — so those <li> had no <ul>/<ol> parent. Invalid markup, and an li outside a list maps to generic rather than listitem, so those rows were not exposed as part of the message list.
Replaced them with div elements carrying the right role:
- load-more placeholders →
role="presentation"(they're not list items) - room foreword →
role="listitem"
This matches what the rest of the list already does — RoomMessage and the message divider both use role="listitem" on a div. .load-more is a class selector, so the styles are unaffected.
Introduced in #40105, which swapped the <ul> containers for VList but carried the <li> children over unchanged.
Issue(s)
Steps to test or reproduce
- Open a channel with enough history to show the room foreword and the load-more placeholders.
- Inspect
div[role="list"].messages-list— no<li>should remain. - Same for the thread contextual bar.
- Run axe on the room view: the
listitemviolation ("<li>elements must be contained in a<ul>or<ol>", serious) is gone.
Further comments
Summary by CodeRabbit
- Accessibility
- Improved semantic structure and ARIA roles for message and thread list loading states.
- Updated room foreword markup to preserve list-item semantics within virtualized lists.
- Improved accessible naming and message list-item recognition for room and thread conversations.
- Added accessibility validation across loading, pagination, and message display states.