From 697b15d0af387cf8add0760fd80494a1df612dfb Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Sun, 12 Apr 2026 23:10:38 +0300
Subject: [PATCH 1/2] Fix: improve code-mirror accessibility

---
 .../components/EditMenu/SnippetForm/fields/CodeEditor.tsx  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
index 19eb19e8..dbd94c5b 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
@@ -41,7 +41,12 @@ const EditorTextarea: React.FC<EditorTextareaProps> = ({ textareaRef }) => {
 	const { snippet, setSnippet } = useSnippetForm()
 
 	return (
-		<div className="snippet-editor">
+		<div
+			className="snippet-editor"
+			role="application"
+			aria-label={__('Code editor', 'code-snippets')}
+			aria-description={__('In the editing area, the Tab key enters a tab character. To exit the code editor, press the Escape key and then the Tab key.', 'code-snippets')}
+		>
 			<textarea
 				ref={textareaRef}
 				id="snippet-code"

From 318dfa30d6ef8b706e5221c6becf93dd6880c603 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Sun, 12 Apr 2026 23:23:41 +0300
Subject: [PATCH 2/2] Fix: improve code-mirror accessibility

---
 src/js/components/EditMenu/SnippetForm/SnippetForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index e9c702cc..c0868996 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -152,7 +152,7 @@ const EditFormWrap: React.FC = () => {
 			<Notices placement="above-form" />
 
 			<EditForm className={editFormClassName({ snippet, isReadOnly, isExpanded })}>
-				<main className="snippet-form-upper">
+				<div className="snippet-form-upper">
 					<div className="snippet-name-wrapper">
 						<NameInput />
 						<SnippetTypeInput setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
@@ -160,7 +160,7 @@ const EditFormWrap: React.FC = () => {
 
 					<CodeEditor {...{ isExpanded, setIsExpanded }} />
 					<ConditionsEditor />
-				</main>
+				</div>
 
 				<div className="snippet-form-lower">
 					<UpsellBanner />