WordPress · carolinan · Nov 3, 2021 · Oct 23, 2021 · Oct 23, 2021 · Oct 23, 2021
diff --git a/package-lock.json b/package-lock.json
@@ -51,6 +51,9 @@ const FormatToolbar = () => {
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
+										describedBy: __(
+											'Displays more block tools'
+										),
 									} }
 									controls={ orderBy(
 										fills.map( ( [ { props } ] ) => props ),

@@ -20,11 +20,11 @@ export const bold = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

@@ -46,7 +46,7 @@ export const code = {
 	},
 	edit( { value, onChange, onFocus, isActive } ) {
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 
@@ -56,6 +56,7 @@ export const code = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

@@ -20,11 +20,11 @@ export const italic = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

@@ -16,7 +16,7 @@ export const keyboard = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const keyboard = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

@@ -16,7 +16,7 @@ export const strikethrough = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 
@@ -26,6 +26,7 @@ export const strikethrough = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

@@ -16,7 +16,7 @@ export const subscript = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const subscript = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

@@ -16,7 +16,7 @@ export const superscript = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const superscript = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

@@ -101,6 +101,7 @@ function TextColorEdit( {
 						? enableIsAddingColor
 						: () => onChange( removeFormat( value, name ) )
 				}
+				role="menuitemcheckbox"
 			/>
 			{ isAddingColor && (
 				<InlineColorUI

@@ -9,10 +9,11 @@ import {
 } from '@wordpress/block-editor';
 
 const name = 'core/underline';
+const title = __( 'Underline' );
 
 export const underline = {
 	name,
-	title: __( 'Underline' ),
+	title,
 	tagName: 'span',
 	className: null,
 	attributes: {
@@ -26,6 +27,7 @@ export const underline = {
 					attributes: {
 						style: 'text-decoration: underline;',
 					},
+					title,
 				} )
 			);
 		};

@@ -30,11 +30,13 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
+		"@wordpress/a11y": "^3.2.3",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
+		"@wordpress/i18n": "^4.2.3",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"classnames": "^2.3.1",

@@ -1,3 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+
+import { speak } from '@wordpress/a11y';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -19,8 +26,17 @@ import { applyFormat } from './apply-format';
  */
 export function toggleFormat( value, format ) {
 	if ( getActiveFormat( value, format.type ) ) {
+		// For screen readers, will announce if formatting control is disabled.
+		if ( format.title ) {
+			// translators: %s: title of the formatting control
+			speak( sprintf( __( '%s removed.' ), format.title ), 'assertive' );
+		}
 		return removeFormat( value, format.type );
 	}
-
+	// For screen readers, will announce if formatting control is enabled.
+	if ( format.title ) {
+		// translators: %s: title of the formatting control
+		speak( sprintf( __( '%s applied.' ), format.title ), 'assertive' );
+	}
 	return applyFormat( value, format );
 }