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

1
res/css/_components.pcss
View File

@@ -238,7 +238,6 @@
@import "./views/messages/_MLocationBody.pcss";
@import "./views/messages/_MNoticeBody.pcss";
@import "./views/messages/_MPollBody.pcss";
@import "./views/messages/_MPollEndBody.pcss";
@import "./views/messages/_MStickerBody.pcss";
@import "./views/messages/_MTextBody.pcss";
@import "./views/messages/_MVideoBody.pcss";

48
res/css/components/views/polls/_PollOption.pcss
View File

@@ -50,8 +50,43 @@ Please see LICENSE files in the repository root for full details.
}
.mx_PollOption_checked {
border-color: var(--cpd-color-border-interactive-hovered);
.mx_PollOption_popularityBackground {
.mx_PollOption_popularityAmount {
background-color: var(--cpd-color-icon-primary);
}
}
/* override checked radio button styling to show checkmark instead */
.mx_StyledRadioButton_checked {
input[type="radio"]:checked + div {
position: relative;
border-width: 2px;
border-color: var(--cpd-color-icon-primary);
background-color: var(--cpd-color-icon-primary);
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
mask-size: 12px 12px;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--cpd-color-icon-on-solid-primary);
width: 12px;
height: 12px;
}
div {
visibility: hidden;
}
}
}
}
.mx_PollOption_ended.mx_PollOption_checked {
.mx_PollOption_popularityBackground {
.mx_PollOption_popularityAmount {
background-color: var(--cpd-color-icon-accent-tertiary);
@@ -61,17 +96,8 @@ Please see LICENSE files in the repository root for full details.
/* override checked radio button styling to show checkmark instead */
.mx_StyledRadioButton_checked {
input[type="radio"]:checked + div {
border-width: 2px;
border-color: var(--cpd-color-icon-accent-tertiary);
background-color: var(--cpd-color-icon-accent-tertiary);
background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
div {
visibility: hidden;
}
}
}
}
@@ -94,6 +120,6 @@ Please see LICENSE files in the repository root for full details.
width: 0%;
height: 8px;
border-radius: 8px;
background-color: $quaternary-content;
background-color: var(--cpd-color-icon-primary);
}
}

32
res/css/views/messages/_MPollBody.pcss
View File

@@ -6,8 +6,10 @@ 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.
*/
$poll-max-width: 550px;
.mx_MPollBody {
margin-top: 8px;
margin-top: var(--cpd-space-2x);
min-width: 0; /* Override fieldset default min-width: min-content */
width: 100%; /* Ensure fieldset takes full available width */
border: none; /* Remove default fieldset border */
@@ -18,8 +20,16 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: 8px;
margin-bottom: var(--cpd-space-2x);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
display: flex;
align-items: center;
gap: var(--cpd-space-3x);
svg {
flex-shrink: 0;
color: var(--cpd-color-icon-primary);
}
.mx_MPollBody_edited {
color: $roomtopic-color;
@@ -28,22 +38,6 @@ Please see LICENSE files in the repository root for full details.
}
}
legend::before {
content: "";
position: relative;
display: inline-block;
margin-right: 12px;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
}
.mx_MPollBody_totalVotes {
display: flex;
flex-direction: inline;
@@ -67,5 +61,5 @@ Please see LICENSE files in the repository root for full details.
display: grid;
gap: $spacing-16;
margin-bottom: $spacing-8;
max-width: 550px;
max-width: $poll-max-width;
}

14
res/css/views/messages/_MPollEndBody.pcss
View File

@@ -1,14 +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.
*/
.mx_MPollEndBody_icon {
height: 14px;
margin-right: $spacing-8;
vertical-align: middle;
color: $secondary-content;
}

5
res/css/views/rooms/_EventBubbleTile.pcss
View File

@@ -355,11 +355,6 @@ Please see LICENSE files in the repository root for full details.
/* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
height: calc($font-18px + 2px);
}
.mx_MPollEndBody {
/* Prevent the poll end body from exceeding the tile width */
width: 100%;
}
}
&:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {