New: output block position for screen readers. Update: refactor the way the screen reader information on block button is delivered.

packages/block-editor/src/components/block-list/block-selection-button.js

@@ -33,6 +33,7 @@ import { focus } from '@wordpress/dom';
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 /**
  * Returns true if the user is using windows.
@@ -51,6 +52,7 @@ function selector( select ) {
 		getNextBlockClientId,
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -70,6 +72,7 @@ function selector( select ) {
 		),
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -93,16 +96,19 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 			const {
 				__unstableGetBlockWithoutInnerBlocks,
 				getBlockIndex,
+				getBlockCount,
 				hasBlockMovingClientId,
 				getBlockListSettings,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId, rootClientId );
+			const total = getBlockCount( rootClientId );
 			const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
 				clientId
 			);
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
 				index,
+				total,
 				name,
 				attributes,
 				blockMovingMode,
@@ -111,7 +117,14 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		total,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -242,11 +255,22 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 	}
 
 	const blockType = getBlockType( name );
+	let parentTitle;
+	const blockInformation = useBlockDisplayInformation(
+		getBlockRootClientId( clientId )
+	);
+	if ( blockInformation !== null ) {
+		parentTitle = blockInformation.title
+			? blockInformation.title
+			: undefined;
+	}
 	const label = getAccessibleBlockLabel(
 		blockType,
 		attributes,
 		index + 1,
-		orientation
+		orientation,
+		total,
+		parentTitle
 	);
 
 	const classNames = classnames(
@@ -262,7 +286,8 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				ref={ ref }
 				onClick={ () => setNavigationMode( false ) }
 				onKeyDown={ onKeyDown }
-				label={ label }
+				describedBy={ label }
+				aria-describedby={ `${ clientId }-description` }
 			>
 				<BlockTitle clientId={ clientId } />
 			</Button>

packages/block-editor/src/components/block-title/index.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBlockLabel as getBlockLabel,
 	isReusableBlock,
 } from '@wordpress/blocks';
+import { VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -73,5 +74,10 @@ export default function BlockTitle( { clientId } ) {
 	if ( label !== blockType.title ) {
 		return truncate( label, { length: 35 } );
 	}
-	return blockInformation.title;
+	return (
+		<>
+			{ `${ blockInformation.title } ` }
+			<VisuallyHidden as="span">Block.</VisuallyHidden>
+		</>
+	);
 }

packages/blocks/src/api/utils.js

@@ -161,19 +161,25 @@ export function getBlockLabel( blockType, attributes, context = 'visual' ) {
  * @param {Object}  attributes             The values of the block's attributes.
  * @param {?number} position               The position of the block in the block list.
  * @param {string}  [direction='vertical'] The direction of the block layout.
+ * @param {number} total The total number of blocks.
+ * @param {string} parentTitle In the event of a child block, this param gets the title of the parent block.
  *
  * @return {string} The block label.
  */
 export function getAccessibleBlockLabel(
 	blockType,
 	attributes,
 	position,
-	direction = 'vertical'
+	direction = 'vertical',
+	total,
+	parentTitle
 ) {
 	// `title` is already localized, `label` is a user-supplied value.
 	const { title } = blockType;
 	const label = getBlockLabel( blockType, attributes, 'accessibility' );
 	const hasPosition = position !== undefined;
+	const parentTitleOutput =
+		parentTitle !== undefined ? ` Child of ${ parentTitle } block.` : '';
 
 	// getBlockLabel returns the block title as a fallback when there's no label,
 	// if it did return the title, this function needs to avoid adding the
@@ -184,53 +190,46 @@ export function getAccessibleBlockLabel(
 	if ( hasPosition && direction === 'vertical' ) {
 		if ( hasLabel ) {
 			return sprintf(
-				/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The block label.. */
-				__( '%1$s Block. Row %2$d. %3$s' ),
-				title,
+				/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. 3: The parent block title. 4: The block label.. */
+				__( '%1$d of %2$d.%3$s %4$s' ),
 				position,
+				total,
+				parentTitleOutput,
 				label
 			);
 		}
 
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block row number. */
-			__( '%1$s Block. Row %2$d' ),
-			title,
-			position
+			/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. 3: The parent block title. */
+			__( '%1$d of %2$d.%3$s' ),
+			position,
+			total,
+			parentTitleOutput
 		);
 	} else if ( hasPosition && direction === 'horizontal' ) {
 		if ( hasLabel ) {
 			return sprintf(
-				/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The block label.. */
-				__( '%1$s Block. Column %2$d. %3$s' ),
-				title,
+				/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. 3: The block parent title. 4: The block label.. */
+				__( 'Column %1$d of %2$d.%3$s %4$s' ),
 				position,
+				total,
+				parentTitleOutput,
 				label
 			);
 		}
 
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block column number. */
-			__( '%1$s Block. Column %2$d' ),
-			title,
-			position
+			/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. 3: The block parent title. */
+			__( 'Column %1$d of %2$d.%3$s' ),
+			position,
+			total,
+			parentTitleOutput
 		);
 	}
 
 	if ( hasLabel ) {
-		return sprintf(
-			/* translators: accessibility text. %1: The block title. %2: The block label. */
-			__( '%1$s Block. %2$s' ),
-			title,
-			label
-		);
+		return sprintf( '%1$s', label );
 	}
