Merge pull request #505 from ProgressPlanner/ari/a11y-fix-for-todos-label

a11y fix

Author: ilicfilip

CHANGELOG.md

@@ -1,11 +1,16 @@
 = 1.5.0 =
 
+Added these recommendations from Ravi:
+
+* [Test if your website can send emails correctly](https://prpl.fyi/troubleshoot-smtp).
+
 Bugs we fixed:
 
 * Don't redirect user to Progress Planner dashboard if 'redirect_to' GET or POST parameter is set.
 * Removed the Onboard tour steps for the Settings popover which was removed in 1.3.0.
 * Fixed detecting creation of new valuable content posts.
 * Don't award point for all Todo tasks, only for golden.
+* Fix Todo task title not being editable.
 
 = 1.4.2 =
 

assets/js/web-components/prpl-suggested-task.js

@@ -217,14 +217,15 @@ customElements.define(
 							<slot name="open-icon">`;
 					}
 
-					output += `<input
+					output += `<label><input
 						type="checkbox"
-						id="prpl-suggested-task-checkbox-${ task_id }"
 						class="prpl-suggested-task-checkbox"
 						style="${ checkboxStyle }"
 						${ ! dismissable ? 'disabled' : '' }
 						${ getTaskStatus() === 'completed' ? 'checked' : '' }
-					>`;
+					><span class="screen-reader-text">${ taskHeading }: ${ prplL10n(
+						'markAsComplete'
+					) }</span></label>`;
 
 					if ( ! dismissable ) {
 						output += `
@@ -260,17 +261,11 @@ customElements.define(
 			>
 				${ actionButtons.completeCheckbox }
 				<h3 style="width: 100%;">
-					${
-						useCheckbox
-							? `<label for="prpl-suggested-task-checkbox-${ task_id }">`
-							: ''
-					}
 					<span${
 						'user' === category
 							? ` contenteditable="plaintext-only"`
 							: ''
 					}>${ taskHeading }</span>
-					${ useCheckbox && dismissable ? `</label>` : '' }
 				</h3>
 				<div class="prpl-suggested-task-actions">
 					<div class="tooltip-actions">
@@ -482,6 +477,12 @@ customElements.define(
 									detail: { node: thisObj },
 								} )
 							);
+
+							h3Span
+								.closest( '.prpl-suggested-task' )
+								.querySelector(
+									'label:has(.prpl-suggested-task-checkbox) .screen-reader-text'
+								).innerHTML = title;
 						} );
 				}, 300 );
 			} );

tests/e2e/constants/selectors.js

@@ -3,7 +3,7 @@
  */
 
 const SELECTORS = {
-	RR_ITEM_TEXT: 'h3 > label > span',
+	RR_ITEM_TEXT: 'h3 > span',
 	TODO_ITEM: 'ul#todo-list > prpl-suggested-task li',
 	TODO_COMPLETED_ITEM: 'ul#todo-list-completed > prpl-suggested-task li',
 	TODO_LIST: 'ul#todo-list',