Fix CSP violations due to inline styles

caleb531 · Jan 5, 2024 · 490f088 · 490f088
1 parent ea0db7a
commit 490f088
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/src/app.html b/src/app.html
@@ -9,6 +9,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div class="app-wrapper">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/index.test.ts b/src/index.test.ts
@@ -21,7 +21,7 @@ describe('pswd matcher', () => {
 		await userEvent.type(initialPasswordInput, initialPassword);
 		expect(initialPasswordInput).toHaveValue(initialPassword);
 		expect(screen.queryByText('Passwords match')).not.toBeInTheDocument();
-		expect(screen.queryByText('Passwords do not match')).not.toBeVisible();
+		expect(screen.queryByText('Passwords do not match')?.parentElement).not.toHaveClass('visible');
 	});
 
 	it('should populate confirm password only', async () => {
@@ -31,7 +31,7 @@ describe('pswd matcher', () => {
 		await userEvent.type(confirmPasswordInput, confirmPassword);
 		expect(confirmPasswordInput).toHaveValue(confirmPassword);
 		expect(screen.queryByText('Passwords match')).not.toBeInTheDocument();
-		expect(screen.queryByText('Passwords do not match')).not.toBeVisible();
+		expect(screen.queryByText('Passwords do not match')?.parentElement).not.toHaveClass('visible');
 	});
 
 	it('should populate mismatching passwords', async () => {
@@ -45,7 +45,7 @@ describe('pswd matcher', () => {
 		expect(initialPasswordInput).toHaveValue(initialPassword);
 		expect(confirmPasswordInput).toHaveValue(confirmPassword);
 		expect(screen.queryByText('Passwords match')).not.toBeInTheDocument();
-		expect(screen.queryByText('Passwords do not match')).toBeVisible();
+		expect(screen.queryByText('Passwords do not match')).toBeInTheDocument();
 	});
 
 	it('should populate matching passwords', async () => {
@@ -57,7 +57,7 @@ describe('pswd matcher', () => {
 		await userEvent.type(confirmPasswordInput, password);
 		expect(initialPasswordInput).toHaveValue(password);
 		expect(confirmPasswordInput).toHaveValue(password);
-		expect(screen.queryByText('Passwords match')).toBeVisible();
+		expect(screen.queryByText('Passwords match')).toBeInTheDocument();
 		expect(screen.queryByText('Passwords do not match')).not.toBeInTheDocument();
 	});
 

diff --git a/src/routes/MatchStatus.svelte b/src/routes/MatchStatus.svelte
@@ -5,7 +5,7 @@
 
 <div
 	class="match-status-container"
-	style:visibility={initialPassword !== '' && confirmPassword !== '' ? 'visible' : 'hidden'}
+	class:visible={initialPassword !== '' && confirmPassword !== ''}
 	aria-live="polite"
 >
 	{#if initialPassword === confirmPassword}

diff --git a/src/styles/_app.scss b/src/styles/_app.scss
@@ -10,6 +10,9 @@ body {
 	line-height: var(--line-height-app-text);
 	color: var(--color-app-text);
 }
+.app-wrapper {
+	display: contents;
+}
 .app {
 	margin: 0 auto;
 	max-width: 550px;

diff --git a/src/styles/_match-status.scss b/src/styles/_match-status.scss
@@ -1,3 +1,9 @@
+.match-status-container {
+	visibility: hidden;
+	&.visible {
+		visibility: visible;
+	}
+}
 .match-status {
 	margin: 0;
 	font-size: var(--font-size-match-status);