diff --git a/packages/block-library/src/math/edit.js b/packages/block-library/src/math/edit.js
index 175e690198e260..aaac0f9458b6e6 100644
--- a/packages/block-library/src/math/edit.js
+++ b/packages/block-library/src/math/edit.js
@@ -14,6 +14,7 @@ import {
} from '@wordpress/components';
import { useState, useEffect, useRef } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
+import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
@@ -72,7 +73,8 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
placement="bottom-start"
offset={ 8 }
anchor={ blockRef }
- focusOnMount="firstContentElement"
+ focusOnMount={ false }
+ __unstableSlotName="__unstable-block-tools-after"
>
@@ -96,6 +98,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
setError( null );
} catch ( err ) {
setError( err.message );
+ speak( err.message );
}
setAttributes( {
mathML: newMathML,
diff --git a/packages/format-library/src/math/index.js b/packages/format-library/src/math/index.js
index df5f146dd8699c..7620b0a4f8ed21 100644
--- a/packages/format-library/src/math/index.js
+++ b/packages/format-library/src/math/index.js
@@ -12,6 +12,7 @@ import {
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { math as icon } from '@wordpress/icons';
+import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
@@ -52,6 +53,7 @@ function InlineUI( {
setError( null );
} catch ( err ) {
setError( err.message );
+ speak( err.message );
return;
}
}
diff --git a/test/e2e/specs/editor/blocks/math.spec.js b/test/e2e/specs/editor/blocks/math.spec.js
new file mode 100644
index 00000000000000..6a4c682e2844a3
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/math.spec.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Math Block', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'should insert math block with LaTeX', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ await editor.insertBlock( { name: 'core/math' } );
+
+ // Can access the popover.
+ await page.keyboard.press( 'Tab' );
+ await page.keyboard.type( 'x^2' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/math',
+ attributes: {
+ latex: 'x^2',
+ },
+ },
+ ] );
+
+ // Can escape the popover.
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await page.keyboard.press( 'Enter' );
+ await page.keyboard.type( 'b' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/math',
+ attributes: {
+ latex: 'x^2',
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'b',
+ },
+ },
+ ] );
+
+ // Test removing math block.
+ await page.keyboard.press( 'ArrowUp' );
+ await page.keyboard.press( 'Tab' );
+ await page.keyboard.type( '&' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/math',
+ attributes: {
+ latex: '&x^2',
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'b',
+ },
+ },
+ ] );
+
+ await expect( page.locator( '[aria-live="polite"]' ) ).toHaveText(
+ `Expected 'EOF', got '&' at position 1: &̲x^2`
+ );
+
+ // Can delete the math block.
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await page.keyboard.press( 'Backspace' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'b',
+ },
+ },
+ ] );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/format-library/math.spec.js b/test/e2e/specs/editor/various/format-library/math.spec.js
index f799cb65ee6ce5..7785009c592479 100644
--- a/test/e2e/specs/editor/various/format-library/math.spec.js
+++ b/test/e2e/specs/editor/various/format-library/math.spec.js
@@ -31,10 +31,8 @@ test.describe( 'Format Library - Math', () => {
},
] );
- const mathInput = page.locator(
- '.block-editor-format-toolbar__math-input input'
- );
- await mathInput.fill( 'x^2' );
+ await page.keyboard.press( 'Tab' );
+ await page.keyboard.type( 'x^2' );
expect( await editor.getBlocks() ).toMatchObject( [
{