Skip to content

Revisions: Specify block level diff status via aria-label #77779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
himanshupathak95 wants to merge 12 commits into
base: trunk
Choose a base branch
from
+56 −12
Open

Revisions: Specify block level diff status via aria-label #77779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8afb2a8
create a block element reference handle
himanshupathak95 Apr 28, 2026
97e5f1a
set block level aria labels according to the diff
himanshupathak95 Apr 28, 2026
f58a0e5
add status aware aria labels for block diff statuses
himanshupathak95 Apr 28, 2026
1b202c9
set aria-label for block elements based on diff status
himanshupathak95 Apr 28, 2026
20e03c4
Add doc block for getDiffStatusLabel function
himanshupathak95 Apr 28, 2026
97aef97
remove aria-label from block elements when diff status is not present
himanshupathak95 Apr 28, 2026
7f5268e
improve line spacing
himanshupathak95 Apr 28, 2026
1564b71
streamline aria-label handling for block diff statuses
himanshupathak95 May 25, 2026
c07f0fa
enhance aria-label handling for paragraph block based on content state
himanshupathak95 May 25, 2026
3547840
update aria-label handling in useBlockProps to prioritize wrapperProps
himanshupathak95 May 25, 2026
877b4ac
use switch case for `getDiffStatusLabel`
himanshupathak95 May 26, 2026
b931940
update aria-label handling in ParagraphBlock to use dynamic block typ…
himanshupathak95 May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/use-block-props/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
ref: mergedRefs,
id: `block-${ clientId }${ htmlSuffix }`,
role: 'document',
'aria-label': blockLabel,
'aria-label': wrapperProps[ 'aria-label' ] || blockLabel,

@ellatrix ellatrix Jun 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be careful not to introduce a new API here. If it wasn't possible before for extenders to set an aria label, then I'm not sure if we should add that. Perhaps we can check the store if revisions mode is on, or add some React context?

@himanshupathak95 himanshupathak95 Jun 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @ellatrix, thanks for the feedback!

What do you think about using a private React context (e.g., BlockAriaLabelOverrideContext exported via lock-unlock)? We could provide the diff label from revisions-canvas.js and consume it directly in useBlockProps.

This approach lets us completely revert the changes to the paragraph block and avoids passing anything through wrapperProps.

'data-block': clientId,
'data-type': name,
'data-title': blockTitle,
Expand Down
24 changes: 15 additions & 9 deletions packages/block-library/src/paragraph/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { __, _x, isRTL } from '@wordpress/i18n';
import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
import {
ToolbarButton,
ToggleControl,
Expand Down Expand Up @@ -119,6 +119,18 @@ function ParagraphBlock( {
style: { direction },
} );
const blockEditingMode = useBlockEditingMode();
const { 'aria-label': injectedAriaLabel, ...restBlockProps } = blockProps;
// translators: %s: block type title e.g. "Paragraph"
const blockLabel = sprintf( __( 'Block: %s' ), blockProps[ 'data-title' ] );

@ellatrix ellatrix Jun 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's a good idea to force blocks to change. Why are moving this here?

@ellatrix ellatrix Jun 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we apply the label after spreading rich text props in the block props?

@himanshupathak95 himanshupathak95 Jun 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applying it after the spread was overriding the injected diff labels.


let ariaLabel = __( 'Block: Paragraph' );
if ( injectedAriaLabel !== blockLabel ) {
ariaLabel = injectedAriaLabel;
} else if ( RichText.isEmpty( content ) ) {
ariaLabel = __(
'Empty block; start writing or type forward slash to choose a block'
);
}

return (
<>
Expand All @@ -143,21 +155,15 @@ function ParagraphBlock( {
<RichText
identifier="content"
tagName="p"
{ ...blockProps }
{ ...restBlockProps }
value={ content }
onChange={ ( newContent ) =>
setAttributes( { content: newContent } )
}
onMerge={ mergeBlocks }
onReplace={ onReplace }
onRemove={ onRemove }
aria-label={
RichText.isEmpty( content )
? __(
'Empty block; start writing or type forward slash to choose a block'
)
: __( 'Block: Paragraph' )
}
aria-label={ ariaLabel }
data-empty={ RichText.isEmpty( content ) }
placeholder={ placeholder || __( 'Type / to choose a block' ) }
data-custom-placeholder={ placeholder ? true : undefined }
Expand Down
42 changes: 40 additions & 2 deletions packages/editor/src/components/post-revisions-preview/revisions-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { getBlockType } from '@wordpress/blocks';
import { sprintf, __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -92,6 +94,27 @@ const REVISION_DIFF_STYLES = `
}
`;

/**
* Returns an accessible label for a block based on its revision diff status.
*
* @param {string} status The diff status: 'added', 'removed', or 'modified'.
* @param {string} blockTitle The human-readable block type name.
* @return {string|undefined} The aria-label string, or undefined if not applicable.
*/
function getDiffStatusLabel( status, blockTitle ) {
Comment thread
himanshupathak95 marked this conversation as resolved.
switch ( status ) {
case 'added':
// translators: %s: block type name e.g. "Paragraph"
return sprintf( __( 'Added Block: %s' ), blockTitle );
case 'removed':
// translators: %s: block type name e.g. "Paragraph"
return sprintf( __( 'Removed Block: %s' ), blockTitle );
case 'modified':
// translators: %s: block type name e.g. "Paragraph"
return sprintf( __( 'Modified Block: %s' ), blockTitle );
}
}

/**
* Filter to add diff status CSS classes to blocks.
*
Expand All @@ -100,16 +123,31 @@ const REVISION_DIFF_STYLES = `
*/
function withRevisionDiffClasses( BlockListBlock ) {
return ( props ) => {
const { block, className } = props;
const { block, className, wrapperProps } = props;
const diffStatus = block?.__revisionDiffStatus?.status;

const blockTitle = getBlockType( block.name )?.title;
const diffLabel =
diffStatus && blockTitle
? getDiffStatusLabel( diffStatus, blockTitle )
: undefined;

const enhancedClassName = clsx( className, {
'is-revision-added': diffStatus === 'added',
'is-revision-removed': diffStatus === 'removed',
'is-revision-modified': diffStatus === 'modified',
} );

return <BlockListBlock { ...props } className={ enhancedClassName } />;
return (
<BlockListBlock
{ ...props }
className={ enhancedClassName }
wrapperProps={ {
...wrapperProps,
...( diffLabel && { 'aria-label': diffLabel } ),
} }
/>
);
};
}

Expand Down
Loading