Merge pull request #349 from codesnippetspro/a11y-code-mirror

Fix: improve code-mirror accessibility (tab trap)

Author: imantsk

src/js/components/EditMenu/SnippetForm/SnippetForm.tsx

@@ -152,15 +152,15 @@ 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} />
 					</div>
 
 					<CodeEditor {...{ isExpanded, setIsExpanded }} />
 					<ConditionsEditor />
-				</main>
+				</div>
 
 				<div className="snippet-form-lower">
 					<UpsellBanner />

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"