diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts index 9ea4fdeb0675e7..8bcf96138d396b 100644 --- a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts +++ b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts @@ -9,20 +9,14 @@ import type { Editor } from './index'; * @param {Editor} this */ export async function saveSiteEditorEntities( this: Editor ) { - await this.page - .locator( 'role=region[name="Header"i] >> role=button[name="Save"i]' ) - .click(); - - // The sidebar entities panel opens with another save button. Click this too. - await this.page - .locator( 'role=region[name="Publish"i] >> role=button[name="Save"i]' ) - .click(); - - // The panel will close revealing the main editor save button again. - // It will have the classname `.is-busy` while saving. Wait for it to - // not have that classname. - // TODO - find a way to improve this selector to use role/name. + await this.page.click( + 'role=region[name="Editor top bar"i] >> role=button[name="Save"i]' + ); + // Second Save button in the entities panel. + await this.page.click( + 'role=region[name="Editor publish"i] >> role=button[name="Save"i]' + ); await this.page.waitForSelector( - 'css=.edit-site-save-button__button:not(.is-busy)' + 'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]' ); } diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index a30d8b54550377..f3d171fab9c311 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -274,7 +274,7 @@ export async function toggleGlobalStyles() { * @param {string} panelName Name of the panel that is going to be opened. */ export async function openGlobalStylesPanel( panelName ) { - const selector = `//div[@aria-label="Settings"]//button[.//*[text()="${ panelName }"]]`; + const selector = `//div[@aria-label="Editor settings"]//button[.//*[text()="${ panelName }"]]`; await ( await page.waitForXPath( selector ) ).click(); } @@ -283,6 +283,6 @@ export async function openGlobalStylesPanel( panelName ) { */ export async function openPreviousGlobalStylesPanel() { await page.click( - 'div[aria-label="Settings"] button[aria-label="Navigate to the previous view"]' + 'div[aria-label="Editor settings"] button[aria-label="Navigate to the previous view"]' ); } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index cd37ebffb4b6b9..7bba08162ae8e6 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -47,6 +47,17 @@ import { GlobalStylesProvider } from '../global-styles/global-styles-provider'; import useTitle from '../routes/use-title'; const interfaceLabels = { + /* translators: accessibility text for the editor top bar landmark region. */ + header: __( 'Editor top bar' ), + /* translators: accessibility text for the editor content landmark region. */ + body: __( 'Editor content' ), + /* translators: accessibility text for the editor settings landmark region. */ + sidebar: __( 'Editor settings' ), + /* translators: accessibility text for the editor publish landmark region. */ + actions: __( 'Editor publish' ), + /* translators: accessibility text for the editor footer landmark region. */ + footer: __( 'Editor footer' ), + /* translators: accessibility text for the navigation sidebar landmark region. */ drawer: __( 'Navigation Sidebar' ), }; diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js index 0c65b7639e8dc1..6a6ba6353a5e71 100644 --- a/test/e2e/specs/site-editor/template-revert.spec.js +++ b/test/e2e/specs/site-editor/template-revert.spec.js @@ -34,9 +34,9 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await page.click( 'role=button[name="Show template details"i]' ); @@ -57,9 +57,9 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent(); @@ -78,9 +78,9 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await admin.visitSiteEditor(); const contentAfter = @@ -97,20 +97,20 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent(); // Revert template and check state. await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentAfterSave = await templateRevertUtils.getCurrentSiteEditorContent(); expect( contentAfterSave ).not.toEqual( contentBefore ); // Undo revert by clicking header button and check state again. await page.click( - 'role=region[name="Header"i] >> role=button[name="Undo"i]' + 'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]' ); const contentAfterUndo = await templateRevertUtils.getCurrentSiteEditorContent(); @@ -126,12 +126,12 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); // Click the snackbar "Undo" button. await page.click( @@ -155,11 +155,11 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await page.click( - 'role=region[name="Header"i] >> role=button[name="Undo"i]' + 'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]' ); const contentAfterUndo = @@ -167,7 +167,7 @@ test.describe( 'Template Revert', () => { expect( contentAfterUndo ).not.toEqual( contentBefore ); await page.click( - 'role=region[name="Header"i] >> role=button[name="Redo"i]' + 'role=region[name="Editor top bar"i] >> role=button[name="Redo"i]' ); const contentAfterRedo = @@ -187,9 +187,9 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); // Click undo in the snackbar. This reverts revert template action. await page.click( @@ -203,7 +203,7 @@ test.describe( 'Template Revert', () => { // Click undo again, this time in the header. Reverts initial dummy content. await page.click( - 'role=region[name="Header"i] >> role=button[name="Undo"i]' + 'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]' ); // Check dummy content is gone. @@ -222,18 +222,18 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await page.click( - 'role=region[name="Header"i] >> role=button[name="Undo"i]' + 'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]' ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await admin.visitSiteEditor(); @@ -252,18 +252,18 @@ test.describe( 'Template Revert', () => { name: 'core/paragraph', attributes: { content: 'Test' }, } ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent(); await templateRevertUtils.revertTemplate(); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await page.click( 'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]' ); - await templateRevertUtils.save(); + await editor.saveSiteEditorEntities(); await admin.visitSiteEditor(); const contentAfter = @@ -277,19 +277,6 @@ class TemplateRevertUtils { this.page = page; } - async save() { - await this.page.click( - 'role=region[name="Header"i] >> role=button[name="Save"i]' - ); - // Second Save button in the entities panel. - await this.page.click( - 'role=region[name="Publish"i] >> role=button[name="Save"i]' - ); - await this.page.waitForSelector( - 'role=region[name="Header"i] >> role=button[name="Save"i][disabled]' - ); - } - async revertTemplate() { await this.page.click( 'role=button[name="Show template details"i]' ); await this.page.click( 'role=menuitem[name=/Clear customizations/i]' ); diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js index 7df0c7ff81e932..6d00c4ad7c3a2a 100644 --- a/test/e2e/specs/site-editor/title.spec.js +++ b/test/e2e/specs/site-editor/title.spec.js @@ -23,7 +23,7 @@ test.describe( 'Site editor title', () => { } ); const title = await page.locator( - 'role=region[name="Header"i] >> role=heading[level=1]' + 'role=region[name="Editor top bar"i] >> role=heading[level=1]' ); await expect( title ).toHaveText( 'Editing template: Index' ); @@ -40,7 +40,7 @@ test.describe( 'Site editor title', () => { } ); const title = await page.locator( - 'role=region[name="Header"i] >> role=heading[level=1]' + 'role=region[name="Editor top bar"i] >> role=heading[level=1]' ); await expect( title ).toHaveText( 'Editing template part: header' );