Skip to content

Rating: Rework the component for better UX and a11y

ivan tkachenko requested to merge work/ratijas/rating into master

This is a library-grade component which I would be happy to upstream into Kirigami and reuse in other places, such as KNewStuff and Elisa.

It supports keyboard interaction, RTL layout mirroring, optional half-star display mode, and different editing policies.

Its interaction area now spans entire control (and slightly beyond -- across control's paddings, for convenience), and allows for press and drag editing.

A minor improvement opportunity would be to support fractional values beyond half-star precision, but it is not currently possible with a set of 3 fixed icons.

One Kirigami-specific caveat, mouse stealing prevention had to be enabled in order to make drag actually work in OverlaySheet.

Note: this component can be tested independently with qml tool. All the modes work and can be experimented with. For example, add this to the bottom of the component and comment out some lines to your liking:

    Rectangle {
        anchors.fill: parent
        color: Kirigami.Theme.backgroundColor
        z: -1

    QQC2.Label {
        z: 1
        opacity: 0.8
        anchors.centerIn: parent
        text: `${control.hoveredValue}${control.value}${control.effectiveValue}`
        color: "#1EA8F7"
        font.bold: true
        Rectangle {
            anchors.fill: parent
            anchors.margins: -parent.height/4
            z: -1
            radius: parent.height
            color: "#262828"

    Component.onCompleted: {
        height = 100;
        precision = Rating.Precision.HalfStar;
        precision = Rating.Precision.FullStar;
        readOnly = false;
        editPolicy |= Rating.EditPolicy.AllowTapToUnset;
        editPolicy |= Rating.EditPolicy.AllowSetZero;
        value = 3;
        LayoutMirroring.enabled = true;
        LayoutMirroring.childrenInherit = true;
Edited by ivan tkachenko

Merge request reports