nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/views/messages/MPollBody.tsx
View File

@@ -22,6 +22,8 @@ import {
import { RelatedRelations } from "matrix-js-sdk/src/models/related-relations";
import { type PollStartEvent, type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent";
import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
import PollsEndIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls-end";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
@@ -324,14 +326,18 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
<span className="mx_MPollBody_edited"> ({_t("common|edited")})</span>
) : null;
const PollIcon = poll.isEnded ? PollsEndIcon : PollsIcon;
const pollLabel = poll.isEnded ? _t("poll|ended_poll_label") : _t("poll|poll_label");
return (
<fieldset className="mx_MPollBody">
<legend data-testid="pollQuestion">
<PollIcon width="20" height="20" aria-label={pollLabel} />
{pollEvent.question.text}
{editedSpan}
</legend>
<div className="mx_MPollBody_allOptions">
{pollEvent.answers.map((answer: PollAnswerSubevent) => {
{pollEvent.answers.map((answer: PollAnswerSubevent, index: number) => {
let answerVotes = 0;
if (showResults) {
@@ -346,6 +352,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
key={answer.id}
pollId={pollId}
answer={answer}
optionNumber={index + 1}
isChecked={checked}
isEnded={poll.isEnded}
voteCount={answerVotes}

108
src/components/views/messages/MPollEndBody.tsx
View File

@@ -1,108 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React, { useEffect, useState, useContext, type JSX } from "react";
import { MatrixEvent, M_TEXT } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import { PollsEndIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { _t } from "../../../languageHandler";
import { textForEvent } from "../../../TextForEvent";
import { Caption } from "../typography/Caption";
import { type IBodyProps } from "./IBodyProps";
import MPollBody from "./MPollBody";
const getRelatedPollStartEventId = (event: MatrixEvent): string | undefined => {
const relation = event.getRelation();
return relation?.event_id;
};
/**
* Attempt to retrieve the related poll start event for this end event
* If the event already exists in the rooms timeline, return it
* Otherwise try to fetch the event from the server
* @param event
* @returns
*/
const usePollStartEvent = (event: MatrixEvent): { pollStartEvent?: MatrixEvent; isLoadingPollStartEvent: boolean } => {
const matrixClient = useContext(MatrixClientContext);
const [pollStartEvent, setPollStartEvent] = useState<MatrixEvent>();
const [isLoadingPollStartEvent, setIsLoadingPollStartEvent] = useState(false);
const pollStartEventId = getRelatedPollStartEventId(event);
useEffect(() => {
const room = matrixClient.getRoom(event.getRoomId());
const fetchPollStartEvent = async (roomId: string, pollStartEventId: string): Promise<void> => {
setIsLoadingPollStartEvent(true);
try {
const startEventJson = await matrixClient.fetchRoomEvent(roomId, pollStartEventId);
const startEvent = new MatrixEvent(startEventJson);
// add the poll to the room polls state
room?.processPollEvents([startEvent, event]);
// end event is not a valid end to the related start event
// if not sent by the same user
if (startEvent.getSender() === event.getSender()) {
setPollStartEvent(startEvent);
}
} catch (error) {
logger.error("Failed to fetch related poll start event", error);
} finally {
setIsLoadingPollStartEvent(false);
}
};
if (pollStartEvent || !room || !pollStartEventId) {
return;
}
const timelineSet = room.getUnfilteredTimelineSet();
const localEvent = timelineSet
?.getTimelineForEvent(pollStartEventId)
?.getEvents()
.find((e) => e.getId() === pollStartEventId);
if (localEvent) {
// end event is not a valid end to the related start event
// if not sent by the same user
if (localEvent.getSender() === event.getSender()) {
setPollStartEvent(localEvent);
}
} else {
// pollStartEvent is not in the current timeline,
// fetch it
fetchPollStartEvent(room.roomId, pollStartEventId);
}
}, [event, pollStartEventId, pollStartEvent, matrixClient]);
return { pollStartEvent, isLoadingPollStartEvent };
};
export const MPollEndBody = ({ mxEvent, ref, ...props }: IBodyProps): JSX.Element => {
const cli = useMatrixClientContext();
const { pollStartEvent, isLoadingPollStartEvent } = usePollStartEvent(mxEvent);
if (!pollStartEvent) {
const pollEndFallbackMessage = M_TEXT.findIn<string>(mxEvent.getContent()) || textForEvent(mxEvent, cli);
return (
<>
<PollsEndIcon className="mx_MPollEndBody_icon" />
{!isLoadingPollStartEvent && pollEndFallbackMessage}
</>
);
}
return (
<div className="mx_MPollEndBody" ref={ref}>
<Caption>{_t("timeline|m.poll.end|ended")}</Caption>
<MPollBody mxEvent={pollStartEvent} {...props} />
</div>
);
};

4
src/components/views/messages/MessageEvent.tsx
View File

@@ -15,7 +15,6 @@ import {
MatrixEventEvent,
M_BEACON_INFO,
M_LOCATION,
M_POLL_END,
M_POLL_START,
type IContent,
} from "matrix-js-sdk/src/matrix";
@@ -34,7 +33,6 @@ import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
import MVideoBody from "./MVideoBody";
import MStickerBody from "./MStickerBody";
import MPollBody from "./MPollBody";
import { MPollEndBody } from "./MPollEndBody";
import MLocationBody from "./MLocationBody";
import MjolnirBody from "./MjolnirBody";
import MBeaconBody from "./MBeaconBody";
@@ -75,8 +73,6 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
[EventType.Sticker, MStickerBody],
[M_POLL_START.name, MPollBody],
[M_POLL_START.altName, MPollBody],
[M_POLL_END.name, MPollEndBody],
[M_POLL_END.altName, MPollEndBody],
[M_BEACON_INFO.name, MBeaconBody],
[M_BEACON_INFO.altName, MBeaconBody],
]);

81
src/components/views/polls/PollOption.tsx
View File

@@ -36,50 +36,67 @@ const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer,
interface PollOptionProps extends PollOptionContentProps {
pollId: string;
totalVoteCount: number;
optionNumber: number;
isEnded?: boolean;
isChecked?: boolean;
onOptionSelected?: (id: string) => void;
children?: ReactNode;
}
const EndedPollOption: React.FC<Omit<PollOptionProps, "voteCount" | "totalVoteCount">> = ({
isChecked,
children,
answer,
}) => (
<div
className={classNames("mx_PollOption_endedOption", {
mx_PollOption_endedOptionWinner: isChecked,
})}
data-value={answer.id}
>
{children}
</div>
);
const ActivePollOption: React.FC<Omit<PollOptionProps, "voteCount" | "totalVoteCount">> = ({
const ActivePollOption: React.FC<Omit<PollOptionProps, "totalVoteCount"> & { children: ReactNode }> = ({
pollId,
isChecked,
isEnded,
optionNumber,
isWinner,
voteCount,
displayVoteCount,
children,
answer,
onOptionSelected,
}) => (
<StyledRadioButton
className="mx_PollOption_live-option"
name={`poll_answer_select-${pollId}`}
value={answer.id}
checked={isChecked}
onChange={() => onOptionSelected?.(answer.id)}
>
{children}
</StyledRadioButton>
);
}) => {
let ariaLabel: string;
if (displayVoteCount && isWinner) {
ariaLabel = _t("poll|option_label_winning_with_total", {
number: optionNumber,
answer: answer.text,
count: voteCount,
});
} else if (displayVoteCount) {
ariaLabel = _t("poll|option_label_with_total", {
number: optionNumber,
answer: answer.text,
count: voteCount,
});
} else {
ariaLabel = _t("poll|option_label", {
number: optionNumber,
answer: answer.text,
});
}
return (
<StyledRadioButton
className="mx_PollOption_live-option"
name={`poll_answer_select-${pollId}`}
value={answer.id}
checked={isChecked}
disabled={isEnded}
aria-label={ariaLabel}
onChange={() => onOptionSelected?.(answer.id)}
>
<div aria-hidden="true">{children}</div>
</StyledRadioButton>
);
};
export const PollOption: React.FC<PollOptionProps> = ({
pollId,
answer,
voteCount,
totalVoteCount,
optionNumber,
displayVoteCount,
isEnded,
isChecked,
@@ -92,13 +109,17 @@ export const PollOption: React.FC<PollOptionProps> = ({
});
const isWinner = isEnded && isChecked;
const answerPercent = totalVoteCount === 0 ? 0 : Math.round((100.0 * voteCount) / totalVoteCount);
const PollOptionWrapper = isEnded ? EndedPollOption : ActivePollOption;
return (
<div data-testid={`pollOption-${answer.id}`} className={cls} onClick={() => onOptionSelected?.(answer.id)}>
<PollOptionWrapper
<ActivePollOption
pollId={pollId}
answer={answer}
optionNumber={optionNumber}
isChecked={isChecked}
isEnded={isEnded}
isWinner={isWinner}
voteCount={voteCount}
displayVoteCount={displayVoteCount}
onOptionSelected={onOptionSelected}
>
<PollOptionContent
@@ -107,7 +128,7 @@ export const PollOption: React.FC<PollOptionProps> = ({
voteCount={voteCount}
displayVoteCount={displayVoteCount}
/>
</PollOptionWrapper>
</ActivePollOption>
<div className="mx_PollOption_popularityBackground">
<div className="mx_PollOption_popularityAmount" style={{ width: `${answerPercent}%` }} />
</div>

10
src/components/views/polls/pollHistory/PollListItemEnded.tsx
View File

@@ -28,6 +28,7 @@ type EndedPollState = {
winningAnswers: {
answer: PollAnswerSubevent;
voteCount: number;
optionNumber: number;
}[];
totalVoteCount: number;
};
@@ -40,10 +41,12 @@ const getWinningAnswers = (poll: Poll, responseRelations: Relations): EndedPollS
return {
totalVoteCount,
winningAnswers: poll.pollEvent.answers
.filter((answer) => votes.get(answer.id) === winCount)
.map((answer) => ({
.map((answer, index) => ({ answerIndex: index, answer })) // keep track of original answer index
.filter(({ answer }) => votes.get(answer.id) === winCount)
.map(({ answer, answerIndex }) => ({
answer,
voteCount: votes.get(answer.id) || 0,
optionNumber: answerIndex + 1,
})),
};
};
@@ -100,13 +103,14 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
</div>
{!!winningAnswers?.length && (
<div className="mx_PollListItemEnded_answers">
{winningAnswers?.map(({ answer, voteCount }) => (
{winningAnswers?.map(({ answer, voteCount, optionNumber }) => (
<PollOption
key={answer.id}
answer={answer}
voteCount={voteCount}
totalVoteCount={totalVoteCount!}
pollId={poll.pollId}
optionNumber={optionNumber}
displayVoteCount
isChecked
isEnded

12
src/i18n/strings/en_EN.json
View File

@@ -1762,6 +1762,7 @@
"end_message": "The poll has ended. Top answer: %(topAnswer)s",
"end_message_no_votes": "The poll has ended. No votes were cast.",
"end_title": "End Poll",
"ended_poll_label": "Poll ended",
"error_ending_description": "Sorry, the poll did not end. Please try again.",
"error_ending_title": "Failed to end poll",
"error_voting_description": "Sorry, your vote was not registered. Please try again.",
@@ -1769,10 +1770,20 @@
"failed_send_poll_description": "Sorry, the poll you tried to create was not posted.",
"failed_send_poll_title": "Failed to post poll",
"notes": "Results are only revealed when you end the poll",
"option_label": "Option %(number)s, %(answer)s",
"option_label_winning_with_total": {
"one": "Option %(number)s, %(answer)s, winning option, %(count)s vote",
"other": "Option %(number)s, %(answer)s, winning option, %(count)s votes"
},
"option_label_with_total": {
"one": "Option %(number)s, %(answer)s, %(count)s vote",
"other": "Option %(number)s, %(answer)s, %(count)s votes"
},
"options_add_button": "Add option",
"options_heading": "Create options",
"options_label": "Option %(number)s",
"options_placeholder": "Write an option",
"poll_label": "Poll",
"topic_heading": "What is your poll question or topic?",
"topic_label": "Question or topic",
"topic_placeholder": "Write something…",
@@ -3529,7 +3540,6 @@
}
},
"m.poll.end": {
"ended": "Ended a poll",
"sender_ended": "%(senderName)s has ended a poll"
},
"m.poll.start": "%(senderName)s has started a poll - %(pollQuestion)s",

5
src/shouldHideEvent.ts
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