Use RichText for figcaption, strip out a11y hacks

WordPress · Oct 21, 2019 · 2cdea45 · 2cdea45
1 parent 79850f2
commit 2cdea45
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 57 deletions.
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
@@ -15,12 +15,6 @@
 			"selector": "figcaption",
 			"default": ""
 		},
-		"captionId": {
-			"type": "string",
-			"source": "attribute",
-			"selector": "figcaption",
-			"attribute": "id"
-		},
 		"head": {
 			"type": "array",
 			"default": [],

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -500,8 +500,6 @@ export class TableEdit extends Component {
 			backgroundColor,
 			setBackgroundColor,
 			setAttributes,
-			isSelected,
-			clientId,
 		} = this.props;
 		const { initialRowCount, initialColumnCount } = this.state;
 		const {
@@ -510,7 +508,6 @@ export class TableEdit extends Component {
 			head,
 			body,
 			foot,
-			captionId = `wp-block-table-caption-${ clientId }`,
 		} = attributes;
 		const isEmpty = isEmptyTableSection( head ) && isEmptyTableSection( body ) && isEmptyTableSection( foot );
 		const Section = this.renderSection;
@@ -603,26 +600,16 @@ export class TableEdit extends Component {
 					/>
 				</InspectorControls>
 				<figure className={ className }>
-					<table className={ tableClasses } aria-labelledby={ captionId }>
+					<table className={ tableClasses }>
 						<Section name="head" rows={ head } />
 						<Section name="body" rows={ body } />
 						<Section name="foot" rows={ foot } />
 					</table>
-					{ /*
-					   * Use a figcaption, which is visibly hidden and a separate RichText for updating
-					   * the caption. Screenreaders seem to have issues announcing the figure when figcaption
-					   * is rendered using a RichText. The cause is the extra wrapping divs added by the RichText.
-					   * Using two elements is a workaround for the problem.
-					   */ }
-					<figcaption id={ captionId } className="screen-reader-text">{ caption }</figcaption>
 					<RichText
-						className={ classnames( 'wp-block-table__caption-content', {
-							'is-visible': isSelected || caption,
-						} ) }
-						tagName="div"
+						tagName="figcaption"
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
-						onChange={ ( value ) => setAttributes( { caption: value, captionId } ) }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
 						// Deselect the selected table cell when the caption is focused.
 						unstableOnFocus={ () => this.setState( { selectedCell: null } ) }
 					/>

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -66,19 +66,7 @@
 		justify-content: center;
 	}
 
-	&__caption-content {
-		overflow: hidden;
-		height: 0;
-		margin: 0.5em 0 0;
-
-		&.is-visible {
-			overflow: auto;
-			height: auto;
-
-			// The following rules are specified under the `.is-visible` selector
-			// as it helps introduce specificity and override conflicting styles.
-			margin: 0.5em 0 0;
-			@include caption-style-theme();
-		}
+	figcaption {
+		@include caption-style-theme();
 	}
 }
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
@@ -16,7 +16,6 @@ export default function save( { attributes } ) {
 		foot,
 		backgroundColor,
 		caption,
-		captionId,
 	} = attributes;
 	const isEmpty = ! head.length && ! body.length && ! foot.length;
 
@@ -68,19 +67,13 @@ export default function save( { attributes } ) {
 
 	return (
 		<figure>
-			{ /*
-			   * If the table has caption text, associate the figcaption element with the table
-			   * using aria-labelledby. This ensures screenreaders read the `figcaption` as they
-			   * would a table `caption` element.
-			   */ }
-			<table className={ classes } aria-labelledby={ hasCaption ? captionId : undefined }>
+			<table className={ classes }>
 				<Section type="head" rows={ head } />
 				<Section type="body" rows={ body } />
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
 				<RichText.Content
-					id={ captionId }
 					tagName="figcaption"
 					value={ caption }
 				/>

diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js
@@ -240,20 +240,9 @@ describe( 'Table', () => {
 		await clickButton( createButtonLabel );
 
 		// Click the first cell and add some text.
-		await page.click( '.wp-block-table__caption-content' );
+		await page.click( '.wp-block-table figcaption' );
 		await page.keyboard.type( 'Caption!' );
 
-		// Expect the post to have the correct written content inside the table.
-		// Use a regular expression since the `captionId` might not be consistent with a snapshot.
-		const regExp = new RegExp( [
-			`<!-- wp:table -->\n`,
-			`\s*<figure class="wp-block-table">`,
-			`<table class="" aria-labelledby="wp-block-table-caption-[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\">.*<\/table>`,
-			`<figcaption id=\"wp-block-table-caption-[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\">Caption!<\/figcaption>`,
-			`<\/figure>\n`,
-			`\s*<!-- \/wp:table -->`,
-
-		].join( '' ) );
-		expect( await getEditedPostContent() ).toMatch( regExp );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );