Merge branch 'develop' into filip/phpunit-tests

Emilia-Capital · Nov 13, 2024 · fdef86d · fdef86d
2 parents 511cfdd + 0551ceb
commit fdef86d
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
-= - in development =
+= 0.9.6 =
+
+Fixed:
+
+* Accessibility of the to-do list.
+
+= 0.9.5 =
 
 Fixed:
 

diff --git a/assets/css/page-widgets/todo.css b/assets/css/page-widgets/todo.css
@@ -68,6 +68,7 @@
 		}
 
 		.content {
+			font-size: 1rem;
 			padding: 0;
 			margin-top: 2px;
 			margin-left: 1em;
@@ -86,7 +87,9 @@
 			}
 		}
 
-		.trash {
+		.trash,
+		.move-up,
+		.move-down {
 			opacity: 0;
 			padding: 0;
 			border: 0;
@@ -96,9 +99,38 @@
 			box-shadow: none;
 			transition: all 0.1s;
 			margin-top: 1px;
+		}
+
+		.trash {
+			width: 2rem;
+			height: 1rem;
+
+			&:hover {
+
+				svg path {
+					fill: var(--prpl-color-accent-red);
+				}
+			}
+		}
+
+		.prpl-move-buttons {
+			display: flex;
+			gap: 0;
+			flex-direction: column;
+		}
+
+		.move-up,
+		.move-down {
+			height: 0.75rem;
 
 			&:hover {
-				color: var(--prpl-color-accent-red);
+				color: var(--prpl-color-gray-6);
+			}
+
+			.dashicons {
+				font-size: 0.875rem;
+				width: 1em;
+				height: 1em;
 			}
 		}
 
@@ -115,14 +147,21 @@
 		&:hover,
 		&:focus-within {
 
-			.trash {
+			.trash,
+			.move-up,
+			.move-down {
 				opacity: 1;
 			}
 
 			.prpl-todo-drag-handle {
 				opacity: 1;
 			}
 		}
+
+		&:first-child .move-up,
+		&:last-child .move-down {
+			display: none;
+		}
 	}
 }
 

diff --git a/assets/js/todo.js b/assets/js/todo.js
@@ -95,6 +95,14 @@ const progressPlannerInjectTodoItem = ( content, done, addToStart, save ) => {
 		'%s',
 		content
 	);
+	const moveUpTaskAriaLabel = progressPlannerTodo.i18n.taskMoveUp.replace(
+		'%s',
+		content
+	);
+	const moveDownTaskAriaLabel = progressPlannerTodo.i18n.taskMoveDown.replace(
+		'%s',
+		content
+	);
 
 	const todoItemElement = jQuery( '<li></li>' ).html( `
 		<span class="prpl-todo-drag-handle" aria-label="${
@@ -106,7 +114,13 @@ const progressPlannerInjectTodoItem = ( content, done, addToStart, save ) => {
 		</span>
 		<input type="checkbox" aria-label="'${ content }'" ${ done ? 'checked' : '' }>
 		<span class="content" contenteditable="plaintext-only">${ content }</span>
-		<button class="trash" aria-label="${ deleteTaskAriaLabel }"><span class="dashicons dashicons-trash"></span></button>
+		<span class="prpl-move-buttons">
+			<button class="move-up" aria-label="${ moveUpTaskAriaLabel }"><span class="dashicons dashicons-arrow-up-alt2"></span></button>
+			<button class="move-down" aria-label="${ moveDownTaskAriaLabel }"><span class="dashicons dashicons-arrow-down-alt2"></span></button>
+		</span>
+		<button class="trash" aria-label="${ deleteTaskAriaLabel }">
+			<svg role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#9ca3af" d="M32.99 47.88H15.01c-3.46 0-6.38-2.7-6.64-6.15L6.04 11.49l-.72.12c-.82.14-1.59-.41-1.73-1.22-.14-.82.41-1.59 1.22-1.73.79-.14 1.57-.26 2.37-.38h.02c2.21-.33 4.46-.6 6.69-.81v-.72c0-3.56 2.74-6.44 6.25-6.55 2.56-.08 5.15-.08 7.71 0 3.5.11 6.25 2.99 6.25 6.55v.72c2.24.2 4.48.47 6.7.81.79.12 1.59.25 2.38.39.82.14 1.36.92 1.22 1.73-.14.82-.92 1.36-1.73 1.22l-.72-.12-2.33 30.24c-.27 3.45-3.18 6.15-6.64 6.15Zm-17.98-3h17.97c1.9 0 3.51-1.48 3.65-3.38l2.34-30.46c-2.15-.3-4.33-.53-6.48-.7h-.03c-5.62-.43-11.32-.43-16.95 0h-.03c-2.15.17-4.33.4-6.48.7l2.34 30.46c.15 1.9 1.75 3.38 3.65 3.38ZM24 7.01c2.37 0 4.74.07 7.11.22v-.49c0-1.93-1.47-3.49-3.34-3.55-2.5-.08-5.03-.08-7.52 0-1.88.06-3.34 1.62-3.34 3.55v.49c2.36-.15 4.73-.22 7.11-.22Zm5.49 32.26h-.06c-.83-.03-1.47-.73-1.44-1.56l.79-20.65c.03-.83.75-1.45 1.56-1.44.83.03 1.47.73 1.44 1.56l-.79 20.65c-.03.81-.7 1.44-1.5 1.44Zm-10.98 0c-.8 0-1.47-.63-1.5-1.44l-.79-20.65c-.03-.83.61-1.52 1.44-1.56.84 0 1.52.61 1.56 1.44l.79 20.65c.03.83-.61 1.52-1.44 1.56h-.06Z"/></svg>
+		</button>
 	` );
 
 	if ( addToStart ) {
@@ -217,4 +231,20 @@ progressPlannerDomReady( () => {
 			jQuery( '#new-todo-content' ).focus();
 		}
 	} );
