chore: Resolve conflicts

Cargo.toml

@@ -79,6 +79,7 @@ skia-safe = { workspace = true }
 tokio = { workspace = true, features = ["fs"]}
 dioxus = { workspace = true }
 freya = { workspace = true }
+freya-hooks = { workspace = true }
 freya-core = { workspace = true }
 freya-testing = { workspace = true }
 reqwest = { version = "0.12.0", features = ["json"] }
@@ -96,6 +97,7 @@ tree-sitter-rust = "0.23.0"
 rfd = "0.14.1"
 bytes = "1.5.0"
 dioxus-sdk = { workspace = true }
+winit = { workspace = true }
 
 [profile.release]
 lto = true

README.md

@@ -25,7 +25,7 @@
 fn app() -> Element {
     let mut count = use_signal(|| 0);
 
-    render!(
+    rsx!(
         rect {
             height: "50%",
             width: "100%",
@@ -70,7 +70,7 @@ fn app() -> Element {
 
 Thanks to my sponsors for supporting this project! 😄
 
-<!-- sponsors --><a href="https://github.com/piny4man"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;8446285?u&#x3D;fd37db4dd9b4ba94dabe0bccc3a95ef2a35376ab&amp;v&#x3D;4" width="60px" alt="" /></a><!-- sponsors -->
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;8446285?u&#x3D;fd37db4dd9b4ba94dabe0bccc3a95ef2a35376ab&amp;v&#x3D;4" width="60px" alt="" /></a><a href="https://github.com/gqf2008"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;2295878?v&#x3D;4" width="60px" alt="高庆丰" /></a><!-- sponsors -->
 
 ### Want to try it? 🤔
 

crates/components/src/input.rs

@@ -217,7 +217,7 @@ pub fn Input(
             main_align: "center",
             cursor_reference,
             a11y_id,
-            a11y_role: "textInput",
+            a11y_role: "text-input",
             a11y_auto_focus: "{auto_focus}",
             onkeydown,
             onkeyup,

crates/components/src/network_image.rs

@@ -124,7 +124,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
             a11y_id,
             image_data,
             a11y_role: "image",
-            a11y_alt: alt
+            a11y_name: alt
         })
     } else if *status.read() == ImageState::Loading {
         if let Some(loading_element) = &props.loading {

crates/components/src/scroll_views/scroll_bar.rs

@@ -56,7 +56,7 @@ pub fn ScrollBar(
     rsx!(
         rect {
             overflow: "clip",
-            a11y_role:"scrollBar",
+            a11y_role: "scroll-bar",
             width: "{width}",
             height: "{height}",
             offset_x: "{offset_x}",

crates/components/src/scroll_views/scroll_view.rs

@@ -372,7 +372,7 @@ pub fn ScrollView(
 
     rsx!(
         rect {
-            a11y_role:"scrollView",
+            a11y_role:"scroll-view",
             overflow: "clip",
             direction: "horizontal",
             width,

crates/components/src/scroll_views/use_scroll_controller.rs

@@ -75,6 +75,14 @@ impl ScrollController {
         }
     }
 
+    pub fn x(&self) -> Signal<i32> {
+        self.x
+    }
+
+    pub fn y(&self) -> Signal<i32> {
+        self.y
+    }
+
     pub fn use_apply(&mut self, width: f32, height: f32) {
         let scope_id = current_scope_id().unwrap();
 

crates/components/src/scroll_views/virtual_scroll_view.rs

@@ -447,7 +447,7 @@ pub fn VirtualScrollView<
 
     rsx!(
         rect {
-            a11y_role:"scrollView",
+            a11y_role: "scroll-view",
             overflow: "clip",
             direction: "horizontal",
             width: "{width}",

crates/core/src/accessibility/mod.rs

@@ -4,6 +4,7 @@ use freya_native_core::{
     real_dom::NodeImmutable,
 };
 use freya_node_state::AccessibilityNodeState;
+use itertools::Itertools;
 pub use tree::*;
 
 use crate::{
@@ -54,7 +55,9 @@ impl NodeAccessibility for DioxusNode<'_> {
 
     /// Collect all descendant accessibility node ids
     fn get_accessibility_children(&self) -> Vec<AccessibilityId> {
-        let node_accessibility = &*self.get::<AccessibilityNodeState>().unwrap();
-        node_accessibility.descencent_accessibility_ids.clone()
+        self.children()
+            .into_iter()
+            .filter_map(|child| child.get_accessibility_id())
+            .collect_vec()
     }
 }

crates/core/src/accessibility/tree.rs

@@ -152,19 +152,20 @@ impl AccessibilityTree {
         // Mark the ancestors as modified
         for node_id in added_or_updated_ids.clone() {
             let node_ref = rdom.get(node_id).unwrap();
-            let node_accessibility_state = node_ref.get::<AccessibilityNodeState>().unwrap();
-            added_or_updated_ids.insert(
-                node_accessibility_state
-                    .closest_accessibility_node_id
-                    .unwrap_or(rdom.root_id()),
-            );
+            let node_ref_parent = node_ref.parent_id().unwrap_or(rdom.root_id());
+            added_or_updated_ids.insert(node_ref_parent);
             self.map
                 .insert(node_ref.get_accessibility_id().unwrap(), node_id);
         }
 
         // Mark the still existing ancenstors as modified
-        for (node_id, ancestor_node_id) in removed_ids {
-            added_or_updated_ids.insert(ancestor_node_id);
+        for (_, ancestor_node_id) in removed_ids.iter() {
+            added_or_updated_ids.insert(*ancestor_node_id);
+        }
+
+        // Remove all the deleted noeds from the added_or_update list
+        for (node_id, _) in removed_ids {
+            added_or_updated_ids.remove(&node_id);
             self.map.retain(|_, id| *id != node_id);
         }
 
@@ -180,7 +181,6 @@ impl AccessibilityTree {
             {
                 let accessibility_node =
                     Self::create_node(&node_ref, layout_node, node_accessibility_state);
-
                 let accessibility_id = node_ref.get_accessibility_id().unwrap();
 
                 nodes.push((accessibility_id, accessibility_node));
@@ -332,7 +332,18 @@ impl AccessibilityTree {
         let transform_state = &*node_ref.get::<TransformState>().unwrap();
         let node_type = node_ref.node_type();
 
-        let mut builder = NodeBuilder::new(Role::default());
+        let mut builder = match node_type.tag() {
+            // Make the root accessibility node.
+            Some(&TagName::Root) => NodeBuilder::new(Role::Window),
+
+            // All other node types will either don't have a builder (but don't support
+            // accessibility attributes like with `text`) or have their builder made for
+            // them already.
+            Some(_) => node_accessibility.builder.clone().unwrap(),
+
+            // Tag-less nodes can't have accessibility state
+            None => unreachable!(),
+        };
 
         // Set children
         let children = node_ref.get_accessibility_children();
@@ -347,6 +358,14 @@ impl AccessibilityTree {
             y1: area.max_y(),
         });
 
+        if let NodeType::Element(node) = &*node_type {
+            if matches!(node.tag, TagName::Label | TagName::Paragraph) && builder.name().is_none() {
+                if let Some(inner_text) = node_ref.get_inner_texts() {
+                    builder.set_name(inner_text);
+                }
+            }
+        }
+
         // Set focusable action
         // This will cause assistive technology to offer the user an option
         // to focus the current element if it supports it.
@@ -453,28 +472,6 @@ impl AccessibilityTree {
             ));
         }
 
-        // Set text value
-        if let Some(alt) = &node_accessibility.a11y_alt {
-            builder.set_value(alt.to_owned());
-        } else if let Some(value) = node_ref.get_inner_texts() {
-            builder.set_value(value);
-            builder.set_role(Role::Label);
-        }
-
-        // Set name
-        if let Some(name) = &node_accessibility.a11y_name {
-            builder.set_name(name.to_owned());
-        }
-
-        // Set role
-        if let Some(role) = node_accessibility.a11y_role {
-            builder.set_role(role);
-        }
-        // Set root role
-        if node_ref.id() == node_ref.real_dom().root_id() {
-            builder.set_role(Role::Window);
-        }
-
         builder.build()
     }
 }

crates/core/src/dom/mutations_writer.rs

@@ -17,7 +17,6 @@ use freya_native_core::{
     NodeId,
 };
 use freya_node_state::{
-    AccessibilityNodeState,
     CursorState,
     CustomAttributeValues,
     LayerState,
@@ -91,9 +90,8 @@ impl<'a> MutationsWriter<'a> {
 
                 // Remove from the accessibility tree
                 if node.get_accessibility_id().is_some() {
-                    let node_accessibility_state = node.get::<AccessibilityNodeState>().unwrap();
-                    let closed_accessibility_node_id = node_accessibility_state
-                        .closest_accessibility_node_id
+                    let closed_accessibility_node_id = node
+                        .parent_id()
                         .unwrap_or(self.native_writer.rdom.root_id());
                     self.accessibility_dirty_nodes
                         .remove(node.id(), closed_accessibility_node_id);

crates/core/src/render/utils/label.rs

@@ -38,11 +38,13 @@ pub fn create_label(
     }
 
     let mut paragraph = paragraph_builder.build();
-    paragraph.layout(if font_style.max_lines == Some(1) {
-        f32::MAX
-    } else {
-        area_size.width + 1.0
-    });
+    paragraph.layout(
+        if font_style.max_lines == Some(1) && font_style.text_align == TextAlign::default() {
+            f32::MAX
+        } else {
+            area_size.width + 1.0
+        },
+    );
 
     paragraph
 }

crates/core/src/render/utils/paragraph.rs

@@ -10,7 +10,6 @@ use freya_node_state::{
     FontStyleState,
     HighlightMode,
     LayoutState,
-    TextOverflow,
 };
 use torin::prelude::{
     Alignment,
@@ -36,8 +35,8 @@ pub fn create_paragraph(
     paragraph_style.set_max_lines(font_style.max_lines);
     paragraph_style.set_replace_tab_characters(true);
 
-    if font_style.text_overflow == TextOverflow::Ellipsis {
-        paragraph_style.set_ellipsis("…");
+    if let Some(ellipsis) = font_style.text_overflow.get_ellipsis() {
+        paragraph_style.set_ellipsis(ellipsis);
     }
 
     let mut paragraph_builder = ParagraphBuilder::new(&paragraph_style, font_collection);
@@ -69,11 +68,13 @@ pub fn create_paragraph(
     }
 
     let mut paragraph = paragraph_builder.build();
-    paragraph.layout(if font_style.max_lines == Some(1) {
-        f32::MAX
-    } else {
-        area_size.width + 1.0
-    });
+    paragraph.layout(
+        if font_style.max_lines == Some(1) && font_style.text_align == TextAlign::default() {
+            f32::MAX
+        } else {
+            area_size.width + 1.0
+        },
+    );
 
     paragraph
 }

crates/devtools/src/lib.rs

@@ -12,6 +12,7 @@ use freya_components::*;
 use freya_core::prelude::EventMessage;
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{
+    use_applied_theme,
     use_init_theme,
     use_platform,
     DARK_THEME,
@@ -116,15 +117,15 @@ impl PartialEq for DevToolsProps {
 
 #[allow(non_snake_case)]
 pub fn DevTools(props: DevToolsProps) -> Element {
-    let theme = use_init_theme(|| DARK_THEME);
+    use_init_theme(|| DARK_THEME);
     use_init_radio_station::<DevtoolsState, DevtoolsChannel>(|| DevtoolsState {
         hovered_node: props.hovered_node.clone(),
         devtools_receiver: props.devtools_receiver.clone(),
         devtools_tree: HashSet::default(),
     });
 
-    let theme = theme.read();
-    let color = &theme.body.color;
+    let theme = use_applied_theme!(None, body);
+    let color = &theme.color;
 
     rsx!(
         rect {