Update polls UX to match EX Mobile and improve accessibility (#31245)

* Remove poll ended event UI.

* Add better aria labels for screen reader and change ui to match mobile UX.

- Checkmark and progress bar are only green if the poll is ended.
- Updated the Poll icon for open and ended state and added labels
- Right align total votes count and update text

* Update jest tests

* Fix total votes alignment

* Fix screenshots

* Update snapshot

* Update e2e tests

* fix more e2e tests

* Clean up CSS

* Add back text for undisclosed poll (total should be hidden)

* Update checkmark and progress colours to more closely match mobile

* Don't compute optionNumber on each render

* "Total votes" working doesn't really work with the current web behaviour

Web doesn't show the votes for undisclosed polls(mobile does). reverting and that behaviour change should be addressed in a different PR(or on mobile.).

* Fix e2e test

* Update screenshots

* Move positioning of total votes label back to the left side

as we are no longer changing the copy to match mobile

* Don't concatenate label

* Fix translation order

* Remove unneeded translations

* remove O(n^2) code

* fix snapshots

* Fix check style in poll option

* prettier
This commit is contained in:
David Langley
2025-12-05 19:56:04 +00:00
committed by GitHub
parent d610c3d1ae
commit be8a18964e
21 changed files with 1095 additions and 870 deletions
+4 -1
View File
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { type MatrixEvent, EventType, RelationType } from "matrix-js-sdk/src/matrix";
import { type MatrixEvent, EventType, RelationType, M_POLL_END } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import SettingsStore from "./settings/SettingsStore";
@@ -50,6 +50,9 @@ function memberEventDiff(ev: MatrixEvent): IDiff {
* hitting the settings store
*/
export default function shouldHideEvent(ev: MatrixEvent, ctx?: IRoomState): boolean {
// Hide all poll end events
if (M_POLL_END.matches(ev.getType())) return true;
// Accessing the settings store directly can be expensive if done frequently,
// so we should prefer using cached values if a RoomContext is available
const isEnabled = ctx