From 6d8c4f32b0df824acc8af6872059eb587591938f Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Sat, 2 May 2026 10:17:31 +0300 Subject: [PATCH] Fix: enhance accessibility in code editor component --- .../components/EditMenu/SnippetForm/fields/CodeEditor.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx index c9d28445..b75d8653 100644 --- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx +++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react' +import React, { useEffect, useId, useRef } from 'react' import { __ } from '@wordpress/i18n' import { useSubmitSnippet } from '../../../../hooks/useSubmitSnippet' import { handleUnknownError } from '../../../../utils/errors' @@ -38,6 +38,7 @@ const useFocusEditorShortcut = ( } const EditorTextarea: React.FC = ({ textareaRef }) => { + const descriptionId = useId() const { snippet, setSnippet } = useSnippetForm() return ( @@ -45,8 +46,11 @@ const EditorTextarea: React.FC = ({ textareaRef }) => { 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')} + aria-describedby={descriptionId} > +

+ {__('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')} +