+
+	// When the move up button is clicked, move the todo item up the list
+	jQuery( '#todo-list' ).on( 'click', '.move-up', function () {
+		const todoItem = jQuery( this ).closest( 'li' );
+		todoItem.insertBefore( todoItem.prev( 'li' ) );
+		progressPlannerSaveTodoList();
+		wp.a11y.speak( progressPlannerTodo.i18n.taskMovedUp );
+	} );
+
+	// When the move down button is clicked, move the todo item down the list
+	jQuery( '#todo-list' ).on( 'click', '.move-down', function () {
+		const todoItem = jQuery( this ).closest( 'li' );
+		todoItem.insertAfter( todoItem.next( 'li' ) );
+		progressPlannerSaveTodoList();
+		wp.a11y.speak( progressPlannerTodo.i18n.taskMovedDown );
+	} );
 } );
diff --git a/classes/admin/class-page.php b/classes/admin/class-page.php
@@ -193,7 +193,7 @@ public function register_scripts() {
 		\wp_register_script(
 			'progress-planner-todo',
 			PROGRESS_PLANNER_URL . '/assets/js/todo.js',
-			[ 'jquery-ui-sortable', 'progress-planner-ajax', 'wp-util', 'progress-planner-grid-masonry' ],
+			[ 'jquery-ui-sortable', 'progress-planner-ajax', 'wp-util', 'progress-planner-grid-masonry', 'wp-a11y' ],
 			filemtime( PROGRESS_PLANNER_DIR . '/assets/js/todo.js' ),
 			true
 		);
@@ -231,6 +231,12 @@ public function register_scripts() {
 					/* translators: %s: The task content. */
 					'taskDelete'       => \esc_html__( "Delete task '%s'", 'progress-planner' ),
 					/* translators: %s: The task content. */
+					'taskMoveUp'       => \esc_html__( "Move task '%s' up", 'progress-planner' ),
+					/* translators: %s: The task content. */
+					'taskMoveDown'     => \esc_html__( "Move task '%s' down", 'progress-planner' ),
+					'taskMovedUp'      => \esc_html__( 'Task moved up', 'progress-planner' ),
+					'taskMovedDown'    => \esc_html__( 'Task moved down', 'progress-planner' ),
+					/* translators: %s: The task content. */
 					'taskCompleted'    => \esc_html__( "Task '%s' completed and moved to the bottom", 'progress-planner' ),
 					/* translators: %s: The task content. */
 					'taskNotCompleted' => \esc_html__( "Task '%s' marked as not completed and moved to the top", 'progress-planner' ),

diff --git a/progress-planner.php b/progress-planner.php
@@ -9,7 +9,7 @@
  * Description:       A plugin to help you fight procrastination and get things done.
  * Requires at least: 6.3
  * Requires PHP:      7.4
- * Version:           0.9.5
+ * Version:           0.9.6
  * Author:            Team Emilia Projects
  * Author URI:        https://prpl.fyi/about
  * License:           GPL-3.0+

diff --git a/readme.txt b/readme.txt
@@ -4,7 +4,7 @@ Tags: planning, maintenance, writing, blogging
 Requires at least: 6.3
 Tested up to: 6.6
 Requires PHP: 7.4
-Stable tag: 0.9.5
+Stable tag: 0.9.6
 License: GPL3+
 License URI: https://www.gnu.org/licenses/gpl-3.0.en.html