josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
814 stars 108 forks source link

How to add associated label to textarea #451

Open emmalcg opened 2 weeks ago

emmalcg commented 2 weeks ago

Hey! i am wondering if there is anyway to add additional attributes to editor and menus. Most importantly, I would like to add a label element for the rendered editor (the div with the role of textbox) for accessibility reasons. I would be able to do so if this element had a unique id but i do not see one on the rendered element. Is there a way to add a label that is bound to this textbox, or a way to add additional attributes (like id or even aria attributes) to the rendered elements?

<div spellcheck="false" autocorrect="off" autocapitalize="off" translate="no" contenteditable="true" style="tab-size: 4;" class="cm-content cm-lineWrapping" role="textbox" aria-multiline="true" data-language="json" aria-autocomplete="list"><div class="cm-activeLine cm-line" style="padding-left: calc(2ch + 6px); text-indent: calc(-2ch + 0px);">{}</div></div>

josdejong commented 1 week ago

Thanks for your suggestion. Improving accesibility sounds like a good idea in general :) I think we should do that in the editor itself.

If I'm correct you're referring to the input field that opens when you double click a key or value, so that you can edit this field? We can add a label attribute there. I'm not sure what would be a good contents for it. "Editing key" and "Editing value" for example?

Are there more places where we need to improve accessibility?