Try using a figcaption for the table caption

WordPress · May 10, 2019 · b5f00dd · b5f00dd
1 parent 42623d6
commit b5f00dd
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 43 deletions.
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
@@ -12,7 +12,7 @@
 		"caption": {
 			"type": "string",
 			"source": "html",
-			"selector": "caption"
+			"selector": "figcaption"
 		},
 		"head": {
 			"type": "array",

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -488,21 +488,23 @@ export class TableEdit extends Component {
 						] }
 					/>
 				</InspectorControls>
-				<table className={ classes }>
-					<caption>{ caption }</caption>
-					<Section type="head" rows={ head } />
-					<Section type="body" rows={ body } />
-					<Section type="foot" rows={ foot } />
-				</table>
-				<RichText
-					className={ classnames( 'wp-block-table__caption-content', {
-						'is-visible': isSelected || caption,
-					} ) }
-					tagName="p"
-					placeholder={ __( 'Write caption…' ) }
-					value={ caption }
-					onChange={ ( value ) => setAttributes( { caption: value } ) }
-				/>
+				<figure className={ classes }>
+					<table>
+						<Section type="head" rows={ head } />
+						<Section type="body" rows={ body } />
+						<Section type="foot" rows={ foot } />
+					</table>
+					<RichText
+						className={ classnames( 'wp-block-table__caption', {
+							'is-visible': isSelected || caption,
+						} ) }
+						tagName="figcaption"
+						aria-label={ __( 'Edit caption' ) }
+						placeholder={ __( 'Write caption…' ) }
+						value={ caption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+					/>
+				</figure>
 			</>
 		);
 	}

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -41,12 +41,7 @@
 		padding: 0.5em;
 	}
 
-	caption {
-		visibility: hidden;
-		height: 0;
-	}
-
-	&__caption-content {
+	&__caption {
 		@include caption-style-theme();
 		overflow: hidden;
 		height: 0;

diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
@@ -55,11 +55,13 @@ export default function save( { attributes } ) {
 	};
 
 	return (
-		<table className={ classes }>
-			{ !! caption && <RichText.Content tagName="caption" value={ caption } /> }
-			<Section type="head" rows={ head } />
-			<Section type="body" rows={ body } />
-			<Section type="foot" rows={ foot } />
-		</table>
+		<figure>
+			<table className={ classes }>
+				<Section type="head" rows={ head } />
+				<Section type="body" rows={ body } />
+				<Section type="foot" rows={ foot } />
+			</table>
+			<RichText.Content tagName="figcaption" value={ caption } />
+		</figure>
 	);
 }
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -13,14 +13,11 @@
 	&.alignleft,
 	&.aligncenter,
 	&.alignright {
-		// Override default display property for align styles.
-		// The table element needs to be kept as display table
-		// for table features to work reliably.
-		display: table;
-
-		// Table cannot be 100% width if it is aligned, so set
-		// width as auto.
-		width: auto;
+		table {
+			// Table cannot be 100% width if it is aligned, so set
+			// width as auto.
+			width: auto;
+		}
 	}
 
 	&.has-subtle-light-gray-background-color {
@@ -41,9 +38,12 @@
 
 	// "Stripes" style variation.
 	&.is-style-stripes {
-		border-spacing: 0;
-		border-collapse: inherit;
-		background-color: transparent;
+		table {
+			border-spacing: 0;
+			border-collapse: inherit;
+			background-color: transparent;
+			border-bottom: 1px solid $light-gray-200;
+		}
 
 		tbody tr:nth-child(odd) {
 			background-color: $light-gray-200;
@@ -77,7 +77,9 @@
 		td {
 			border-color: transparent;
 		}
+	}
 
-		border-bottom: 1px solid $light-gray-200;
+	figure {
+		margin: 0;
 	}
 }
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
@@ -1,7 +1,9 @@
 .wp-block-table {
-	width: 100%;
-	min-width: $break-mobile / 2;
-	border-collapse: collapse;
+	table {
+		width: 100%;
+		min-width: $break-mobile / 2;
+		border-collapse: collapse;
+	}
 
 	td,
 	th {