For dropdown/select need to add aria-label Attribute in schema level to meet WCAG about json-editor

[germanbisurgi]

I think that it would be nice and useful to go one step further and improve the general accessibility of the json editor by adding accessibility features when missing and improve/correct existing ones.

Starting with meaningful aria-labels

how it is now:

How can it be (more meaningful)

@schmunk42 what do you think?

[schmunk42]

@germanbisurgi is this addressed by #1465?

[germanbisurgi]

Yes

[germanbisurgi]

Implemented in #1465

[vishnu947]

I am still seeing the Accessibility error for select dropdown:

I am using the latest json-editor/json-editor version :"@json-editor/json-editor": "^2.13.2"

This is the schema and data i am using :
Schema JSON :
{
"title": "Sales Forecasting",
"type": "object",
"properties": {
"cardMapping": {
"type": "array",
"format": "table",
"title": "Card Variables Mapping",
"items": {
"type": "object",
"properties": {
"value": {
"type": "string",
"title": "Variable Name",
"enum": [
"ScenarioId",
"Name",
"Description",
"Status",
"RUN_DATE",
"SCENARIO_STATUS",
"SALES_FORECAST",
"BRAND_ID",
"SEC_ATTR1",
"SEC_ATTR2"
]
},
"label": {
"type": "string",
"title": "Display Name"
}
}
}
}
},
"options": {
"disable_edit_json": "true"
}
}

Data JSON :
{
"cardMapping": [
{
"value": "Name",
"label": "Scenario Name"
},
{
"value": "ScenarioId",
"label": "Scenario Id"
},
{
"value": "Status",
"label": "Status"
},
{
"value": "RUN_DATE",
"label": "Run Date"
},
{
"value": "SCENARIO_STATUS",
"label": "Scenario Status"
},
{
"value": "SALES_FORECAST",
"label": "Forecast Number"
}
]
}

Attaching the screenshot from interactive demo for your reference :

[germanbisurgi]

@vishnu947 Starting from version 2.14.0, you can use accessibility features. In the screenshot below, you'll see a select input without a label because of the table format, but it has an aria-label attribute to fix this.