From 4dfc0762482d9732417a5f43bf6f80bca9760779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Wrede?= <soerenwrede@gmail.com>
Date: Mon, 27 Jun 2022 15:05:43 +0200
Subject: [PATCH] Improve a11y

---
 packages/block-library/src/table/block.json   |   2 +-
 .../block-library/src/table/deprecated.js     | 217 ++++++++++++++++++
 packages/block-library/src/table/save.js      |  22 +-
 3 files changed, 229 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
index 8591813d676292..9cca7ecaa09f9f 100644
--- a/packages/block-library/src/table/block.json
+++ b/packages/block-library/src/table/block.json
@@ -14,7 +14,7 @@
 		"caption": {
 			"type": "string",
 			"source": "html",
-			"selector": "figcaption",
+			"selector": "caption",
 			"default": ""
 		},
 		"head": {
diff --git a/packages/block-library/src/table/deprecated.js b/packages/block-library/src/table/deprecated.js
index 01c0120d5307ed..809a7526ff64a8 100644
--- a/packages/block-library/src/table/deprecated.js
+++ b/packages/block-library/src/table/deprecated.js
@@ -10,6 +10,9 @@ import {
 	RichText,
 	getColorClassName,
 	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 const supports = {
@@ -424,6 +427,220 @@ const deprecated = [
 			);
 		},
 	},
+	{
+		attributes: {
+			hasFixedLayout: {
+				type: 'boolean',
+				default: false,
+			},
+			caption: {
+				type: 'string',
+				source: 'html',
+				selector: 'figcaption',
+				default: '',
+			},
+			head: {
+				type: 'array',
+				default: [],
+				source: 'query',
+				selector: 'thead tr',
+				query: {
+					cells: {
+						type: 'array',
+						default: [],
+						source: 'query',
+						selector: 'td,th',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+							tag: {
+								type: 'string',
+								default: 'td',
+								source: 'tag',
+							},
+							scope: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'scope',
+							},
+							align: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'data-align',
+							},
+						},
+					},
+				},
+			},
+			body: {
+				type: 'array',
+				default: [],
+				source: 'query',
+				selector: 'tbody tr',
+				query: {
+					cells: {
+						type: 'array',
+						default: [],
+						source: 'query',
+						selector: 'td,th',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+							tag: {
+								type: 'string',
+								default: 'td',
+								source: 'tag',
+							},
+							scope: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'scope',
+							},
+							align: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'data-align',
+							},
+						},
+					},
+				},
+			},
+			foot: {
+				type: 'array',
+				default: [],
+				source: 'query',
+				selector: 'tfoot tr',
+				query: {
+					cells: {
+						type: 'array',
+						default: [],
+						source: 'query',
+						selector: 'td,th',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+							tag: {
+								type: 'string',
+								default: 'td',
+								source: 'tag',
+							},
+							scope: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'scope',
+							},
+							align: {
+								type: 'string',
+								source: 'attribute',
+								attribute: 'data-align',
+							},
+						},
+					},
+				},
+			},
+		},
+		supports: {
+			anchor: true,
+			align: true,
+			__experimentalSelector: '.wp-block-table > table',
+		},
+		save: ( { attributes } ) => {
+			const { hasFixedLayout, head, body, foot, caption } = attributes;
+			const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+			if ( isEmpty ) {
+				return null;
+			}
+
+			const colorProps = getColorClassesAndStyles( attributes );
+			const borderProps = getBorderClassesAndStyles( attributes );
+
+			const classes = classnames(
+				colorProps.className,
+				borderProps.className,
+				{
+					'has-fixed-layout': hasFixedLayout,
+				}
+			);
+
+			const hasCaption = ! RichText.isEmpty( caption );
+
+			const Section = ( { type, rows } ) => {
+				if ( ! rows.length ) {
+					return null;
+				}
+
+				const Tag = `t${ type }`;
+
+				return (
+					<Tag>
+						{ rows.map( ( { cells }, rowIndex ) => (
+							<tr key={ rowIndex }>
+								{ cells.map(
+									(
+										{ content, tag, scope, align },
+										cellIndex
+									) => {
+										const cellClasses = classnames( {
+											[ `has-text-align-${ align }` ]:
+												align,
+										} );
+
+										return (
+											<RichText.Content
+												className={
+													cellClasses
+														? cellClasses
+														: undefined
+												}
+												data-align={ align }
+												tagName={ tag }
+												value={ content }
+												key={ cellIndex }
+												scope={
+													tag === 'th'
+														? scope
+														: undefined
+												}
+											/>
+										);
+									}
+								) }
+							</tr>
+						) ) }
+					</Tag>
+				);
+			};
+
+			return (
+				<figure { ...useBlockProps.save() }>
+					<table
+						className={ classes === '' ? undefined : classes }
+						style={ { ...colorProps.style, ...borderProps.style } }
+					>
+						<Section type="head" rows={ head } />
+						<Section type="body" rows={ body } />
+						<Section type="foot" rows={ foot } />
+					</table>
+					{ hasCaption && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+						/>
+					) }
+				</figure>
+			);
+		},
+	},
 ];
 
 export default deprecated;
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index 4e0c4f1956cc19..3d566a57a4c8fc 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -73,22 +73,22 @@ export default function save( { attributes } ) {
 	};
 
 	return (
-		<figure { ...useBlockProps.save() }>
-			<table
-				className={ classes === '' ? undefined : classes }
-				style={ { ...colorProps.style, ...borderProps.style } }
-			>
-				<Section type="head" rows={ head } />
-				<Section type="body" rows={ body } />
-				<Section type="foot" rows={ foot } />
-			</table>
+		<table
+			{ ...useBlockProps.save( {
+				className: classes === '' ? undefined : classes,
+				style: { ...colorProps.style, ...borderProps.style },
+			} ) }
+		>
 			{ hasCaption && (
 				<RichText.Content
-					tagName="figcaption"
+					tagName="caption"
 					value={ caption }
 					className={ __experimentalGetElementClassName( 'caption' ) }
 				/>
 			) }
-		</figure>
+			<Section type="head" rows={ head } />
+			<Section type="body" rows={ body } />
+			<Section type="foot" rows={ foot } />
+		</table>
 	);
 }