ignore external embedded iframes from a11y checks

metmuseum · Dec 27, 2021 · 5c37d2a · 5c37d2a
1 parent b1862c4
commit 5c37d2a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -14,6 +14,16 @@ addDecorator(marbleGlobalJSDecorator);
 addDecorator(withA11y);
 
 export const parameters = {
+	a11y: {
+		config: {
+			rules: [
+				{
+					id: 'frame-tested',
+					selector: 'iframe:not(.a11y-ignore)', // ignore iframes with a11y-ignore class
+				},
+			],
+		},
+	},
 	backgrounds: {
 		values: [
 			{ name: "white", value: colorVariables.colorWhite },

diff --git a/src/components/rte-components/rte-components.stories.js b/src/components/rte-components/rte-components.stories.js
@@ -34,6 +34,7 @@ const RTEComponentsMarkUp = (model) => {
 		<hr>
 		<div class="media__youtube-wrapper">
 			<iframe
+				class="a11y-ignore"
 				title="Youtube Embed"
 				width="720"
 				height="428"

diff --git a/src/components/vimeo-player/vimeo-player.js b/src/components/vimeo-player/vimeo-player.js
@@ -20,6 +20,7 @@ const videoTemplate = html`<div
 	</a>
 
 	<iframe
+		class="a11y-ignore"
 		data-chromatic="ignore"
 		src="https://player.vimeo.com/video/395251744?dnt=1&amp;
 			loop=1&amp;