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

Change polls to use fieldset/legend markup (#31160)

Browse Source 
* Change polls to use fieldset/legend markup

* Update MPollEndBody-test.tsx.snap

* Fix letter spacing in legend

* Update PollHistory-test.tsx.snap
This commit is contained in:
David Langley
2025-11-04 09:55:35 +00:00
committed by GitHub
parent c14d072cb7
commit 4e57b80556
5 changed files with 56 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,13 +8,18 @@ Please see LICENSE files in the repository root for full details.
.mx_MPollBody {
margin-top: 8px;
min-width: 0; /* Override fieldset default min-width: min-content */
width: 100%; /* Ensure fieldset takes full available width */
border: none; /* Remove default fieldset border */
padding: 0; /* Remove default fieldset padding */
h2 {
legend {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: 8px;
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
.mx_MPollBody_edited {
color: $roomtopic-color;
@@ -23,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
}
}
h2::before {
legend::before {
content: "";
position: relative;
display: inline-block;

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

@@ -325,11 +325,11 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
) : null;
return (
<div className="mx_MPollBody">
<h2 data-testid="pollQuestion">
<fieldset className="mx_MPollBody">
<legend data-testid="pollQuestion">
{pollEvent.question.text}
{editedSpan}
</h2>
</legend>
<div className="mx_MPollBody_allOptions">
{pollEvent.answers.map((answer: PollAnswerSubevent) => {
let answerVotes = 0;
@@ -360,7 +360,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
{totalText}
{isFetchingResponses && <Spinner w={16} h={16} />}
</div>
</div>
</fieldset>
);
}
}

74
test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
View File

@@ -1,15 +1,15 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MPollBody renders a finished poll 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -151,20 +151,20 @@ exports[`MPollBody renders a finished poll 1`] = `
>
Final result based on 3 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a finished poll with multiple winners 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -309,20 +309,20 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
>
Final result based on 4 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a finished poll with no votes 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -461,20 +461,20 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
>
Final result based on 0 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a poll that I have not voted in 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -661,20 +661,20 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
>
3 votes cast. Vote to see the results
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -869,20 +869,20 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
>
Based on 5 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a poll with no votes 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -1069,20 +1069,20 @@ exports[`MPollBody renders a poll with no votes 1`] = `
>
No votes cast
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders a poll with only non-local votes 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -1277,20 +1277,20 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
>
Based on 3 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders an undisclosed, finished poll 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -1435,20 +1435,20 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
>
Final result based on 4 votes
</div>
</div>
</fieldset>
</div>
`;
exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
<div>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
What should we order for the party?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -1635,6 +1635,6 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
>
Results will be visible when the poll is ended
</div>
</div>
</fieldset>
</div>
`;

8
test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap
View File

@@ -18,14 +18,14 @@ exports[`<MPollEndBody /> when poll start event exists in current timeline rende
>
Ended a poll
</span>
<div
<fieldset
class="mx_MPollBody"
>
<h2
<legend
data-testid="pollQuestion"
>
Question?
</h2>
</legend>
<div
class="mx_MPollBody_allOptions"
>
@@ -111,7 +111,7 @@ exports[`<MPollEndBody /> when poll start event exists in current timeline rende
/>
</div>
</div>
</div>
</fieldset>
</div>
</div>
`;

8
test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
View File

@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = `
<h2
<legend
data-testid="pollQuestion"
>
Question?
</h2>
</legend>
`;
exports[`<PollHistory /> Poll detail displays poll detail on past poll list item click 1`] = `
<h2
<legend
data-testid="pollQuestion"
>
What?
</h2>
</legend>
`;
exports[`<PollHistory /> Poll detail navigates back to poll list from detail view on header click 1`] = `