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( [ {