Fix the post summary Status toggle button accessibility (#63988)

* Fix Change status label. * Add missing aria-expanded attribute to Status setting. Co-authored-by: afercia <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · Sep 3, 2024 · 7bd8f8e · 7bd8f8e
1 parent cdc5b49
commit 7bd8f8e
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 13 deletions.
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
@@ -171,17 +171,18 @@ export default function PostStatus() {
 					contentClassName="editor-change-status__content"
 					popoverProps={ popoverProps }
 					focusOnMount
-					renderToggle={ ( { onToggle } ) => (
+					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
 							variant="tertiary"
 							size="compact"
 							onClick={ onToggle }
 							icon={ postStatusesInfo[ status ]?.icon }
 							aria-label={ sprintf(
 								// translators: %s: Current post status.
-								__( 'Change post status: %s' ),
+								__( 'Change status: %s' ),
 								postStatusesInfo[ status ]?.label
 							) }
+							aria-expanded={ isOpen }
 						>
 							{ postStatusesInfo[ status ]?.label }
 						</Button>

diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -80,9 +80,7 @@ test.describe( 'Change detection', () => {
 
 		// Toggle post as needing review (not persisted for autosave).
 		await editor.openDocumentSettingsSidebar();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Pending' } ).click();
 		// Force autosave to occur immediately.
 		await Promise.all( [

diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Post visibility', () => {
 			await editor.openDocumentSettingsSidebar();
 
 			await page
-				.getByRole( 'button', { name: 'Change post status:' } )
+				.getByRole( 'button', { name: 'Change status:' } )
 				.click();
 			await page.getByRole( 'radio', { name: 'Private' } ).click();
 
@@ -57,9 +57,7 @@ test.describe( 'Post visibility', () => {
 				name: 'Close',
 			} )
 			.click();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Private' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )

diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
@@ -183,9 +183,7 @@ test.describe( 'Preview', () => {
 
 		// Return to editor and switch to Draft.
 		await editorPage.bringToFront();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Draft' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )

diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -47,7 +47,7 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 
 					await editor.openDocumentSettingsSidebar();
 					await page
-						.getByRole( 'button', { name: 'Change post status:' } )
+						.getByRole( 'button', { name: 'Change status:' } )
 						.click();
 					await page.getByRole( 'radio', { name: 'Draft' } ).click();