Add better ARIA labels to toggle buttons in Summary panel (#42114)

* Add better aria-labels to toggles in Summary panel * Update e2e tests * Fix typo Co-authored-by: Alex Stine <[email protected]> Co-authored-by: Alex Stine <[email protected]>
WordPress · Jul 5, 2022 · fa923ec · fa923ec
1 parent 8128e24
commit fa923ec
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 50 deletions.
diff --git a/packages/e2e-tests/specs/editor/various/post-visibility.test.js b/packages/e2e-tests/specs/editor/various/post-visibility.test.js
@@ -19,7 +19,7 @@ describe( 'Post visibility', () => {
 
 			await openDocumentSettingsSidebar();
 
-			await page.click( '.edit-post-post-visibility__toggle' );
+			await page.click( '*[aria-label^="Select visibility"]' );
 
 			const [ privateLabel ] = await page.$x(
 				'//label[text()="Private"]'
@@ -57,7 +57,7 @@ describe( 'Post visibility', () => {
 					.getEditedPostAttribute( 'status' );
 			} );
 
-			await page.click( '.edit-post-post-visibility__toggle' );
+			await page.click( '*[aria-label^="Select visibility"]' );
 
 			const [ privateLabel ] = await page.$x(
 				'//label[text()="Private"]'
@@ -90,7 +90,7 @@ describe( 'Post visibility', () => {
 		await openDocumentSettingsSidebar();
 
 		// Set a publish date for the next month.
-		await page.click( '.edit-post-post-schedule__toggle' );
+		await page.click( '*[aria-label^="Change date"]' );
 		await page.click(
 			'*[aria-label="Move forward to switch to the next month."]'
 		);
@@ -100,7 +100,7 @@ describe( 'Post visibility', () => {
 			)
 		 )[ 0 ].click();
 
-		await page.click( '.edit-post-post-visibility__toggle' );
+		await page.click( '*[aria-label^="Select visibility"]' );
 
 		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
 		await privateLabel.click();

diff --git a/packages/e2e-tests/specs/editor/various/scheduling.test.js b/packages/e2e-tests/specs/editor/various/scheduling.test.js
@@ -39,7 +39,7 @@ describe( 'Scheduling', () => {
 				expect( await getPublishButtonText() ).toBe( 'Publish' );
 
 				// Open the datepicker.
-				await page.click( '.edit-post-post-schedule__toggle' );
+				await page.click( '*[aria-label^="Change date"]' );
 
 				// Change the publishing date to a year in the future.
 				await page.click( '.components-datetime__time-field-year' );
@@ -56,7 +56,7 @@ describe( 'Scheduling', () => {
 	it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => {
 		await createNewPost();
 
-		await page.click( '.edit-post-post-schedule__toggle' );
+		await page.click( '*[aria-label^="Change date"]' );
 		await page.click(
 			'*[aria-label="Move backward to switch to the previous month."]'
 		);

diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js
@@ -8,8 +8,7 @@ import {
 	publishPost,
 } from '@wordpress/e2e-test-utils';
 
-// TODO: Use a more accessible selector.
-const urlRowSelector = '.edit-post-post-url';
+const urlButtonSelector = '*[aria-label^="Change URL"]';
 
 // This tests are not together with the remaining sidebar tests,
 // because we need to publish/save a post, to correctly test the permalink row.
@@ -30,7 +29,7 @@ describe( 'Sidebar Permalink', () => {
 		await publishPost();
 		// Start editing again.
 		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlRowSelector ) ).toBeNull();
+		expect( await page.$( urlButtonSelector ) ).toBeNull();
 	} );
 
 	it( 'should not render URL when post is public but not publicly queryable', async () => {
@@ -39,7 +38,7 @@ describe( 'Sidebar Permalink', () => {
 		await publishPost();
 		// Start editing again.
 		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlRowSelector ) ).toBeNull();
+		expect( await page.$( urlButtonSelector ) ).toBeNull();
 	} );
 
 	it( 'should render URL when post is public and publicly queryable', async () => {
@@ -48,6 +47,6 @@ describe( 'Sidebar Permalink', () => {
 		await publishPost();
 		// Start editing again.
 		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlRowSelector ) ).not.toBeNull();
+		expect( await page.$( urlButtonSelector ) ).not.toBeNull();
 	} );
 } );
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -1,21 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
-	PostScheduleLabel,
 	PostScheduleCheck,
 	usePostScheduleLabel,
 } from '@wordpress/editor';
 
 export default function PostSchedule() {
 	const anchorRef = useRef();
-
-	const fullLabel = usePostScheduleLabel( { full: true } );
-
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -24,18 +20,11 @@ export default function PostSchedule() {
 					popoverProps={ { anchorRef } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
-					renderToggle={ ( { onToggle, isOpen } ) => (
-						<>
-							<Button
-								className="edit-post-post-schedule__toggle"
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								variant="tertiary"
-								label={ fullLabel }
-							>
-								<PostScheduleLabel />
-							</Button>
-						</>
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostScheduleToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
 					) }
 					renderContent={ ( { onClose } ) => (
 						<PostScheduleForm onClose={ onClose } />
@@ -45,3 +34,22 @@ export default function PostSchedule() {
 		</PostScheduleCheck>
 	);
 }
+
+function PostScheduleToggle( { isOpen, onClick } ) {
+	const label = usePostScheduleLabel();
+	const fullLabel = usePostScheduleLabel( { full: true } );
+	return (
+		<Button
+			className="edit-post-post-schedule__toggle"
+			variant="tertiary"
+			label={ fullLabel }
+			showTooltip
+			aria-expanded={ isOpen }
+			// translators: %s: Current post date.
+			aria-label={ sprintf( __( 'Change date: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
diff --git a/packages/edit-post/src/components/sidebar/post-url/index.js b/packages/edit-post/src/components/sidebar/post-url/index.js
@@ -3,16 +3,15 @@
  */
 import { useRef } from '@wordpress/element';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	PostURLCheck,
-	PostURLLabel,
 	PostURL as PostURLForm,
+	usePostURLLabel,
 } from '@wordpress/editor';
 
 export default function PostURL() {
 	const anchorRef = useRef();
-
 	return (
 		<PostURLCheck>
 			<PanelRow className="edit-post-post-url" ref={ anchorRef }>
@@ -23,14 +22,7 @@ export default function PostURL() {
 					className="edit-post-post-url__dropdown"
 					contentClassName="edit-post-post-url__dialog"
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="edit-post-post-url__toggle"
-							variant="tertiary"
-							aria-expanded={ isOpen }
-							onClick={ onToggle }
-						>
-							<PostURLLabel />
-						</Button>
+						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
 					) }
 					renderContent={ ( { onClose } ) => (
 						<PostURLForm onClose={ onClose } />
@@ -40,3 +32,19 @@ export default function PostURL() {
 		</PostURLCheck>
 	);
 }
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const label = usePostURLLabel();
+	return (
+		<Button
+			className="edit-post-post-url__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post URL.
+			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import {
 	PostVisibility as PostVisibilityForm,
 	PostVisibilityLabel,
 	PostVisibilityCheck,
+	usePostVisibilityLabel,
 } from '@wordpress/editor';
 import { useRef } from '@wordpress/element';
 
@@ -33,14 +34,10 @@ export function PostVisibility() {
 								anchorRef: rowRef.current,
 							} }
 							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									aria-expanded={ isOpen }
-									className="edit-post-post-visibility__toggle"
+								<PostVisibilityToggle
+									isOpen={ isOpen }
 									onClick={ onToggle }
-									variant="tertiary"
-								>
-									<PostVisibilityLabel />
-								</Button>
+								/>
 							) }
 							renderContent={ ( { onClose } ) => (
 								<PostVisibilityForm onClose={ onClose } />
@@ -53,4 +50,20 @@ export function PostVisibility() {
 	);
 }
 
+function PostVisibilityToggle( { isOpen, onClick } ) {
+	const label = usePostVisibilityLabel();
+	return (
+		<Button
+			className="edit-post-post-visibility__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post visibility.
+			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
+
 export default PostVisibility;
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -61,9 +61,12 @@ export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';
 export { default as PostURL } from './post-url';
 export { default as PostURLCheck } from './post-url/check';
-export { default as PostURLLabel } from './post-url/label';
+export { default as PostURLLabel, usePostURLLabel } from './post-url/label';
 export { default as PostVisibility } from './post-visibility';
-export { default as PostVisibilityLabel } from './post-visibility/label';
+export {
+	default as PostVisibilityLabel,
+	usePostVisibilityLabel,
+} from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';

diff --git a/packages/editor/src/components/post-schedule/label.js b/packages/editor/src/components/post-schedule/label.js
@@ -14,7 +14,7 @@ export default function PostScheduleLabel( props ) {
 	return usePostScheduleLabel( props );
 }
 
-export function usePostScheduleLabel( { full } ) {
+export function usePostScheduleLabel( { full = false } = {} ) {
 	const { date, isFloating } = useSelect(
 		( select ) => ( {
 			date: select( editorStore ).getEditedPostAttribute( 'date' ),

diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js
@@ -10,6 +10,10 @@ import { filterURLForDisplay } from '@wordpress/url';
 import { store as editorStore } from '../../store';
 
 export default function PostURLLabel() {
+	return usePostURLLabel();
+}
+
+export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getCurrentPost().link,
 		[]

diff --git a/packages/editor/src/components/post-visibility/label.js b/packages/editor/src/components/post-visibility/label.js
@@ -10,6 +10,10 @@ import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
 export default function PostVisibilityLabel() {
+	return usePostVisibilityLabel();
+}
+
+export function usePostVisibilityLabel() {
 	const visibility = useSelect( ( select ) =>
 		select( editorStore ).getEditedPostVisibility()
 	);