-
-	return sprintf(
-		/* translators: accessibility text. %s: The block title. */
-		__( '%s Block' ),
-		title
-	);
 }
 
 /**

packages/components/src/button/index.js

@@ -137,7 +137,7 @@ export function Button( props, ref ) {
 				{ element }
 				{ describedBy && (
 					<VisuallyHidden>
-						<span id={ descriptionId }>{ describedBy }</span>
+						<span id={ describedById }>{ describedBy }</span>
 					</VisuallyHidden>
 				) }
 			</>

packages/components/src/ui/flex/types.ts

@@ -1,7 +1,9 @@
 import { CSSProperties } from 'react';
 import { ResponsiveCSSValue } from '../utils/types';
 
-export type FlexDirection = ResponsiveCSSValue< CSSProperties[ 'flexDirection' ] >;
+export type FlexDirection = ResponsiveCSSValue<
+	CSSProperties[ 'flexDirection' ]
+>;
 
 export type FlexProps = {
 	/**
@@ -195,4 +197,4 @@ export type FlexItemProps = {
 	isBlock?: boolean;
 };
 
-export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;
+export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;

packages/components/src/ui/form-group/types.ts

@@ -3,7 +3,7 @@ import { CSSProperties, ReactNode, ReactText } from 'react';
 /**
  * Internal dependencies
  */
