Various accessibility fixes to Material Design widgets (#9918)

Author: DataTriny

ui-libraries/material/src/ui/components/filled_icon_button.slint

@@ -18,7 +18,7 @@ export component FilledIconButton {
     callback clicked();
 
     accessible-role: button;
-    accessible-enabled: true;
+    accessible-enabled: root.enabled;
     accessible-label: root.tooltip;
     accessible-checkable: root.checkable;
     accessible-checked: root.checked;

ui-libraries/material/src/ui/components/icon_button.slint

@@ -21,7 +21,7 @@ export component IconButton {
     callback clicked();
 
     accessible-role: button;
-    accessible-enabled: true;
+    accessible-enabled: root.enabled;
     accessible-label: root.tooltip;
     accessible-checkable: root.checkable;
     accessible-checked: root.checked;

ui-libraries/material/src/ui/components/outline_icon_button.slint

@@ -18,7 +18,7 @@ export component OutlineIconButton {
     callback clicked();
 
     accessible-role: button;
-    accessible-enabled: true;
+    accessible-enabled: root.enabled;
     accessible-label: root.tooltip;
     accessible-checkable: root.checkable;
     accessible-checked: root.checked;

ui-libraries/material/src/ui/components/progress_indicator.slint

@@ -8,6 +8,10 @@ export component LinearProgressIndicator {
     in property <float> progress;
     in property <bool> indeterminate;
 
+    accessible-role: progress-indicator;
+    accessible-value: !root.indeterminate ? root.progress : "";
+    accessible-value-minimum: 0.0;
+    accessible-value-maximum: 1.0;
     height: MaterialStyleMetrics.size_4;
 
     Rectangle {
@@ -34,6 +38,10 @@ export component CircularProgressIndicator {
 
     property <length> bar_height: MaterialStyleMetrics.size_4;
 
+    accessible-role: progress-indicator;
+    accessible-value: !root.indeterminate ? root.progress : "";
+    accessible-value-minimum: 0.0;
+    accessible-value-maximum: 1.0;
     width: self.height;
     min_height: MaterialStyleMetrics.size_40;
 

ui-libraries/material/src/ui/components/slider.slint

@@ -24,6 +24,13 @@ export component Slider {
     accessible-value-minimum: root.minimum;
     accessible-value-maximum: root.maximum;
     accessible-value-step: min(steps, (root.maximum - root.minimum) / 100);
+    accessible-action-set-value(v) => {
+        if v.is-float() {
+            root.set_value(v.to-float());
+        }
+    }
+    accessible-action-increment => { root.increment_value(); }
+    accessible-action-decrement => { root.decrement_value(); }
     forward-focus: focus_scope;
 
     focus_scope := FocusScope {
@@ -107,11 +114,11 @@ export component Slider {
 
         key_pressed(event) => {
             if event.text == Key.LeftArrow {
-                root.set_value(root.value - root.steps);
+                root.decrement_value();
                 return accept;
             }
             if event.text == Key.RightArrow {
-                root.set_value(root.value + root.steps);
+                root.increment_value();
                 return accept;
             }
             reject
@@ -137,4 +144,12 @@ export component Slider {
             root.value = clamp(value, root.minimum, root.maximum)
         }
     }
+
+    function increment_value() {
+        root.set_value(root.value + root.steps);
+    }
+
+    function decrement_value() {
+        root.set_value(root.value - root.steps);
+    }
 }

ui-libraries/material/src/ui/components/switch.slint

@@ -25,7 +25,7 @@ export component Switch {
     accessible-enabled: root.enabled;
     accessible-checkable: true;
     accessible-checked <=> root.checked;
-    accessible-role: checkbox;
+    accessible-role: switch;
     accessible-action-default => { touch_area.clicked(); }
     forward_focus: touch_area;
 

ui-libraries/material/src/ui/components/tonal_icon_button.slint

@@ -18,7 +18,7 @@ export component TonalIconButton {
     callback clicked();
 
     accessible-role: button;
-    accessible-enabled: true;
+    accessible-enabled: root.enabled;
     accessible-label: root.tooltip;
     accessible-checkable: root.checkable;
     accessible-checked: root.checked;