From a791c306dbbec7d83001b7027169e63fd32d7aab Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Fri, 8 Sep 2023 17:15:29 -0500 Subject: [PATCH 1/8] Accessibility improvements for table of contents block. --- docs/reference-guides/core-blocks.md | 2 +- .../src/table-of-contents/block.json | 3 ++- .../src/table-of-contents/edit.js | 7 +++++-- .../src/table-of-contents/list.tsx | 18 +++++++++++++++++- .../src/table-of-contents/save.js | 8 +++++++- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e15f321b7b420..2669d92b9532b 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -851,7 +851,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks - **Name:** core/table-of-contents - **Experimental:** true - **Category:** layout -- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** ariaLabel, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** headings, onlyIncludeCurrentPage ## Tag Cloud diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json index 5fa7e37e6acbd..b995745b117ba 100644 --- a/packages/block-library/src/table-of-contents/block.json +++ b/packages/block-library/src/table-of-contents/block.json @@ -45,7 +45,8 @@ "__experimentalDefaultControls": { "fontSize": true } - } + }, + "ariaLabel": true }, "example": {} } diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 915375606b10c..79fa05df764f9 100644 --- a/packages/block-library/src/table-of-contents/edit.js +++ b/packages/block-library/src/table-of-contents/edit.js @@ -137,8 +137,11 @@ export default function TableOfContentsEdit( { return ( <> { toolbarControls } diff --git a/packages/block-library/src/table-of-contents/list.tsx b/packages/block-library/src/table-of-contents/list.tsx index e327f8dfe2e86..6d4d1eadfa0fe 100644 --- a/packages/block-library/src/table-of-contents/list.tsx +++ b/packages/block-library/src/table-of-contents/list.tsx @@ -12,8 +12,10 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry'; export default function TableOfContentsList( { nestedHeadingList, + disableLinkActivation, }: { nestedHeadingList: NestedHeadingData[]; + disableLinkActivation?: boolean; } ): WPElement { return ( <> @@ -21,7 +23,21 @@ export default function TableOfContentsList( { const { content, link } = node.heading; const entry = link ? ( - + event?.preventDefault() + : undefined + } + onContextMenu={ + disableLinkActivation + ? ( event ) => event?.preventDefault() + : undefined + } + > { content } ) : ( diff --git a/packages/block-library/src/table-of-contents/save.js b/packages/block-library/src/table-of-contents/save.js index 7b9556aca33ff..8a6b97ca9b1b2 100644 --- a/packages/block-library/src/table-of-contents/save.js +++ b/packages/block-library/src/table-of-contents/save.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -13,8 +14,13 @@ export default function save( { attributes: { headings = [] } } ) { if ( headings.length === 0 ) { return null; } + + const blockProps = useBlockProps.save( { + 'aria-label': __( 'Table of Contents' ), + } ); + return ( -