-import { Props as ControlLabelProps } from '../control-label/types'; 
+import { Props as ControlLabelProps } from '../control-label/types';
 import { Props as GridProps } from '../grid/types';
 
 export type FormGroupLabelProps = ControlLabelProps & {
@@ -24,6 +24,6 @@ type Horizontal = GridProps & {
 	horizontal: true;
 };
 
-type Vertical = { horizontal: false; };
+type Vertical = { horizontal: false };
 
-export type FormGroupProps = FormGroupContentProps & (Horizontal | Vertical);
+export type FormGroupProps = FormGroupContentProps & ( Horizontal | Vertical );

packages/components/src/ui/grid/types.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-type ResponsiveCSSValue<T> = Array<T | undefined> | T;
+type ResponsiveCSSValue< T > = Array< T | undefined > | T;
 
 type GridAlignment =
 	| 'bottom'

packages/components/src/ui/h-stack/types.ts

@@ -19,7 +19,7 @@ export type AlignmentProps = {
 	align?: CSSProperties[ 'alignItems' ];
 };
 
-export type Alignments = Record<HStackAlignment, AlignmentProps>;
+export type Alignments = Record< HStackAlignment, AlignmentProps >;
 
 export type Props = Omit< FlexProps, 'align' | 'gap' > & {
 	/**

packages/components/src/ui/text/types.ts

@@ -80,7 +80,7 @@ export interface Props extends TruncateProps {
 	/**
 	 * Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.
 	 */
-	highlightSanitize?: import( 'highlight-words-core' ).FindAllArgs[ 'sanitize' ];
+	highlightSanitize?: import('highlight-words-core').FindAllArgs[ 'sanitize' ];
 	/**
 	 * Sets `Text` to have `display: block`.
 	 */
@@ -169,24 +169,24 @@ export interface Props extends TruncateProps {
 	 * Adjusts letter-spacing of the text.
 	 */
 	letterSpacing?: CSSProperties[ 'letterSpacing' ];
-		/**
-	* Letters or words within `Text` can be highlighted using `highlightWords`.
-	*
-	* @example
-	* ```jsx
-	* import { Text } from `@wordpress/components/ui`
-	*
-	* function Example() {
-	*   return (
-	*     <Text highlightWords={["the"]}>
-	*       Where the north wind meets the sea, there's a river full of memory. Sleep,
-	*       my darling, safe and sound, for in this river all is found. In her waters,
-	*       deep and true, lay the answers and a path for you. Dive down deep into her
-	*       sound, but not too far or you'll be drowned
-	*     </Text>
-	*   )
-	* }
-	* ```
-	*/
+	/**
+	 * Letters or words within `Text` can be highlighted using `highlightWords`.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Text } from `@wordpress/components/ui`
+	 *
+	 * function Example() {
+	 *   return (
+	 *     <Text highlightWords={["the"]}>
+	 *       Where the north wind meets the sea, there's a river full of memory. Sleep,
+	 *       my darling, safe and sound, for in this river all is found. In her waters,
+	 *       deep and true, lay the answers and a path for you. Dive down deep into her
+	 *       sound, but not too far or you'll be drowned
+	 *     </Text>
+	 *   )
+	 * }
+	 * ```
+	 */
 	highlightWords?: string[];
-};
+}

packages/components/src/ui/utils/types.ts

@@ -1,11 +1,11 @@
 import { As } from 'reakit-utils/types';
 import { ViewOwnProps } from '@wp-g2/create-styles';
 
-export type Options<T extends As, P extends ViewOwnProps<{}, T>> = {
+export type Options< T extends As, P extends ViewOwnProps< {}, T > > = {
 	as: T;
 	name: string;
-	useHook: (props: P) => any;
+	useHook: ( props: P ) => any;
 	memo?: boolean;
 };
 
-export type ResponsiveCSSValue<T> = Array<T | undefined> | T;
+export type ResponsiveCSSValue< T > = Array< T | undefined > | T;

packages/components/src/utils/types.ts

@@ -7,7 +7,7 @@ export type SizeRangeDefault =
 
 export type SizeRangeReduced = 'large' | 'medium' | 'small';
 
-export type FormElementProps<V> = {
+export type FormElementProps< V > = {
 	/**
 	 * The default (initial) state to use if `value` is undefined.
 	 */

packages/dependency-extraction-webpack-plugin/lib/types.d.ts

@@ -3,16 +3,16 @@ import { Compiler } from 'webpack';
 export = DependencyExtractionWebpackPlugin;
 
 declare class DependencyExtractionWebpackPlugin {
-    constructor(options: DependencyExtractionWebpackPluginOptions);
-    apply(compiler: Compiler): void;
+	constructor( options: DependencyExtractionWebpackPluginOptions );
+	apply( compiler: Compiler ): void;
 }
 
 declare interface DependencyExtractionWebpackPluginOptions {
-    injectPolyfill?: boolean;
-    useDefaults?: boolean;
-    outputFormat?: 'php' | 'json';
-    requestToExternal?: (request: string) => string | string[] | undefined;
-    requestToHandle?: (request: string) => string | undefined;
-    combinedOutputFile?: string | null;
-    combineAssets?: boolean;
+	injectPolyfill?: boolean;
+	useDefaults?: boolean;
+	outputFormat?: 'php' | 'json';
+	requestToExternal?: ( request: string ) => string | string[] | undefined;
+	requestToHandle?: ( request: string ) => string | undefined;
+	combinedOutputFile?: string | null;
+	combineAssets?: boolean;
 }