Notes: Remove snackbar when resolving or reopening a note

packages/editor/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Enhancements
 
+-   Notes: Remove the snackbar notice shown when a note is resolved or reopened, as the note's appearance already updates in place to reflect the change. The result is still announced to screen readers ([#80017](https://github.com/WordPress/gutenberg/pull/80017)).
 -   The "View the autosave" notice now opens the autosave in the visual revisions view with its changes highlighted, instead of the classic revisions screen. It falls back to the classic screen when visual revisions are disabled ([#79947](https://github.com/WordPress/gutenberg/pull/79947)).
 
 ### Bug Fixes

packages/editor/src/components/collab-sidebar/hooks.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import {
 	useState,
@@ -371,13 +372,6 @@ export function useNoteActions() {
 	};
 
 	const onEdit = async ( { id, content, status } ) => {
-		const messageType = status ? status : 'updated';
-		const messages = {
-			approved: __( 'Note marked as resolved.' ),
-			hold: __( 'Note reopened.' ),
-			updated: __( 'Note updated.' ),
-		};
-
 		try {
 			// For resolution or reopen actions, create a new note with metadata.
 			if ( status === 'approved' || status === 'hold' ) {
@@ -421,6 +415,14 @@ export function useNoteActions() {
 						updateBlockAttributes
 					);
 				}
+
+				// The note visibly updates in place, so there is no snackbar,
+				// but screen reader users still need the confirmation.
+				speak(
+					status === 'approved'
+						? __( 'Note marked as resolved.' )
+						: __( 'Note reopened.' )
+				);
 			} else {
 				const updateData = {
 					id,
@@ -431,16 +433,12 @@ export function useNoteActions() {
 				await saveEntityRecord( 'root', 'comment', updateData, {
 					throwOnError: true,
 				} );
-			}
 
-			createNotice(
-				'snackbar',
-				messages[ messageType ] ?? __( 'Note updated.' ),
-				{
+				createNotice( 'snackbar', __( 'Note updated.' ), {
 					type: 'snackbar',
 					isDismissible: true,
-				}
-			);
+				} );
+			}
 		} catch ( error ) {
 			onError( error );
 		}

test/e2e/specs/editor/various/block-notes.spec.js

@@ -168,11 +168,6 @@ test.describe( 'Block Notes', () => {
 
 		const resolveButton = page.getByRole( 'button', { name: 'Resolve' } );
 		await resolveButton.click();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Note marked as resolved.' } )
-		).toBeVisible();
 		await expect( thread ).toBeFocused();
 		await expect( thread ).toHaveAttribute( 'aria-expanded', 'false' );
 
@@ -181,11 +176,6 @@ test.describe( 'Block Notes', () => {
 
 		await blockNoteUtils.clickBlockNoteActionMenuItem( 'Reopen' );
 		await expect( resolveButton ).toBeEnabled();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Note reopened.' } )
-		).toBeVisible();
 	} );
 
 	test( 'can reopen a resolved note when adding a reply', async ( {
@@ -200,14 +190,11 @@ test.describe( 'Block Notes', () => {
 
 		const resolveButton = page.getByRole( 'button', { name: 'Resolve' } );
 		await resolveButton.click();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Note marked as resolved.' } )
-		).toBeVisible();
 
 		await blockNoteUtils.openBlockNoteSidebar();
 		await page.locator( '.editor-collab-sidebar-panel__thread' ).click();
+		// Re-selecting the thread shows the Resolve button, now disabled,
+		// confirming the note was resolved.
 		await expect( resolveButton ).toBeDisabled();
 		const commentForm = page.getByRole( 'textbox', { name: 'Reply to' } );
 		await commentForm.fill( 'Test reply that reopens the comment.' );
@@ -217,11 +204,6 @@ test.describe( 'Block Notes', () => {
 			.click();
 
 		await expect( resolveButton ).toBeEnabled();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Note reopened.' } )
-		).toBeVisible();
 	} );
 
 	test( 'shows a "Resolved" divider between active and resolved notes', async ( {
@@ -269,13 +251,9 @@ test.describe( 'Block Notes', () => {
 			'true'
 		);
 		await page.getByRole( 'button', { name: 'Resolve' } ).click();
-		await expect(
-			page
-				.getByRole( 'button', { name: 'Dismiss this notice' } )
-				.filter( { hasText: 'Note marked as resolved.' } )
-		).toBeVisible();
 
-		// The divider now labels the resolved section.
+		// The divider appearing confirms the resolve completed and now labels
+		// the resolved section.
 		await expect( separator ).toBeVisible();
 		await expect( separator ).toHaveText( 'Resolved' );
 
@@ -1098,11 +1076,9 @@ test.describe( 'Block Notes', () => {
 			} );
 			await threadA.click();
 			await page.getByRole( 'button', { name: 'Resolve' } ).click();
-			await expect(
-				page
-					.getByRole( 'button', { name: 'Dismiss this notice' } )
-					.filter( { hasText: 'Note marked as resolved.' } )
-			).toBeVisible();
+			// Resolving removes the note from the floating "Unresolved notes"
+			// view, which confirms the action completed.
+			await expect( threadA ).toBeHidden();
 
 			// Note B should still be visible and unresolved (expanded).
 			const threadB = settings.getByRole( 'treeitem', {
@@ -1141,11 +1117,9 @@ test.describe( 'Block Notes', () => {
 			} );
 			await firstThread.click();
 			await page.getByRole( 'button', { name: 'Resolve' } ).click();
-			await expect(
-				page
-					.getByRole( 'button', { name: 'Dismiss this notice' } )
-					.filter( { hasText: 'Note marked as resolved.' } )
-			).toBeVisible();
+			// Resolving removes the note from the floating "Unresolved notes"
+			// view, which confirms the action completed.
+			await expect( firstThread ).toBeHidden();
 
 			// Click the title to deselect the block and its comment.
 			await editor.canvas
@@ -1450,11 +1424,6 @@ test.describe( 'Block Notes', () => {
 			// Resolving drops the highlight, so the marker is removed from the
 			// content and the note settles back to a block-level note.
 			await page.getByRole( 'button', { name: 'Resolve' } ).click();
-			await expect(
-				page
-					.getByRole( 'button', { name: 'Dismiss this notice' } )
-					.filter( { hasText: 'Note marked as resolved.' } )
-			).toBeVisible();
 
 			await expect( editor.canvas.locator( 'mark.wp-note' ) ).toHaveCount(
 				0