slint icon indicating copy to clipboard operation
slint copied to clipboard

Add the aibility to reference a component from another one

Open DataTriny opened this issue 2 years ago • 0 comments

For accessibility purpose, it is often necessary to express a relationship between two elements in the UI. Type of relations include "labelled by", "described by", "controls"... Some of these relationships are actually many-to-one (e.g. one element can be labelled by multiple other elements). To my knowledge Slint doesn't yet have such kind of properties, neither in its language nor runtime. So I'm opening this issue to track implementation of these properties, so we can build richer accessible interfaces.

Here is how the built-in GroupBox component could benefit from this by indicating that the label displaying its title actually labels the root component:

export component GroupBox {
    in property <string> title <=> label.text;
    in property <bool> enabled: true;

    accessible-labelled-by: label

    VerticalLayout {
        spacing: 8px;
        padding-top: 16px;
        padding-bottom: 8px;

        label := Text {
            vertical-stretch: 0;
            color: !root.enabled ? FluentPalette.text-disabled : FluentPalette.control-foreground;
            font-size: FluentFontSettings.body-strong.font-size;
            font-weight: FluentFontSettings.body-strong.font-weight;
        }

        Rectangle {
            vertical-stretch: 1;

            GridLayout {
                @children
            }
        }
    }
}

And here is how the ScrollView component could be improved by indicating that its scrollbars control the scrolling of the content:

export component ScrollView {
    ...

    i-flickable := Flickable {
        ...

        @children
    }

    i-vertical-bar := ScrollBar {
        ...
        accessible-controls: i-flickable
    }

    i-horizontal-bar := ScrollBar {
        ...
        accessible-controls: i-flickable
    }
}

Of course, it should be then possible to obtain an accesskit::NodeId from such references, so that it can be passed to the various methods of accesskit::NodeBuilder (e.g. push_labelled_by, push_controls...).

DataTriny avatar Apr 16 '24 19:04 DataTriny