mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
johndoe6345789
d9ca84628b
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>
103 lines
3.1 KiB
QML
103 lines
3.1 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import QmlComponents 1.0
|
|
|
|
ColumnLayout {
|
|
id: root
|
|
objectName: "dropdownGeneralForm"
|
|
Accessible.role: Accessible.Form
|
|
Accessible.name: "Dropdown general settings"
|
|
spacing: 16
|
|
|
|
property var dropdown: null
|
|
signal fieldChanged(string field, var value)
|
|
|
|
CText { variant: "body2"; text: "General"; font.bold: true }
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 12
|
|
|
|
CTextField {
|
|
label: "Name"
|
|
placeholderText: "dropdown_name"
|
|
text: root.dropdown ? root.dropdown.name : ""
|
|
Layout.fillWidth: true
|
|
Accessible.role: Accessible.EditableText
|
|
Accessible.name: "Dropdown name"
|
|
onTextChanged: {
|
|
if (root.dropdown && text !== root.dropdown.name)
|
|
root.fieldChanged("name", text)
|
|
}
|
|
}
|
|
|
|
CTextField {
|
|
label: "Description"
|
|
placeholderText: "What is this dropdown for?"
|
|
text: root.dropdown ? root.dropdown.description : ""
|
|
Layout.fillWidth: true
|
|
Accessible.role: Accessible.EditableText
|
|
Accessible.name: "Dropdown description"
|
|
onTextChanged: {
|
|
if (root.dropdown
|
|
&& text !== root.dropdown.description)
|
|
root.fieldChanged("description", text)
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 24
|
|
|
|
RowLayout {
|
|
spacing: 8
|
|
Switch {
|
|
checked: root.dropdown
|
|
? root.dropdown.allowCustom : false
|
|
activeFocusOnTab: true
|
|
Accessible.role: Accessible.CheckBox
|
|
Accessible.name: "Allow custom values"
|
|
onCheckedChanged: {
|
|
if (root.dropdown
|
|
&& checked !== root.dropdown.allowCustom)
|
|
root.fieldChanged("allowCustom", checked)
|
|
}
|
|
}
|
|
CText {
|
|
variant: "body2"; text: "Allow custom values"
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: 8
|
|
Switch {
|
|
checked: root.dropdown
|
|
? root.dropdown.required : false
|
|
activeFocusOnTab: true
|
|
Accessible.role: Accessible.CheckBox
|
|
Accessible.name: "Required"
|
|
onCheckedChanged: {
|
|
if (root.dropdown
|
|
&& checked !== root.dropdown.required)
|
|
root.fieldChanged("required", checked)
|
|
}
|
|
}
|
|
CText { variant: "body2"; text: "Required" }
|
|
}
|
|
|
|
Item { Layout.fillWidth: true }
|
|
|
|
CBadge {
|
|
text: (root.dropdown && root.dropdown.required
|
|
? "Required" : "Optional")
|
|
accent: root.dropdown ? root.dropdown.required : false
|
|
}
|
|
CBadge {
|
|
text: (root.dropdown && root.dropdown.allowCustom
|
|
? "Custom allowed" : "Fixed options")
|
|
}
|
|
}
|
|
}
|