From 042dfa791d493731d36a896f2e11e6d7184e600d Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Mon, 16 Mar 2026 13:56:27 +0100
Subject: [PATCH] Fixing more a11y issues in the embed dialog

- Pressing the copy to clipboard button should now
cause screen readers to properly read the alert.
- Change <textbox> to <code>. More semantically correct.
Does not look editable.
---
 .../partials/modals/EmbeddingCodeModal.tsx    | 26 ++++++++++++-------
 src/styles/views/modals/_embedded-code.scss   |  9 ++++++-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/events/partials/modals/EmbeddingCodeModal.tsx b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
index c36d9859b4..75d38ba644 100644
--- a/src/components/events/partials/modals/EmbeddingCodeModal.tsx
+++ b/src/components/events/partials/modals/EmbeddingCodeModal.tsx
@@ -31,10 +31,10 @@ const EmbeddingCodeModal = ({
 	}, []);
 
 	const copy = () => {
-		const copyText = document.getElementById("social_embed-textarea") as HTMLTextAreaElement;
+		const copyText = document.getElementById("social_embed-textarea");
 		if (copyText) {
-			copyText.select();
-			document.execCommand("copy");
+			const text = copyText.innerText;
+  		navigator.clipboard.writeText(text);
 
 			setCopySuccess(true);
 		}
@@ -78,6 +78,13 @@ const EmbeddingCodeModal = ({
 		setCopySuccess(false);
 	};
 
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+		if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+			e.preventDefault();
+			copy();
+		}
+	};
+
 	return (
 		<>
 			{/* embed size buttons */}
@@ -142,14 +149,15 @@ const EmbeddingCodeModal = ({
 
 			{/* text area containing current iFrame code to copy*/}
 			<div className="embedded-code-video">
-				<textarea
+				<code
 					id="social_embed-textarea"
-					className="social_embed-textarea embedded-code-textarea"
-					rows={2}
-					value={textAreaContent}
-					cols={1}
+					className="embedded-code-textarea"
 					aria-label={t("EMBEDDING_CODE.EMBEDD_CODE_TEXTAREA_ARIA")}
-				/>
+					tabIndex={0}
+					onKeyDown={handleKeyDown}
+				>
+					{textAreaContent}
+				</code>
 			</div>
 
 			{/* copy confirmation */}
diff --git a/src/styles/views/modals/_embedded-code.scss b/src/styles/views/modals/_embedded-code.scss
index 0f7a0eba1f..bbde152315 100644
--- a/src/styles/views/modals/_embedded-code.scss
+++ b/src/styles/views/modals/_embedded-code.scss
@@ -93,6 +93,8 @@
 .embedded-code-video {
     text-align:center;
     margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
 }
 
 .embedded-code-textarea {
@@ -100,7 +102,12 @@
     width:95%;
     overflow:auto;
     margin-top:5px;
-    color:black;
+    color: variables.$color-black;
+    display: block;
+    padding: 16px;
+    border-radius: 10px;
+    border: 1px solid variables.$color-darkgray;
+    white-space: pre-wrap;
 }
 
 .embedded-code-copy-to-clipboard {