Files
metabuilder/qml/MetaBuilder/CNotificationBell.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

64 lines
1.5 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QmlComponents 1.0
// Bell icon with red notification dot
Item {
id: root
Accessible.role: Accessible.Button
Accessible.name: notificationCount > 0
? notificationCount + " notifications"
: "No notifications"
activeFocusOnTab: true
property bool hasNotifications: true
property int notificationCount: 0
property bool isDark: Theme.mode === "dark"
Keys.onReturnPressed: root.clicked()
Keys.onSpacePressed: root.clicked()
signal clicked()
width: 32
height: 32
// ── MD3 palette ──
readonly property color surfaceContainer: isDark
? Qt.rgba(1, 1, 1, 0.05) : Qt.rgba(0.31, 0.31, 0.44, 0.06)
Rectangle {
anchors.fill: parent
radius: 16
color: bellMA.containsMouse ? surfaceContainer : "transparent"
CText {
anchors.centerIn: parent
text: "\uD83D\uDD14"
font.pixelSize: 16
}
// Notification dot
Rectangle {
visible: root.hasNotifications
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 2
anchors.rightMargin: 4
width: 8
height: 8
radius: 4
color: "#F43F5E"
}
MouseArea {
id: bellMA
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.clicked()
}
}
}