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

(3 留言) (0 反應) (0 負責人)JavaScript (10,781 star) (2,034 fork)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
議題類型: 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.