From 6fccd6b183ed31eaa3992dbae6e1aeddf66e1653 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Fri, 18 Feb 2022 11:43:07 +0100
Subject: [PATCH] add cursor: pointer to actionable poll options (#7826)

* add cursor: pointer to actionable poll options

Signed-off-by: Kerry Archibald <kerrya@element.io>

* eof

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/views/messages/_MPollBody.scss        | 12 +++
 src/components/views/messages/MPollBody.tsx   |  2 +
 .../__snapshots__/MPollBody-test.tsx.snap     | 88 +++++++++----------
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/res/css/views/messages/_MPollBody.scss b/res/css/views/messages/_MPollBody.scss
index 3c6471dd53..81613339d1 100644
--- a/res/css/views/messages/_MPollBody.scss
+++ b/res/css/views/messages/_MPollBody.scss
@@ -109,6 +109,11 @@ limitations under the License.
         }
     }
 
+    // options not actionable in these states
+    .mx_MPollBody_option_checked, .mx_MPollBody_option_ended {
+        pointer-events: none;
+    }
+
     .mx_StyledRadioButton_checked, .mx_MPollBody_endedOptionWinner {
         input[type="radio"] + div {
             border-width: 2px;
@@ -150,3 +155,10 @@ limitations under the License.
 .mx_ReplyTile .mx_MPollBody {
     pointer-events: none;
 }
+
+.mx_MPollBody_option,
+// label has cursor: default in user-agent stylesheet
+// override
+.mx_MPollBody_live-option {
+    cursor: pointer;
+}
diff --git a/src/components/views/messages/MPollBody.tsx b/src/components/views/messages/MPollBody.tsx
index 90dd4f554c..f0c806205e 100644
--- a/src/components/views/messages/MPollBody.tsx
+++ b/src/components/views/messages/MPollBody.tsx
@@ -438,6 +438,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                         const cls = classNames({
                             "mx_MPollBody_option": true,
                             "mx_MPollBody_option_checked": checked,
+                            "mx_MPollBody_option_ended": ended,
                         });
 
                         const answerPercent = (
@@ -513,6 +514,7 @@ interface ILivePollOptionProps {
 
 function LivePollOption(props: ILivePollOptionProps) {
     return <StyledRadioButton
+        className="mx_MPollBody_live-option"
         name={`poll_answer_select-${props.pollId}`}
         value={props.answer.id}
         checked={props.checked}
diff --git a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
index b969af06bb..18988d0290 100644
--- a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
@@ -93,7 +93,7 @@ exports[`MPollBody renders a finished poll 1`] = `
         className="mx_MPollBody_allOptions"
       >
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="pizza"
           onClick={[Function]}
         >
@@ -155,7 +155,7 @@ exports[`MPollBody renders a finished poll 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="poutine"
           onClick={[Function]}
         >
@@ -217,7 +217,7 @@ exports[`MPollBody renders a finished poll 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option mx_MPollBody_option_checked"
+          className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
           key="italian"
           onClick={[Function]}
         >
@@ -279,7 +279,7 @@ exports[`MPollBody renders a finished poll 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="wings"
           onClick={[Function]}
         >
@@ -444,7 +444,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
         className="mx_MPollBody_allOptions"
       >
         <div
-          className="mx_MPollBody_option mx_MPollBody_option_checked"
+          className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
           key="pizza"
           onClick={[Function]}
         >
@@ -506,7 +506,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="poutine"
           onClick={[Function]}
         >
@@ -568,7 +568,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="italian"
           onClick={[Function]}
         >
@@ -630,7 +630,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option mx_MPollBody_option_checked"
+          className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
           key="wings"
           onClick={[Function]}
         >
@@ -795,7 +795,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
         className="mx_MPollBody_allOptions"
       >
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="pizza"
           onClick={[Function]}
         >
@@ -857,7 +857,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="poutine"
           onClick={[Function]}
         >
@@ -919,7 +919,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="italian"
           onClick={[Function]}
         >
@@ -981,7 +981,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
           </div>
         </div>
         <div
-          className="mx_MPollBody_option"
+          className="mx_MPollBody_option mx_MPollBody_option_ended"
           key="wings"
           onClick={[Function]}
         >
@@ -1179,13 +1179,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="pizza"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1266,13 +1266,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="poutine"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1353,13 +1353,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="italian"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1440,13 +1440,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="wings"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1630,13 +1630,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="pizza"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1719,13 +1719,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="poutine"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -1808,13 +1808,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
             <StyledRadioButton
               checked={true}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="italian"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
               >
                 <input
                   checked={true}
@@ -1897,13 +1897,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="wings"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2089,13 +2089,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="pizza"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2176,13 +2176,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="poutine"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2263,13 +2263,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="italian"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2350,13 +2350,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="wings"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2540,13 +2540,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="pizza"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2629,13 +2629,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="poutine"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2718,13 +2718,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
             <StyledRadioButton
               checked={false}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="italian"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
               >
                 <input
                   checked={false}
@@ -2807,13 +2807,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
             <StyledRadioButton
               checked={true}
               childrenInLabel={true}
-              className=""
+              className="mx_MPollBody_live-option"
               name="poll_answer_select-$mypoll"
               onChange={[Function]}
               value="wings"
             >
               <label
-                className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
               >
                 <input
                   checked={true}