Use withComponent over as prop

Author: sirreal

client/landing/gutenboarding/onboarding-block/design-selector/design-card.tsx

@@ -9,7 +9,10 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { Card, CardMedia } from '@wordpress/components';
+import { Card as CardComponent, CardMedia as CardMediaComponent } from '@wordpress/components';
+
+const Card = CardComponent.withComponent( 'button' );
+const CardMedia = CardMediaComponent.withComponent( 'span' );
 
 const gridWidth = 960;
 const srcSet = ( src: string, widths: number[] ) =>
@@ -18,7 +21,7 @@ const srcSet = ( src: string, widths: number[] ) =>
 interface Props {
 	isSelected?: boolean;
 	design: import('@automattic/data-stores').VerticalsTemplates.Template;
-	onClick: MouseEventHandler< HTMLDivElement >;
+	onClick: MouseEventHandler< HTMLButtonElement >;
 	style?: CSSProperties;
 	dialogId: string;
 }
@@ -30,15 +33,14 @@ const DesignCard: FunctionComponent< Props > = ( {
 	style,
 } ) => (
 	<Card
-		as="button"
 		className={ classnames( 'design-selector__design-option', { 'is-selected': isSelected } ) }
 		isElevated
 		onClick={ onClick }
 		style={ style }
 		aria-haspopup="dialog"
 		aria-controls={ dialogId }
 	>
-		<CardMedia as="span">
+		<CardMedia>
 			<img
 				width={ 480 }
 				height={ 360 }

client/landing/gutenboarding/onboarding-block/design-selector/page-layout-selector.tsx

@@ -8,9 +8,18 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { Card, CardFooter, CardMedia, Icon } from '@wordpress/components';
+import {
+	Card as CardComponent,
+	CardFooter as CardFooterComponent,
+	CardMedia as CardMediaComponent,
+	Icon,
+} from '@wordpress/components';
 import { removeQueryArgs } from '@wordpress/url';
 
+const Card = CardComponent.withComponent( 'button' );
+const CardFooter = CardFooterComponent.withComponent( 'span' );
+const CardMedia = CardMediaComponent.withComponent( 'span' );
+
 type Template = import('@automattic/data-stores').VerticalsTemplates.Template;
 
 interface Props {
@@ -36,7 +45,6 @@ const PageLayoutSelector: FunctionComponent< Props > = ( {
 			<div className="page-layout-selector__grid">
 				{ templates.map( template => (
 					<Card
-						as="button"
 						className={ classnames( 'page-layout-selector__item', {
 							'is-selected': selectedLayouts.has( template.slug ),
 						} ) }
@@ -46,10 +54,10 @@ const PageLayoutSelector: FunctionComponent< Props > = ( {
 						<span className="page-layout-selector__selected-indicator">
 							<Icon icon="yes" size={ 24 } />
 						</span>
-						<CardMedia className="page-layout-selector__card-media" as="span">
+						<CardMedia className="page-layout-selector__card-media">
 							<img alt={ template.description } src={ removeQueryArgs( template.preview, 'w' ) } />
 						</CardMedia>
-						<CardFooter className="page-layout-selector__card-footer" as="span">
+						<CardFooter className="page-layout-selector__card-footer">
 							{ template.title }
 						</CardFooter>
 					</Card>