Skip to content

Commit 89d4e2e

Browse files
draganescuclaude
andcommitted
Grid: Announce the row count after adding or removing rows
The row count label is only shown while a row handle is dragged, and screen readers never heard it. Announce the grid's new row count when the resize ends. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 parent fca4159 commit 89d4e2e

2 files changed

Lines changed: 24 additions & 7 deletions

File tree

‎packages/block-editor/src/components/grid/grid-row-resizer.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
HTMLAttributes,
66
PointerEvent,
77
} from 'react';
8+
import { speak } from '@wordpress/a11y';
89
import { ResizableBox } from '@wordpress/components';
910
import { useState } from '@wordpress/element';
1011
import { _n, sprintf } from '@wordpress/i18n';
@@ -106,10 +107,24 @@ export function GridRowResizer( { clientId }: GridRowResizerProps ) {
106107
} }
107108
onResizeStop={ ( _event, direction, _element, delta ) => {
108109
setResize( null );
109-
resizeRows(
110+
const rowCount = resizeRows(
110111
direction as Edge,
111112
getRowDelta( delta.height )
112113
);
114+
// The row count label is only shown while resizing.
115+
if ( rowCount ) {
116+
speak(
117+
sprintf(
118+
/* translators: %d: Number of rows in a grid. */
119+
_n(
120+
'The grid now has %d row.',
121+
'The grid now has %d rows.',
122+
rowCount
123+
),
124+
rowCount
125+
)
126+
);
127+
}
113128
} }
114129
>
115130
{ resize && (

‎packages/block-editor/src/components/grid/use-resize-grid-rows.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ interface ResizeGridRows {
1414
*/
1515
getRowCount: ( edge: GridEdge, rowDelta: number ) => number;
1616
/**
17-
* Applies a resize.
17+
* Applies a resize, and gives the new row count, or `undefined` when
18+
* nothing changes.
1819
*/
19-
resizeRows: ( edge: GridEdge, rowDelta: number ) => void;
20+
resizeRows: ( edge: GridEdge, rowDelta: number ) => number | undefined;
2021
}
2122

2223
/**
@@ -27,7 +28,7 @@ interface ResizeGridRows {
2728
*
2829
* @param gridClientId Client ID of the grid.
2930
*
30-
* @return `getRowCount` gives the row count a resize would lead to, and `resizeRows` applies it.
31+
* @return `getRowCount` gives the row count a resize would lead to, and `resizeRows` applies it and gives the new row count.
3132
*/
3233
export function useResizeGridRows( gridClientId: string ): ResizeGridRows {
3334
const registry = useRegistry();
@@ -60,17 +61,18 @@ export function useResizeGridRows( gridClientId: string ): ResizeGridRows {
6061
const resizeRows = useCallback(
6162
( edge: GridEdge, rowDelta: number ) => {
6263
if ( ! rowDelta ) {
63-
return;
64+
return undefined;
6465
}
65-
const { updates } = getResize( edge, rowDelta );
66+
const { rowCount, updates } = getResize( edge, rowDelta );
6667
if ( ! updates ) {
67-
return;
68+
return undefined;
6869
}
6970
updateBlockAttributes(
7071
Object.keys( updates ),
7172
updates,
7273
/* uniqueByBlock: */ true
7374
);
75+
return rowCount;
7476
},
7577
[ getResize, updateBlockAttributes ]
7678
);

0 commit comments

Comments
 (0)