Merge pull request #472 from ProgressPlanner/ari/fix-470

a11y fix for checkboxes label

Author: aristath

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

@@ -214,6 +214,7 @@ customElements.define(
 
 					output += `<input
 						type="checkbox"
+						id="prpl-suggested-task-checkbox-${ task_id }"
 						class="prpl-suggested-task-checkbox"
 						style="${ checkboxStyle }"
 						${ ! dismissable ? 'disabled' : '' }
@@ -253,11 +254,17 @@ customElements.define(
 				data-task-list="${ taskList }"
 			>
 				${ actionButtons.completeCheckbox }
-				<h3 style="width: 100%;"><span${
-					'user' === category
-						? ` contenteditable="plaintext-only"`
-						: ''
-				}>${ taskHeading }</span></h3>
+				<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">
 						${ actionButtons.info }

tests/e2e/todo-complete.spec.js

@@ -96,9 +96,9 @@ function todoCompleteTests( testContext = test ) {
 			const todoItemElement = page.locator(
 				`ul#todo-list ${ taskSelector }`
 			);
-			await expect( todoItemElement.locator( 'h3 > span' ) ).toHaveText(
-				TEST_TASK_TEXT
-			);
+			await expect(
+				todoItemElement.locator( 'h3 > label > span' )
+			).toHaveText( TEST_TASK_TEXT );
 
 			// Click the checkbox to complete the task
 			await todoItemElement
@@ -119,9 +119,9 @@ function todoCompleteTests( testContext = test ) {
 				`ul#todo-list-completed ${ taskSelector }`
 			);
 			await expect( completedTask ).toBeVisible();
-			await expect( completedTask.locator( 'h3 > span' ) ).toHaveText(
-				TEST_TASK_TEXT
-			);
+			await expect(
+				completedTask.locator( 'h3 > label > span' )
+			).toHaveText( TEST_TASK_TEXT );
 			await expect(
 				completedTask.locator( '.prpl-suggested-task-checkbox' )
 			).toBeChecked();
@@ -172,9 +172,9 @@ function todoCompleteTests( testContext = test ) {
 					`ul#todo-list-completed ${ taskSelector }`
 				);
 				await expect( completedTask ).toBeVisible();
-				await expect( completedTask.locator( 'h3 > span' ) ).toHaveText(
-					TEST_TASK_TEXT
-				);
+				await expect(
+					completedTask.locator( 'h3 > label > span' )
+				).toHaveText( TEST_TASK_TEXT );
 				await expect(
 					completedTask.locator( '.prpl-suggested-task-checkbox' )
 				).toBeChecked();

tests/e2e/todo-reorder.spec.js

@@ -81,15 +81,15 @@ function todoReorderTests( testContext = test ) {
 
 			// Verify initial order
 			const items = await todoItems.all();
-			await expect( items[ 0 ].locator( 'h3 > span' ) ).toHaveText(
-				FIRST_TASK_TEXT
-			);
-			await expect( items[ 1 ].locator( 'h3 > span' ) ).toHaveText(
-				SECOND_TASK_TEXT
-			);
-			await expect( items[ 2 ].locator( 'h3 > span' ) ).toHaveText(
-				THIRD_TASK_TEXT
-			);
+			await expect(
+				items[ 0 ].locator( 'h3 > label > span' )
+			).toHaveText( FIRST_TASK_TEXT );
+			await expect(
+				items[ 1 ].locator( 'h3 > label > span' )
+			).toHaveText( SECOND_TASK_TEXT );
+			await expect(
+				items[ 2 ].locator( 'h3 > label > span' )
+			).toHaveText( THIRD_TASK_TEXT );
 
 			// Hover over second item and click move down button
 			await items[ 1 ].hover();
@@ -101,13 +101,13 @@ function todoReorderTests( testContext = test ) {
 			// Verify new order
 			const reorderedItems = await todoItems.all();
 			await expect(
-				reorderedItems[ 0 ].locator( 'h3 > span' )
+				reorderedItems[ 0 ].locator( 'h3 > label > span' )
 			).toHaveText( FIRST_TASK_TEXT );
 			await expect(
-				reorderedItems[ 1 ].locator( 'h3 > span' )
+				reorderedItems[ 1 ].locator( 'h3 > label > span' )
 			).toHaveText( THIRD_TASK_TEXT );
 			await expect(
-				reorderedItems[ 2 ].locator( 'h3 > span' )
+				reorderedItems[ 2 ].locator( 'h3 > label > span' )
 			).toHaveText( SECOND_TASK_TEXT );
 
 			// Reload page
@@ -117,13 +117,13 @@ function todoReorderTests( testContext = test ) {
 			// Verify order persists after reload
 			const persistedItems = await todoItems.all();
 			await expect(
-				persistedItems[ 0 ].locator( 'h3 > span' )
+				persistedItems[ 0 ].locator( 'h3 > label > span' )
 			).toHaveText( FIRST_TASK_TEXT );
 			await expect(
-				persistedItems[ 1 ].locator( 'h3 > span' )
+				persistedItems[ 1 ].locator( 'h3 > label > span' )
 			).toHaveText( THIRD_TASK_TEXT );
 			await expect(
-				persistedItems[ 2 ].locator( 'h3 > span' )
+				persistedItems[ 2 ].locator( 'h3 > label > span' )
 			).toHaveText( SECOND_TASK_TEXT );
 		} );
 	} );

tests/e2e/todo.spec.js

@@ -91,7 +91,7 @@ function todoTests( testContext = test ) {
 				'ul#todo-list > prpl-suggested-task li'
 			);
 			await expect( todoItem ).toHaveCount( 1 );
-			await expect( todoItem.locator( 'h3 > span' ) ).toHaveText(
+			await expect( todoItem.locator( 'h3 > label > span' ) ).toHaveText(
 				CREATE_TASK_TEXT
 			);
 		} );