How to use @wordpress/a11y - 10 common examples

id: HowTo.generateId( "how-to-step" ),
			name,
			text,
			jsonName: "",
			jsonText: "",
		} );

		this.props.setAttributes( { steps } );

		if ( focus ) {
			setTimeout( this.setFocus.bind( this, `${ index + 1 }:name` ) );
			// When moving focus to a newly created step, return and don't use the speak() messaage.
			return;
		}

		speak( __( "New step added", "wordpress-seo" ) );
	}

const announceLoadingCompletion = ( totalProducts ) => {
	if ( ! Number.isFinite( totalProducts ) ) {
		return;
	}

	if ( totalProducts === 0 ) {
		speak( __( 'No products found', 'woocommerce' ) );
	} else {
		speak(
			sprintf(
				// translators: %s is an integer higher than 0 (1, 2, 3...)
				_n(
					'%d product found',
					'%d products found',
					totalProducts,
					'woocommerce'
				),
				totalProducts
			)
		);
	}
};

// Record that user has interacted.
		this.recordUserInteraction();

		const trackData = this.getTrack( track );
		if ( ! trackData ) {
			return;
		}

		this.setState( { currentTrack: track } );
		this.setAudioSource( trackData.src );

		/*
		 * Read that we're loading the track and its description. This is
		 * dismissible via ctrl on VoiceOver.
		 */
		speak(
			/* translators: %s is the track title. It describes the current state of
			the track as "Loading: [track title]". */
			`${ sprintf( __( 'Loading: %s', 'jetpack' ), trackData.title ) } ${ trackData.description }`,
			'assertive'
		);

		this.play();
	};

SWITCH_MODE( action ) {
		// Unselect blocks when we switch to the code editor.
		if ( action.mode !== 'visual' ) {
			dispatch( 'core/editor' ).clearSelectedBlock();
		}

		const message =
			action.mode === 'visual' ? __( 'Visual editor selected' ) : __( 'Code editor selected' );
		speak( message, 'assertive' );
	},
	INIT( _, store ) {

filterRemovedName
						)
					);
				} else if ( filterAddedName ) {
					speak(
						sprintf(
							// translators: %s attribute term (for example: 'red', 'blue', 'large'...)
							__(
								'%s filter added.',
								'woocommerce'
							),
							filterAddedName
						)
					);
				} else if ( filterRemovedName ) {
					speak(
						sprintf(
							// translators: %s attribute term (for example: 'red', 'blue', 'large'...)
							__(
								'%s filter removed.',
								'woocommerce'
							),
							filterRemovedName
						)
					);
				}
			};

const announceLoadingCompletion = ( totalProducts ) => {
	if ( ! Number.isFinite( totalProducts ) ) {
		return;
	}

	if ( totalProducts === 0 ) {
		speak( __( 'No products found', 'woocommerce' ) );
	} else {
		speak(
			sprintf(
				// translators: %s is an integer higher than 0 (1, 2, 3...)
				_n(
					'%d product found',
					'%d products found',
					totalProducts,
					'woocommerce'
				),
				totalProducts
			)
		);
	}
};

const announceFilterChange = ( { filterAdded, filterRemoved } ) => {
				const filterAddedName = filterAdded
					? getFilterNameFromValue( filterAdded )
					: null;
				const filterRemovedName = filterRemoved
					? getFilterNameFromValue( filterRemoved )
					: null;
				if ( filterAddedName && filterRemovedName ) {
					speak(
						sprintf(
							__(
								// translators: %s attribute terms (for example: 'red', 'blue', 'large'...)
								'%s filter replaced with %s.',
								'woo-gutenberg-products-block'
							),
							filterAddedName,
							filterRemovedName
						)
					);
				} else if ( filterAddedName ) {
					speak(
						sprintf(
							// translators: %s attribute term (for example: 'red', 'blue', 'large'...)
							__(
								'%s filter added.',

} ).catch( ( result ) => {
			speak( __( 'The installation and activation failed with the following error:', 'block-lab' ) );
			if ( result.hasOwnProperty( 'message' ) ) {
				speak( result.message );
				setErrorMessage( result.message );
			}
			setIsSuccess( false );
			setIsError( true );
		} );

onReviewsAppended( { newReviews } ) {
		speak(
			sprintf(
				_n(
					'%d review loaded.',
					'%d reviews loaded.',
					newReviews.length,
					'woocommerce'
				),
				newReviews.length
			)
		);
	}

} ).catch( ( result ) => {
			speak( __( 'The installation and activation failed with the following error:', 'block-lab' ) );
			if ( result.hasOwnProperty( 'message' ) ) {
				speak( result.message );
				setErrorMessage( result.message );
			}
			setIsSuccess( false );
			setIsError( true );
		} );