Improve accessibility of tab widgets

examples/gallery/ui/pages/page.slint

@@ -10,6 +10,9 @@ export component Page inherits VerticalBox {
     in property<string> description: "description";
     in property<bool> show-enable-switch: true;
 
+    accessible-role: tab-panel;
+    accessible-label: root.title;
+
     HorizontalBox {
         Text {
             font-size: 20px;

examples/gallery/ui/side_bar.slint

@@ -4,13 +4,20 @@
 import { HorizontalBox, VerticalBox, Palette } from "std-widgets.slint";
 
 component SideBarItem inherits Rectangle {
+    in property <int> tab-index;
     in property <bool> selected;
     in property <bool> has-focus;
     in-out property <string> text <=> label.text;
 
     callback clicked <=> touch.clicked;
 
     min-height: l.preferred-height;
+    accessible-role: tab;
+    accessible-label: root.text;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.selected;
+    accessible-action-default => { self.clicked(); }
 
     states [
         pressed when touch.pressed : {
@@ -40,7 +47,8 @@ component SideBarItem inherits Rectangle {
 
         label := Text {
             vertical-alignment: center;
-         }
+            accessible-role: none;
+        }
     }
 
     touch := TouchArea {
@@ -57,8 +65,10 @@ export component SideBar inherits Rectangle {
 
     width: 180px;
     forward-focus: fs;
-    accessible-role: tab;
+    accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
+    accessible-label: root.title;
+    accessible-item-count: root.model.length;
 
     Rectangle {
         background: Palette.background.darker(0.2);
@@ -111,6 +121,7 @@ export component SideBar inherits Rectangle {
             for item[index] in root.model : SideBarItem {
                 clicked => { root.current-item = index; }
 
+                tab-index: index;
                 has-focus: index == root.current-focused;
                 text: item;
                 selected: index == root.current-item;

internal/backends/qt/qt_accessible.rs

@@ -321,6 +321,7 @@ cpp! {{
                     i_slint_core::items::AccessibleRole::TextInput => QAccessible_Role_EditableText,
                     i_slint_core::items::AccessibleRole::Switch => QAccessible_Role_CheckBox,
                     i_slint_core::items::AccessibleRole::ListItem => QAccessible_Role_ListItem,
+                    i_slint_core::items::AccessibleRole::TabPanel => QAccessible_Role_Pane,
                     _ => QAccessible_Role_NoRole,
                 }
             });

internal/backends/testing/slint_systest.proto

@@ -97,6 +97,7 @@ enum AccessibleRole {
     TextInput = 13;
     Switch = 14;
     ListItem = 15;
+    TabPanel = 16;
 }
 
 message ElementQueryInstruction {

internal/backends/testing/systest.rs

@@ -528,6 +528,7 @@ fn convert_to_proto_accessible_role(
         i_slint_core::items::AccessibleRole::TextInput => proto::AccessibleRole::TextInput,
         i_slint_core::items::AccessibleRole::Switch => proto::AccessibleRole::Switch,
         i_slint_core::items::AccessibleRole::ListItem => proto::AccessibleRole::ListItem,
+        i_slint_core::items::AccessibleRole::TabPanel => proto::AccessibleRole::TabPanel,
         _ => return None,
     })
 }
@@ -554,6 +555,7 @@ fn convert_from_proto_accessible_role(
         proto::AccessibleRole::TextInput => i_slint_core::items::AccessibleRole::TextInput,
         proto::AccessibleRole::Switch => i_slint_core::items::AccessibleRole::Switch,
         proto::AccessibleRole::ListItem => i_slint_core::items::AccessibleRole::ListItem,
+        proto::AccessibleRole::TabPanel => i_slint_core::items::AccessibleRole::TabPanel,
     })
 }
 

internal/backends/winit/accesskit.rs

@@ -448,6 +448,7 @@ impl NodeCollection {
                     i_slint_core::items::AccessibleRole::Spinbox => Role::SpinButton,
                     i_slint_core::items::AccessibleRole::Tab => Role::Tab,
                     i_slint_core::items::AccessibleRole::TabList => Role::TabList,
+                    i_slint_core::items::AccessibleRole::TabPanel => Role::TabPanel,
                     i_slint_core::items::AccessibleRole::Text => Role::Label,
                     i_slint_core::items::AccessibleRole::Table => Role::Table,
                     i_slint_core::items::AccessibleRole::Tree => Role::Tree,
@@ -483,6 +484,10 @@ impl NodeCollection {
             node.set_disabled();
         }
 
+        if !item.is_visible() {
+            node.set_hidden();
+        }
+
         let geometry = item.geometry();
         let absolute_origin = item.map_to_window(geometry.origin) + window_position.to_vector();
         let physical_origin = (absolute_origin * scale_factor).cast::<f64>();

internal/common/enums.rs

@@ -360,6 +360,8 @@ macro_rules! for_each_enums {
                 Tab,
                 /// The element is similar to the tab bar in a `TabWidget`.
                 TabList,
+                /// The element is a container for tab content.
+                TabPanel,
                 /// The role for a `Text` element. It's automatically applied.
                 Text,
                 /// The role for a `TableView` or behaves like one.

internal/compiler/passes/lower_tabwidget.rs

@@ -110,6 +110,32 @@ fn process_tabwidget(
                 &old.into_inner(),
             );
         }
+        let role = crate::typeregister::BUILTIN
+            .with(|e| e.enums.AccessibleRole.clone())
+            .try_value_from_string("tab-panel")
+            .unwrap();
+        let old = child.borrow_mut().bindings.insert(
+            SmolStr::new_static("accessible-role"),
+            RefCell::new(Expression::EnumerationValue(role).into()),
+        );
+        if let Some(old) = old {
+            diag.push_error(
+                "The property 'accessible-role' cannot be set for Tabs inside a TabWidget"
+                    .to_owned(),
+                &old.into_inner(),
+            );
+        }
+        let title_ref = RefCell::new(
+            Expression::PropertyReference(NamedReference::new(child, "title".into())).into(),
+        );
+        let old = child.borrow_mut().bindings.insert("accessible-label".into(), title_ref);
+        if let Some(old) = old {
+            diag.push_error(
+                "The property 'accessible-label' cannot be set for Tabs inside a TabWidget"
+                    .to_owned(),
+                &old.into_inner(),
+            );
+        }
 
         let mut tab = Element {
             id: format_smolstr!("{}-tab{}", elem.borrow().id, index),

internal/compiler/tests/syntax/elements/tabwidget2.slint

@@ -24,5 +24,16 @@ export Test2 := Rectangle {
 //                  ^error{dynamic tabs \('if' or 'for'\) are currently not supported}
             title: "hello";
         }
+
+        Tab {
+            accessible-role: tab-panel;
+//                           ^error{The property 'accessible-role' cannot be set for Tabs inside a TabWidget}
+            Rectangle { }
+        }
+        Tab {
+            accessible-label: "Tab Panel";
+//                            ^error{The property 'accessible-label' cannot be set for Tabs inside a TabWidget}
+            Rectangle { }
+        }
     }
 }

internal/compiler/widgets/cosmic/tabwidget.slint

@@ -52,6 +52,10 @@ export component TabImpl inherits Rectangle {
     accessible-role: tab;
     accessible-enabled: root.enabled;
     accessible-label: root.title;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.is-current;
+    accessible-action-default => { touch-area.clicked(); }
 
     Rectangle {
         y: 0;
@@ -128,6 +132,7 @@ export component TabImpl inherits Rectangle {
             font-size: CosmicFontSettings.body.font-size;
             font-weight: root.is-current ? CosmicFontSettings.body-strong.font-weight : CosmicFontSettings.body.font-weight;
             color: root.is-current ? CosmicPalette.accent-background : CosmicPalette.control-foreground;
+            accessible-role: none;
         }
     }
 }
@@ -139,6 +144,7 @@ export component TabBarImpl inherits TabBarBase {
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
+    accessible-item-count: root.num-tabs;
     preferred-height: 44px;
 
     Flickable {

internal/compiler/widgets/cupertino/tabwidget.slint

@@ -50,6 +50,10 @@ export component TabImpl inherits Rectangle {
     accessible-role: tab;
     accessible-enabled: root.enabled;
     accessible-label: root.title;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.is-current;
+    accessible-action-default => { i-touch-area.clicked(); }
 
     if (root.is-current || i-touch-area.pressed): Rectangle {
         width: 100%;
@@ -94,6 +98,7 @@ export component TabImpl inherits Rectangle {
             font-size: CupertinoFontSettings.body-strong.font-size;
             font-weight: CupertinoFontSettings.body-strong.font-weight;
             color: CupertinoPalette.foreground;
+            accessible-role: none;
         }
     }
 }
@@ -105,6 +110,7 @@ export component TabBarImpl inherits TabBarBase {
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
+    accessible-item-count: root.num-tabs;
 
     Rectangle {
         border-radius: 7px;

internal/compiler/widgets/fluent/tabwidget.slint

@@ -50,6 +50,10 @@ export component TabImpl inherits Rectangle {
     accessible-role: tab;
     accessible-enabled: root.enabled;
     accessible-label: root.title;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.is-current;
+    accessible-action-default => { i-touch-area.clicked(); }
 
     Rectangle {
         clip: true;
@@ -85,6 +89,7 @@ export component TabImpl inherits Rectangle {
             font-size: root.is-current ? FluentFontSettings.body-strong.font-size : FluentFontSettings.body.font-size;
             font-weight: root.is-current ? FluentFontSettings.body-strong.font-weight : FluentFontSettings.body.font-weight;
             color: root.is-current ? FluentPalette.control-foreground : FluentPalette.text-secondary;
+            accessible-role: none;
         }
     }
 
@@ -121,6 +126,7 @@ export component TabBarImpl inherits TabBarBase {
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
+    accessible-item-count: root.num-tabs;
 
     i-focus-scope := FocusScope {
         property <int> focused-tab: 0;

internal/compiler/widgets/material/tabwidget.slint

@@ -47,6 +47,10 @@ export component TabImpl inherits Rectangle {
     accessible-role: tab;
     accessible-enabled: root.enabled;
     accessible-label: root.title;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.active;
+    accessible-action-default => { i-touch-area.clicked(); }
 
     i-container := Rectangle {
         background: MaterialPalette.alternate-background;
@@ -76,6 +80,7 @@ export component TabImpl inherits Rectangle {
             //font-family: MaterialFontSettings.title-small.font;
             font-size: MaterialFontSettings.title-small.font-size;
             font-weight: MaterialFontSettings.title-small.font-weight;
+            accessible-role: none;
 
             animate color {
                 duration: 250ms;
@@ -113,6 +118,7 @@ export component TabBarImpl inherits TabBarBase {
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
+    accessible-item-count: root.num-tabs;
 
     Flickable {
         HorizontalLayout {            

internal/compiler/widgets/qt/tabwidget.slint

@@ -9,6 +9,13 @@ export component TabImpl inherits NativeTab {
     accessible-role: tab;
     accessible-enabled: root.enabled;
     accessible-label <=> root.title;
+    accessible-item-index: root.tab-index;
+    accessible-item-selectable: true;
+    accessible-item-selected: root.tab-index == root.current;
+    accessible-action-default => {
+        root.current = root.tab-index;
+        root.current-focused = root.tab-index;
+    }
 }
 
 export component TabBarImpl inherits TabBarBase {
@@ -18,6 +25,7 @@ export component TabBarImpl inherits TabBarBase {
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current;
+    accessible-item-count: root.num-tabs;
 
     Rectangle {
         // The breeze style draws outside of the tab bar, which is clip by default with Qt