diff --git a/packages/e2e-tests/specs/editor/blocks/post-title.test.js b/packages/e2e-tests/specs/editor/blocks/post-title.test.js index bc8c886be3fc13..621e6815cfba84 100644 --- a/packages/e2e-tests/specs/editor/blocks/post-title.test.js +++ b/packages/e2e-tests/specs/editor/blocks/post-title.test.js @@ -28,7 +28,7 @@ describe( 'Post Title block', () => { await page.waitForSelector( '.edit-post-layout' ); const title = await page.$eval( '.editor-post-title__input', - ( element ) => element.value + ( element ) => element.textContent ); expect( title ).toEqual( 'Just tweaking the post title' ); } ); diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js index 6eadb950c4e654..b9e91042809747 100644 --- a/packages/e2e-tests/specs/editor/various/change-detection.test.js +++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js @@ -331,7 +331,7 @@ describe( 'Change detection', () => { // Verify that the title is empty. const title = await page.$eval( '.editor-post-title__input', - ( element ) => element.innerHTML + ( element ) => element.textContent ); expect( title ).toBe( '' ); diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index 9c45ff7d43a7ff..2c4f50b4bc1f94 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -116,7 +116,7 @@ describe( 'Order of block keyboard navigation', () => { await page.keyboard.press( 'Tab' ); await expect( await page.evaluate( () => { - return document.activeElement.placeholder; + return document.activeElement.getAttribute( 'aria-label' ); } ) ).toBe( 'Add title' ); @@ -168,7 +168,7 @@ describe( 'Order of block keyboard navigation', () => { await pressKeyWithModifier( 'shift', 'Tab' ); await expect( await page.evaluate( () => { - return document.activeElement.placeholder; + return document.activeElement.getAttribute( 'aria-label' ); } ) ).toBe( 'Add title' ); } ); diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 7a5c242c3fdcbf..8363be852e959a 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -92,6 +92,8 @@ export default function PostTitle() { editPost( { title: newTitle } ); } + const [ selection, setSelection ] = useState( {} ); + function onSelect() { setIsSelected( true ); clearSelectedBlock(); @@ -99,6 +101,7 @@ export default function PostTitle() { function onUnselect() { setIsSelected( false ); + setSelection( {} ); } function onChange( value ) { @@ -172,12 +175,12 @@ export default function PostTitle() { 'has-fixed-toolbar': hasFixedToolbar, } ); - const decodedPlaceholder = decodeEntities( placeholder ); - const [ selection, setSelection ] = useState( {} ); + const decodedPlaceholder = + decodeEntities( placeholder ) || __( 'Add title' ); const { ref: richTextRef } = useRichText( { value: title, onChange, - placeholder: decodedPlaceholder || __( 'Add title' ), + placeholder: decodedPlaceholder, selectionStart: selection.start, selectionEnd: selection.end, onSelectionChange( newStart, newEnd ) { @@ -204,6 +207,7 @@ export default function PostTitle() { ref={ useMergeRefs( [ richTextRef, ref ] ) } contentEditable className="editor-post-title__input rich-text" + aria-label={ decodedPlaceholder } onFocus={ onSelect } onBlur={ onUnselect } onKeyDown={ onKeyDown }