diff --git a/src/experiments/summarization/components/SummarizationPlugin.tsx b/src/experiments/summarization/components/SummarizationPlugin.tsx index 734f2903..f404e884 100644 --- a/src/experiments/summarization/components/SummarizationPlugin.tsx +++ b/src/experiments/summarization/components/SummarizationPlugin.tsx @@ -9,6 +9,7 @@ import { Button, Flex, FlexItem } from '@wordpress/components'; import { PluginPostStatusInfo } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { update } from '@wordpress/icons'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -30,6 +31,11 @@ export default function SummarizationPlugin() { minContentLength, } = useSummaryGeneration(); + const descriptionId = useInstanceId( + SummarizationPlugin, + 'ai-summarization-plugin-description' + ); + let buttonLabel: string = __( 'Generate Summary', 'ai' ); if ( isSummarizing ) { @@ -90,13 +96,16 @@ export default function SummarizationPlugin() { onClick={ handleSummarize } disabled={ isDisabled } isBusy={ isSummarizing } + aria-describedby={ descriptionId } __next40pxDefaultSize > { buttonLabel } - { buttonDescription } + + { buttonDescription } + diff --git a/tests/e2e/specs/experiments/content-summarization.spec.js b/tests/e2e/specs/experiments/content-summarization.spec.js index 8ee1ec1c..334752e0 100644 --- a/tests/e2e/specs/experiments/content-summarization.spec.js +++ b/tests/e2e/specs/experiments/content-summarization.spec.js @@ -51,40 +51,44 @@ test.describe( 'Content Summarization Experiment', () => { await editor.openDocumentSettingsSidebar(); // Ensure the Generate Summary button exists, is visible, and has the correct text. - const generateButton = page.locator( - '.ai-summarization-plugin-container button' - ); + const generateButton = page.getByRole( 'button', { + name: 'Generate Summary', + exact: true, + } ); await expect( generateButton ).toBeVisible(); - await expect( generateButton ).toHaveText( 'Generate Summary' ); // Click the Generate Summary button. await generateButton.click(); - // Ensure the generated summary is inserted as a group block. - await expect( - editor.canvas.locator( '.wp-block-group.ai-summarization-summary' ) - ).toBeVisible(); + const summaryBlock = editor.canvas + .getByRole( 'document', { + name: 'Block: Content Summary', + } ) + .first(); + + // Ensure the summary block is visible. + await expect( summaryBlock ).toBeVisible(); // Ensure the summary content is inside a paragraph within the group. + await expect( summaryBlock ).toContainClass( 'wp-block-group' ); + await expect( - editor.canvas.locator( - '.wp-block-group.ai-summarization-summary p', - { - hasText: - 'Edit or Delete Your First WordPress Post to Begin Your Blogging Adventure', - } - ) + summaryBlock.locator( 'p', { + hasText: + 'Edit or Delete Your First WordPress Post to Begin Your Blogging Adventure', + } ) ).toBeVisible(); // Ensure the sidebar is visible and on the Post tab. await editor.openDocumentSettingsSidebar(); - await page - .locator( '.editor-sidebar__panel-tabs button:has-text("Post")' ) - .click(); + await page.getByRole( 'tab', { name: 'Post' } ).click(); - // Ensure the Generate Summary button text is updated. - await expect( generateButton ).toBeVisible(); - await expect( generateButton ).toHaveText( 'Regenerate Summary' ); + // Ensure the Regenerate Summary button is visible. + await expect( + page + .getByRole( 'button', { name: 'Regenerate Summary' } ) + .filter( { hasText: 'Regenerate Summary' } ) + ).toBeVisible(); // Save the post. await editor.saveDraft(); @@ -117,7 +121,10 @@ test.describe( 'Content Summarization Experiment', () => { // Ensure the Generate Summary button doesn't exist. await expect( - page.locator( '.ai-summarization-plugin-container button' ) + page.getByRole( 'button', { + name: 'Generate Summary', + exact: true, + } ) ).not.toBeVisible(); } ); @@ -145,18 +152,19 @@ test.describe( 'Content Summarization Experiment', () => { // Ensure the sidebar is visible. await editor.openDocumentSettingsSidebar(); - const generateButton = page.locator( - '.ai-summarization-plugin-container button' - ); + const generateButton = page.getByRole( 'button', { + name: 'Generate Summary', + exact: true, + } ); // Button should be visible but disabled. await expect( generateButton ).toBeVisible(); await expect( generateButton ).toBeDisabled(); // The descriptive text should explain when the button will be enabled. - await expect( - page.locator( '.ai-summarization-plugin-container .description' ) - ).toContainText( '50 words' ); + await expect( generateButton ).toHaveAccessibleDescription( + /50 words?/i + ); } ); test( 'Summarize button is enabled when content meets the minimum length', async ( { @@ -184,18 +192,19 @@ test.describe( 'Content Summarization Experiment', () => { // Ensure the sidebar is visible. await editor.openDocumentSettingsSidebar(); - const generateButton = page.locator( - '.ai-summarization-plugin-container button' - ); + const generateButton = page.getByRole( 'button', { + name: 'Generate Summary', + exact: true, + } ); // Button should be visible and enabled. await expect( generateButton ).toBeVisible(); await expect( generateButton ).toBeEnabled(); // The descriptive text should NOT mention the minimum word requirement. - await expect( - page.locator( '.ai-summarization-plugin-container .description' ) - ).not.toContainText( 'words' ); + await expect( generateButton ).not.toHaveAccessibleDescription( + /words?/i + ); } ); test( 'Ensure the Content Summarization Experiment UI is not visible when the experiment is disabled', async ( { @@ -225,7 +234,10 @@ test.describe( 'Content Summarization Experiment', () => { // Ensure the Generate Summary button doesn't exist. await expect( - page.locator( '.ai-summarization-plugin-container button' ) + page.getByRole( 'button', { + name: 'Generate Summary', + exact: true, + } ) ).not.toBeVisible(); } ); } );