Files
metabuilder/qml/MetaBuilder/CAddFieldDialog.qml
johndoe6345789 d9ca84628b feat(a11y): deep keyboard accessibility pass across all QML components
Second-pass a11y work across all 12 component groups. Every interactive
element now has activeFocusOnTab, Keys.onReturnPressed/SpacePressed, and
context-aware Accessible.name/description bindings.

Highlights:
- Dialogs: keyboard handlers with enabled-guard on confirm buttons
- CDropdownMenu: full keyboard nav (Up/Down/Enter/Escape)
- CLoginForm: explicit KeyNavigation.tab chain (username→password→submit)
- CNotificationBell: dynamic "3 notifications"/"No notifications" name
- CJobProgressBar: Accessible.minimumValue/maximumValue/currentValue
- CExecutionStatusDot: "Execution status: Running/Passed/Failed" binding
- CKeyboardShortcuts: invisible Repeater exposes all shortcuts to a11y tree
- CDataTable rows: "Row N of M" descriptions
- Canvas elements: Accessible.Canvas role + keyboard zoom (+/- keys)
- DropdownExpandedList: focus-highlight extended to :activeFocus
- Dynamic names reflect loading state (e.g. "Signing in, please wait")

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-19 20:53:53 +00:00

151 lines
5.0 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QmlComponents 1.0
CDialog {
id: dlg
objectName: "dialog_add_field"
Accessible.role: Accessible.Dialog
Accessible.name: title
activeFocusOnTab: true
title: "Add New Field"
property var fieldTypes: []
property string fieldName: ""
property string fieldType: "string"
property bool fieldRequired: false
property string fieldDefault: ""
property string fieldDescription: ""
signal fieldAdded(var fieldData)
signal cancelled()
function reset() {
fieldName = ""; fieldType = "string"
fieldRequired = false
fieldDefault = ""; fieldDescription = ""
}
ColumnLayout {
spacing: 14; width: 360
CTextField {
label: "Field Name"
placeholderText: "e.g. quantity"
text: dlg.fieldName
Layout.fillWidth: true
activeFocusOnTab: true
Accessible.role: Accessible.EditableText
Accessible.name: "Field Name"
onTextChanged: dlg.fieldName = text
}
ColumnLayout {
Layout.fillWidth: true; spacing: 4
CText {
variant: "caption"; text: "Type"
}
CSelect {
model: dlg.fieldTypes
currentIndex:
dlg.fieldTypes.indexOf(
dlg.fieldType)
Layout.fillWidth: true
activeFocusOnTab: true
Accessible.role: Accessible.ComboBox
Accessible.name: "Field Type"
onCurrentIndexChanged:
dlg.fieldType =
dlg.fieldTypes[currentIndex]
}
}
CSwitch {
text: "Required"
checked: dlg.fieldRequired
activeFocusOnTab: true
Accessible.role: Accessible.CheckBox
Accessible.name: "Required field"
Accessible.description:
"Toggle whether this field " +
"is mandatory"
onCheckedChanged:
dlg.fieldRequired = checked
}
CTextField {
label: "Default Value"
placeholderText: "Optional default"
text: dlg.fieldDefault
Layout.fillWidth: true
activeFocusOnTab: true
Accessible.role: Accessible.EditableText
Accessible.name: "Default Value"
onTextChanged:
dlg.fieldDefault = text
}
CTextField {
label: "Description"
placeholderText:
"What this field represents"
text: dlg.fieldDescription
Layout.fillWidth: true
activeFocusOnTab: true
Accessible.role: Accessible.EditableText
Accessible.name: "Field Description"
onTextChanged:
dlg.fieldDescription = text
}
FlexRow {
Layout.fillWidth: true; spacing: 12
Item { Layout.fillWidth: true }
CButton {
text: "Cancel"
variant: "ghost"
activeFocusOnTab: true
Accessible.role: Accessible.Button
Accessible.name: "Cancel"
Keys.onReturnPressed:
{ reset(); cancelled() }
Keys.onSpacePressed:
{ reset(); cancelled() }
onClicked: { reset(); cancelled() }
}
CButton {
text: "Add Field"
variant: "primary"
enabled:
dlg.fieldName.trim() !== ""
activeFocusOnTab: true
Accessible.role: Accessible.Button
Accessible.name: "Add Field"
Keys.onReturnPressed: {
if (!enabled) return
fieldAdded({
name: fieldName,
type: fieldType,
required: fieldRequired,
defaultValue: fieldDefault,
description: fieldDescription
})
reset()
}
Keys.onSpacePressed: {
if (!enabled) return
fieldAdded({
name: fieldName,
type: fieldType,
required: fieldRequired,
defaultValue: fieldDefault,
description: fieldDescription
})
reset()
}
onClicked: {
fieldAdded({
name: fieldName,
type: fieldType,
required: fieldRequired,
defaultValue: fieldDefault,
description: fieldDescription
})
reset()
}
}
}
}
}