Label 'Preview' is not associated with its edit field present under 'Transform' dialog box. · josdejong/jsoneditor#1573

(3 comments) (0 reactions) (0 assignees)JavaScript (10,781 stars) (2,034 forks)batch import

featurehelp wanted

説明

Test Environment OS Version: Windows 11 Version 22H2 (OS Build 23619.1000) Browser: Edge Version 121.0.2277.83 (Official build) (64-bit)

Repro Steps 1.Open URL - jsoneditor-example - CodeSandbox 3.Navigate to 'Filter' button in the code editor and activate it. 4.Transform dialog will get open. 5.Navigate to 'Preview' edit field and observe the issue.

Actual Result Label 'Preview' is not associated with its edit field present under 'Transform' dialog box.

Expected Result Label 'Preview' should be associated with its edit field present under 'Transform' dialog box.

Attachment

https://github.com/josdejong/jsoneditor/assets/93735775/0546f06d-246c-462b-89b6-ee6ba9c73db7

コントリビューターガイド

技術スタック: javascripthtmlcss
領域: frontendaccessibility
Issue 種別: accessibility
難度: 2
推定時間: under 1 hour
活動状況: fresh
明確さ: clear
前提条件: basic HTMLaccessibility basics
初心者向け度: 85
調査方針: Look for the Transform dialog component in the source code, likely in an HTML template or JSX. Identify the edit field labeled 'Preview' and its associated label element. Modify the label to use the 'for' attribute or wrap the input, or add 'aria labelledby' to associate them properly. The fix should ensure screen readers announce the label when the field is focused.