sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 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
res/css/views/messages/_MPollBody.pcss
+7 -2
View File
@@ -8,13 +8,18 @@ Please see LICENSE files in the repository root for full details.
.mx_MPollBody { .mx_MPollBody {
margin-top: 8px; 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-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
margin-top: 0; margin-top: 0;
margin-bottom: 8px; margin-bottom: 8px;
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
.mx_MPollBody_edited { .mx_MPollBody_edited {
color: $roomtopic-color; color: $roomtopic-color;
@@ -23,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
} }
} }
h2::before { legend::before {
content: ""; content: "";
position: relative; position: relative;
display: inline-block; display: inline-block;
src/components/views/messages/MPollBody.tsx
+4 -4
View File
@@ -325,11 +325,11 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
) : null; ) : null;
return ( return (
<div className="mx_MPollBody"> <fieldset className="mx_MPollBody">
<h2 data-testid="pollQuestion"> <legend data-testid="pollQuestion">
{pollEvent.question.text} {pollEvent.question.text}
{editedSpan} {editedSpan}
</h2> </legend>
<div className="mx_MPollBody_allOptions"> <div className="mx_MPollBody_allOptions">
{pollEvent.answers.map((answer: PollAnswerSubevent) => { {pollEvent.answers.map((answer: PollAnswerSubevent) => {
let answerVotes = 0; let answerVotes = 0;
@@ -360,7 +360,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
{totalText} {totalText}
{isFetchingResponses && <Spinner w={16} h={16} />} {isFetchingResponses && <Spinner w={16} h={16} />}
</div> </div>
</div> </fieldset>
); );
} }
} }
test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
+37 -37
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`] = ` exports[`MPollBody renders a finished poll 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -151,20 +151,20 @@ exports[`MPollBody renders a finished poll 1`] = `
> >
Final result based on 3 votes Final result based on 3 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a finished poll with multiple winners 1`] = ` exports[`MPollBody renders a finished poll with multiple winners 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -309,20 +309,20 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
> >
Final result based on 4 votes Final result based on 4 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a finished poll with no votes 1`] = ` exports[`MPollBody renders a finished poll with no votes 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -461,20 +461,20 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
> >
Final result based on 0 votes Final result based on 0 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a poll that I have not voted in 1`] = ` exports[`MPollBody renders a poll that I have not voted in 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" 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 3 votes cast. Vote to see the results
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] = ` exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" 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 Based on 5 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a poll with no votes 1`] = ` exports[`MPollBody renders a poll with no votes 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -1069,20 +1069,20 @@ exports[`MPollBody renders a poll with no votes 1`] = `
> >
No votes cast No votes cast
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders a poll with only non-local votes 1`] = ` exports[`MPollBody renders a poll with only non-local votes 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -1277,20 +1277,20 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
> >
Based on 3 votes Based on 3 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders an undisclosed, finished poll 1`] = ` exports[`MPollBody renders an undisclosed, finished poll 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -1435,20 +1435,20 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
> >
Final result based on 4 votes Final result based on 4 votes
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
exports[`MPollBody renders an undisclosed, unfinished poll 1`] = ` exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
<div> <div>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What should we order for the party? What should we order for the party?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" 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 Results will be visible when the poll is ended
</div> </div>
</div> </fieldset>
</div> </div>
`; `;
test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap
+4 -4
View File
@@ -18,14 +18,14 @@ exports[`<MPollEndBody /> when poll start event exists in current timeline rende
> >
Ended a poll Ended a poll
</span> </span>
<div <fieldset
class="mx_MPollBody" class="mx_MPollBody"
> >
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
Question? Question?
</h2> </legend>
<div <div
class="mx_MPollBody_allOptions" class="mx_MPollBody_allOptions"
> >
@@ -111,7 +111,7 @@ exports[`<MPollEndBody /> when poll start event exists in current timeline rende
/> />
</div> </div>
</div> </div>
</div> </fieldset>
</div> </div>
</div> </div>
`; `;
test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
+4 -4
View File
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = ` exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = `
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
Question? Question?
</h2> </legend>
`; `;
exports[`<PollHistory /> Poll detail displays poll detail on past poll list item click 1`] = ` exports[`<PollHistory /> Poll detail displays poll detail on past poll list item click 1`] = `
<h2 <legend
data-testid="pollQuestion" data-testid="pollQuestion"
> >
What? What?
</h2> </legend>
`; `;
exports[`<PollHistory /> Poll detail navigates back to poll list from detail view on header click 1`] = ` exports[`<PollHistory /> Poll detail navigates back to poll list from detail view on header click 1`] = `