Add text control for background media alt text (#3214)

Author: swissspidy

assets/src/stories-editor/blocks/amp-story-page/edit.css

@@ -227,6 +227,10 @@ div[data-type="amp/amp-story-page"] .wp-block-image {
 	margin-top: 0;
 }
 
+.edit-post-settings-sidebar__panel-block .components-focal-point-picker_position-display-container > .components-base-control {
+	margin-bottom: 0;
+}
+
 /* Block Validation Warnings */
 
 .editor-block-list__layout [data-type="amp/amp-story-page"] .block-editor-block-list__block .block-editor-warning {

assets/src/stories-editor/blocks/amp-story-page/edit.js

@@ -25,6 +25,7 @@ import {
 	Notice,
 	SelectControl,
 	RangeControl,
+	TextControl,
 	ResponsiveWrapper,
 } from '@wordpress/components';
 import {
@@ -214,6 +215,7 @@ class PageEdit extends Component {
 			mediaId,
 			mediaType,
 			mediaUrl,
+			mediaAlt,
 			focalPoint = { x: 0.5, y: 0.5 },
 			overlayOpacity,
 			poster,
@@ -404,6 +406,14 @@ class PageEdit extends Component {
 									onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
 								/>
 							) }
+							{ mediaType && (
+								<TextControl
+									label={ __( 'Assistive Text', 'amp' ) }
+									help={ __( 'This text is used to inform visually impaired users about the background content.', 'amp' ) }
+									value={ mediaAlt }
+									onChange={ ( label ) => setAttributes( { mediaAlt: label } ) }
+								/>
+							) }
 						</>
 					</PanelBody>
 					<PanelBody title={ __( 'Page Settings', 'amp' ) }>
@@ -464,6 +474,7 @@ PageEdit.propTypes = {
 		poster: PropTypes.string,
 		autoAdvanceAfter: PropTypes.string,
 		autoAdvanceAfterDuration: PropTypes.number,
+		mediaAlt: PropTypes.string,
 	} ).isRequired,
 	setAttributes: PropTypes.func.isRequired,
 	media: PropTypes.object,

tests/e2e/specs/stories-editor/page.js

@@ -16,6 +16,10 @@ import {
 	insertBlock,
 } from '../../utils';
 
+const LARGE_IMAGE = 'large-image-36521.jpg';
+const CORRECT_VIDEO = 'clothes-hanged-to-dry-1295231.mp4';
+const SELECT_BUTTON = '.media-modal button.media-button-select';
+
 describe( 'Story Page', () => {
 	beforeAll( async () => {
 		await activateExperience( 'stories' );
@@ -167,4 +171,51 @@ describe( 'Story Page', () => {
 			return document.querySelector( selector ).value;
 		}, secondsSelector ) ).toBe( '2' );
 	} );
+
+	it( 'should allow changing the alt attribute for the background image', async () => {
+		// Add background image.
+		await page.waitForSelector( '.editor-amp-story-page-background' );
+		await page.click( '.editor-amp-story-page-background' );
+		await uploadMedia( LARGE_IMAGE );
+		await expect( page ).toClick( SELECT_BUTTON );
+
+		// Write assistive text.
+		const label = await page.waitForXPath( `//label[contains(text(), 'Assistive Text')]` );
+		await page.evaluate( ( lbl ) => {
+			lbl.click();
+		}, label );
+		await page.keyboard.type( 'Hello World' );
+
+		// Open preview.
+		const editorPage = page;
+		const previewPage = await openPreviewPage( editorPage, 'amp-story' );
+		await previewPage.waitForSelector( 'amp-img[alt*="Hello World"]' );
+	} );
+
+	/**
+	 * This test is disabled because it does not work on Chromium.
+	 *
+	 * @see https://github.com/ampproject/amp-wp/pull/2874
+	 * @see https://github.com/ampproject/amp-wp/pull/3214
+	 */
+	// eslint-disable-next-line jest/no-disabled-tests
+	it.skip( 'should allow changing the ARIA label for the background video', async () => {
+		// Add background video.
+		await page.waitForSelector( '.editor-amp-story-page-background' );
+		await page.click( '.editor-amp-story-page-background' );
+		await uploadMedia( CORRECT_VIDEO );
+		await expect( page ).toClick( SELECT_BUTTON );
+
+		// Write assistive text.
+		const label = await page.waitForXPath( `//label[contains(text(), 'Assistive Text')]` );
+		await page.evaluate( ( lbl ) => {
+			lbl.click();
+		}, label );
+		await page.keyboard.type( 'Hello World' );
+
+		// Open preview.
+		const editorPage = page;
+		const previewPage = await openPreviewPage( editorPage, 'amp-story' );
+		await previewPage.waitForXPath( '//amp-video[contains(@aria-label, "Hello World")]' );
+	} );
 } );