(components): Render extra Embed props on iframe tag

[lachlanjc]

Closes #966, this PR makes extra props on the Embed component, especially/such as title or aria-label, be rendered on the iframe tag instead of the container div, to allow better accessibility when using that component.

This is a very slightly potentially breaking change for developers who are using container style props (mb={3}) directly on Embed, since those could now behave differently inside another div, but I don’t think that’s a common usage. Added a quick note about accessibility to the Embed docs as well.

Includes tests, snapshots, & docs.

[hasparus]

Love it.

[hasparus]

Okay, one thing that's left before releasing this is updating the changelog. This could be breaking, right?

[hasparus]

The types for Embed also change, since it no longer supports box props (space, color, variant).

theme-ui/packages/components/index.d.ts

Lines 293 to 330 in a747d60

	export interface EmbedProps
	extends Assign<
	React.ComponentProps<'div'> & React.RefAttributes<HTMLIFrameElement>,
	BoxOwnProps
	> {
	ratio?: number
	src?: React.IframeHTMLAttributes<any>['src']
	frameBorder?: React.IframeHTMLAttributes<any>['frameBorder']
	allowFullScreen?: React.IframeHTMLAttributes<any>['allowFullScreen']
	allow?: React.IframeHTMLAttributes<any>['allow']
	}
	/**
	* Responsive iframe for video embeds.
	*
	* Embed variants can be defined anywhere in the theme object.
	*
	* @see https://theme-ui.com/components/embed
	*/
	export const Embed: ForwardRef<HTMLIFrameElement, EmbedProps>
	export interface AspectRatioProps extends BoxProps {
	ratio?: number
	}
	/**
	* Component for maintaining a fluid-width aspect ratio
	* @see https://theme-ui.com/components/aspect-ratio
	*/
	export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps>
	export interface AspectImageProps extends ImageProps {
	ratio?: number
	}
	/**
	* Image component constrained by as aspect ratio.
	* @see https://theme-ui.com/components/aspect-image
	*/
	export const AspectImage: ForwardRef<HTMLImageElement, AspectImageProps>

I think we can get rid of space and color props, but pass variant to the root child.

[hasparus]

Hmm... maybe we could still spread on Box, but pick a greater set of iframe props to pass on to the child iframe?

[lachlanjc]

Yep, I realize I've forgotten to update the changelog with several recent PRs (like print color mode support). I will add that. Sounds good with variant too!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/g0bix1sqf
✅ Preview: https://theme-ui-git-fix-966.systemui.vercel.app

[lachlanjc]

This actually wasn't quite ready to merge after our discussion @hasparus—we can use prop filtering to make using space props keep working here without a breaking change, but that can be a separate PR before we release stable