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

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);
}
}