Use as for component specification

withComponent did not work as expected

Author: sirreal

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

@@ -9,10 +9,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { Card as CardComponent, CardMedia as CardMediaComponent } from '@wordpress/components';
-
-const Card = CardComponent.withComponent( 'button' );
-const CardMedia = CardMediaComponent.withComponent( 'span' );
+import { Card, CardMedia } from '@wordpress/components';
 
 const gridWidth = 960;
 const srcSet = ( src: string, widths: number[] ) =>
@@ -39,8 +36,9 @@ const DesignCard: FunctionComponent< Props > = ( {
 		style={ style }
 		aria-haspopup="dialog"
 		aria-controls={ dialogId }
+		as="button"
 	>
-		<CardMedia>
+		<CardMedia as="span">
 			<img
 				width={ 480 }
 				height={ 360 }

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

@@ -9,19 +9,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	Card as CardComponent,
-	CardFooter as CardFooterComponent,
-	CardMedia as CardMediaComponent,
-	Icon,
-} from '@wordpress/components';
+import { Card, CardFooter, CardMedia, Icon } from '@wordpress/components';
 import { removeQueryArgs } from '@wordpress/url';
 import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard';
 
-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 {
@@ -48,18 +39,19 @@ const PageLayoutSelector: FunctionComponent< Props > = ( { templates } ) => {
 								'is-selected': pageLayouts.includes( template.slug ),
 							} ) }
 							onClick={ () => togglePageLayout( template ) }
+							as="button"
 							key={ template.slug }
 						>
 							<span className="page-layout-selector__selected-indicator">
 								<Icon icon="yes" size={ 24 } />
 							</span>
-							<CardMedia className="page-layout-selector__card-media">
+							<CardMedia className="page-layout-selector__card-media" as="span">
 								<img
 									alt={ template.description }
 									src={ removeQueryArgs( template.preview, 'w' ) }
 								/>
 							</CardMedia>
-							<CardFooter className="page-layout-selector__card-footer">
+							<CardFooter className="page-layout-selector__card-footer" as="span">
 								{ template.title }
 							</CardFooter>
 						</Card>