Table of contents block accessibility improvements (#54322)

* Accessibility improvements for table of contents block. * Revert save function changes. * Remove unneeded support. * Add screen reader description. * Try using a callback to announce message. * Revert blockProps change. * Disable sub-headings. * Less code for handling onClick callback.
WordPress · Sep 27, 2023 · 9293a5a · 9293a5a
1 parent 2283d6b
commit 9293a5a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
@@ -19,6 +19,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -50,6 +52,24 @@ export default function TableOfContentsEdit( {
 	useObserveHeadings( clientId );
 
 	const blockProps = useBlockProps();
+	const instanceId = useInstanceId(
+		TableOfContentsEdit,
+		'table-of-contents'
+	);
+
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -137,8 +157,12 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol inert="true">
-					<TableOfContentsList nestedHeadingList={ headingTree } />
+				<ol>
+					<TableOfContentsList
+						nestedHeadingList={ headingTree }
+						disableLinkActivation={ true }
+						onClick={ showRedirectionPreventedNotice }
+					/>
 				</ol>
 			</nav>
 			{ toolbarControls }

diff --git a/packages/block-library/src/table-of-contents/list.tsx b/packages/block-library/src/table-of-contents/list.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MouseEvent } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -12,16 +17,30 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';
 
 export default function TableOfContentsList( {
 	nestedHeadingList,
+	disableLinkActivation,
+	onClick,
 }: {
 	nestedHeadingList: NestedHeadingData[];
+	disableLinkActivation?: boolean;
+	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
 } ): WPElement {
 	return (
 		<>
 			{ nestedHeadingList.map( ( node, index ) => {
 				const { content, link } = node.heading;
 
 				const entry = link ? (
-					<a className={ ENTRY_CLASS_NAME } href={ link }>
+					<a
+						className={ ENTRY_CLASS_NAME }
+						href={ link }
+						aria-disabled={ disableLinkActivation || undefined }
+						onClick={
+							disableLinkActivation &&
+							'function' === typeof onClick
+								? onClick
+								: undefined
+						}
+					>
 						{ content }
 					</a>
 				) : (
@@ -35,6 +54,15 @@ export default function TableOfContentsList( {
 							<ol>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
+									disableLinkActivation={
+										disableLinkActivation
+									}
+									onClick={
+										disableLinkActivation &&
+										'function' === typeof onClick
+											? onClick
+											: undefined
+									}
 								/>
 							</ol>
 						) : null }