Refine caption accessibility.

WordPress · Jun 10, 2019 · 95236f4 · 95236f4
1 parent d62910f
commit 95236f4
Show file tree

Hide file tree

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

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -501,18 +501,15 @@ export class TableEdit extends Component {
 					/>
 				</InspectorControls>
 				<table className={ classes }>
-					<caption>{ caption }</caption>
+					{ /* Caption is specified as visibly hidden. This allows the caption to be
+					read by a screenreader, but remain editable using a RichText outside the table.
+					Specifying a key forces react to replace the caption element,
+					ensure the up-to-date caption is read by voiceover in chrome */ }
+					<caption className="screen-reader-text" key={ caption }>{ caption }</caption>
 					<Section type="head" rows={ head } />
 					<Section type="body" rows={ body } />
 					<Section type="foot" rows={ foot } />
 				</table>
-				{ /*
-				  * A RichText outside of the table is used to represent the
-				  * caption when editing. This is because a RichText inside
-				  * the table wouldn't produce valid table markup—RichText
-				  * wraps its contenteditable element in multiple divs, a div
-				  * is not a valid child of a table.
-				  */ }
 				<RichText
 					className={ classnames( 'wp-block-table__caption-content', {
 						'is-visible': isSelected || caption,
@@ -521,6 +518,7 @@ export class TableEdit extends Component {
 					placeholder={ __( 'Write caption…' ) }
 					value={ caption }
 					onChange={ ( value ) => setAttributes( { caption: value } ) }
+					// Deselect the selected table cell when the caption is focused.
 					unstableOnFocus={ () => this.setState( { selectedCell: null } ) }
 					inlineToolbar
 				/>

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -56,11 +56,6 @@
 		justify-content: center;
 	}
 
-	caption {
-		visibility: hidden;
-		height: 0;
-	}
-
 	&__caption-content {
 		overflow: hidden;
 		height: 0;

diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
@@ -56,7 +56,7 @@ export default function save( { attributes } ) {
 
 	return (
 		<table className={ classes }>
-			{ !! caption && <RichText.Content tagName="caption" value={ caption } /> }
+			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="caption" value={ caption } /> }
 			<Section type="head" rows={ head } />
 			<Section type="body" rows={ body } />
 			<Section type="foot" rows={ foot } />