feat!: first attempt to improve accessibility on PollOption

BREAKING CHANGE: The changed markup might have unintended side effects related to styling for third party vendors.
FriendsOfFlarum · Apr 9, 2024 · f0ad1a4 · f0ad1a4
1 parent 1c265db
commit f0ad1a4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/js/src/forum/components/Poll/PollOption.tsx b/js/src/forum/components/Poll/PollOption.tsx
@@ -54,18 +54,29 @@ export default class PollOption extends Component<PollOptionAttrs, PollState> {
     const width = this.canSeeVoteCount ? this.percent() : (Number(this.voted) / (this.poll.myVotes()?.length || 1)) * 100;
 
     const bar = (
-      <div className="PollBar" data-selected={!!this.voted} style={`--poll-option-width: ${width}%`}>
+      <label className="PollBar" data-selected={!!this.voted} style={`--poll-option-width: ${width}%`}>
         {this.state.showCheckMarks && (
-          <label className="PollAnswer-checkbox checkbox">
-            <input onchange={this.state.changeVote.bind(this.state, this.option)} type="checkbox" checked={this.voted} disabled={isDisabled} />
+          <div className="PollAnswer-checkbox">
+            <input
+              className="PollAnswer-input sr-only"
+              type="checkbox"
+              id={this.option.id()}
+              name={this.name}
+              value={this.answer}
+              checked={this.voted}
+              disabled={isDisabled}
+              aria-labelledby={`${this.name}-${this.option.id()}-label`}
+              aria-describedby={`${this.name}-${this.option.id()}-description`}
+              onchange={this.state.changeVote.bind(this.state, this.option)}
+            />
             <span className="checkmark" />
-          </label>
+          </div>
         )}
 
         <div className="PollAnswer-text">{this.optionDisplayItems().toArray()}</div>
 
         {this.option.imageUrl() ? <img className="PollAnswer-image" src={this.option.imageUrl()} alt={this.option.answer()} /> : null}
-      </div>
+      </label>
     );
 
     return (

diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -259,6 +259,14 @@
     gap: 10px;
     align-items: flex-start;
 
+    &:hover {
+      cursor: pointer;
+    }
+
+    .PollAnswer-input[disabled] {
+      cursor: not-allowed;
+    }
+
     .PollAnswer-checkbox {
       grid-column: 1;
       grid-row: 1;
@@ -325,14 +333,11 @@
       &:checked ~ .checkmark:after {
         display: block;
       }
-
-      &[disabled] ~ .checkmark {
-        cursor: not-allowed;
-      }
     }
 
     .checkmark {
-      position: absolute;
+      position: relative;
+      display: block;
       top: 0;
       left: 0;
       height: 20px;
@@ -488,12 +493,10 @@
 }
 
 .PollOption {
-  display: flex;
   position: relative;
   padding: 10px;
   background: var(--body-bg);
   border-radius: 4px;
-  cursor: pointer;
 
   &:hover {
     background: var(--control-bg-light);