Merge branch 'embed-dialog-a11y' of Arnei/opencast-admin-interface into develop

gregorydlogan · gregorydlogan · commit 11f5f84c34d0 · 2026-04-13T11:44:28.000-06:00
Pull request #1570 Fixing more a11y issues in the embed dialog
diff --git 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
@@ -93,14 +93,21 @@
 .embedded-code-video {
     text-align:center;
     margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
 }
 
 .embedded-code-textarea {
     font-size:12px;
     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 {
