From e75aa46f26d4f5a45cbe038bfaf210ae93ab1c7c Mon Sep 17 00:00:00 2001 From: ella Date: Mon, 24 Nov 2025 10:03:03 +0100 Subject: [PATCH 1/3] Math block: fix accessibility --- packages/block-library/src/math/edit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/math/edit.js b/packages/block-library/src/math/edit.js index 175e690198e260..63ac6efc2460f5 100644 --- a/packages/block-library/src/math/edit.js +++ b/packages/block-library/src/math/edit.js @@ -73,6 +73,8 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) { offset={ 8 } anchor={ blockRef } focusOnMount="firstContentElement" + __unstableSlotName="__unstable-block-tools-after" + constrainTabbing={ false } >
From fddf93743ca0305ecf2fe5acbb8caa86a6efc957 Mon Sep 17 00:00:00 2001 From: ella Date: Mon, 24 Nov 2025 13:59:17 +0100 Subject: [PATCH 2/3] Add more e2e tests --- packages/block-library/src/math/edit.js | 3 +- test/e2e/specs/editor/blocks/math.spec.js | 84 +++++++++++++++++++ .../various/format-library/math.spec.js | 6 +- 3 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 test/e2e/specs/editor/blocks/math.spec.js diff --git a/packages/block-library/src/math/edit.js b/packages/block-library/src/math/edit.js index 63ac6efc2460f5..91a81bcaf6e199 100644 --- a/packages/block-library/src/math/edit.js +++ b/packages/block-library/src/math/edit.js @@ -72,9 +72,8 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) { placement="bottom-start" offset={ 8 } anchor={ blockRef } - focusOnMount="firstContentElement" + focusOnMount={ false } __unstableSlotName="__unstable-block-tools-after" - constrainTabbing={ false } >
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..aae08b372985f0 --- /dev/null +++ b/test/e2e/specs/editor/blocks/math.spec.js @@ -0,0 +1,84 @@ +/** + * 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( '1=' ); + + expect( await editor.getBlocks() ).toMatchObject( [ + { + name: 'core/math', + attributes: { + latex: '1=x^2', + }, + }, + { + name: 'core/paragraph', + attributes: { + content: 'b', + }, + }, + ] ); + + // 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( [ { From d527f00c2548272565d8c6c2dbf9ae0db2db1e4a Mon Sep 17 00:00:00 2001 From: ella Date: Mon, 24 Nov 2025 14:16:48 +0100 Subject: [PATCH 3/3] Speak errors --- packages/block-library/src/math/edit.js | 2 ++ packages/format-library/src/math/index.js | 2 ++ test/e2e/specs/editor/blocks/math.spec.js | 8 ++++++-- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/math/edit.js b/packages/block-library/src/math/edit.js index 91a81bcaf6e199..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 @@ -97,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 index aae08b372985f0..6a4c682e2844a3 100644 --- a/test/e2e/specs/editor/blocks/math.spec.js +++ b/test/e2e/specs/editor/blocks/math.spec.js @@ -51,13 +51,13 @@ test.describe( 'Math Block', () => { // Test removing math block. await page.keyboard.press( 'ArrowUp' ); await page.keyboard.press( 'Tab' ); - await page.keyboard.type( '1=' ); + await page.keyboard.type( '&' ); expect( await editor.getBlocks() ).toMatchObject( [ { name: 'core/math', attributes: { - latex: '1=x^2', + latex: '&x^2', }, }, { @@ -68,6 +68,10 @@ test.describe( 'Math Block', () => { }, ] ); + 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' );