From 53d1e29a73ca00bb43fd04bb2c885093a3905042 Mon Sep 17 00:00:00 2001
From: huubl <50170696+huubl@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:54:11 +0100
Subject: [PATCH] Improve Security: Replace setAttribute with Object.assign for
 Styles

The Object.assign() method modifies individual CSS properties through the JavaScript API, which is not blocked by Content Security Policy (CSP) without the 'unsafe-inline' directive. In contrast, setAttribute('style', '...') is considered an inline style and would be blocked by CSP without 'unsafe-inline'.
---
 packages/a11y/src/script/add-container.js  | 27 +++++++++++-----------
 packages/a11y/src/script/add-intro-text.ts | 27 +++++++++++-----------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/a11y/src/script/add-container.js b/packages/a11y/src/script/add-container.js
index 122adeaf8a15da..c40478e18873d4 100644
--- a/packages/a11y/src/script/add-container.js
+++ b/packages/a11y/src/script/add-container.js
@@ -10,20 +10,19 @@ export default function addContainer( ariaLive = 'polite' ) {
 	container.id = `a11y-speak-${ ariaLive }`;
 	container.className = 'a11y-speak-region';
 
-	container.setAttribute(
-		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
-	);
+	Object.assign( container.style, {
+		position: 'absolute',
+		margin: '-1px',
+		padding: '0',
+		height: '1px',
+		width: '1px',
+		overflow: 'hidden',
+		clip: 'rect(1px, 1px, 1px, 1px)',
+		webkitClipPath: 'inset(50%)',
+		clipPath: 'inset(50%)',
+		border: '0',
+		wordWrap: 'normal',
+	} );
 	container.setAttribute( 'aria-live', ariaLive );
 	container.setAttribute( 'aria-relevant', 'additions text' );
 	container.setAttribute( 'aria-atomic', 'true' );
diff --git a/packages/a11y/src/script/add-intro-text.ts b/packages/a11y/src/script/add-intro-text.ts
index 2bcf453ec44c8e..648e610e13f4f3 100644
--- a/packages/a11y/src/script/add-intro-text.ts
+++ b/packages/a11y/src/script/add-intro-text.ts
@@ -18,20 +18,19 @@ export default function addIntroText() {
 	introText.className = 'a11y-speak-intro-text';
 	introText.textContent = __( 'Notifications' );
 
-	introText.setAttribute(
-		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
-	);
+	Object.assign( introText.style, {
+		position: 'absolute',
+		margin: '-1px',
+		padding: '0',
+		height: '1px',
+		width: '1px',
+		overflow: 'hidden',
+		clip: 'rect(1px, 1px, 1px, 1px)',
+		webkitClipPath: 'inset(50%)',
+		clipPath: 'inset(50%)',
+		border: '0',
+		wordWrap: 'normal',
+	} );
 	introText.setAttribute( 'hidden', 'hidden' );
 
 	const { body } = document;