Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the aibility to reference a component from another one #5082

Open
DataTriny opened this issue Apr 16, 2024 · 0 comments
Open

Add the aibility to reference a component from another one #5082

DataTriny opened this issue Apr 16, 2024 · 0 comments

Comments

@DataTriny
Copy link
Contributor

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...).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant