feat: add attributes for most AccessKit properties (#882)

* feat: add attributes for most AccessKit properties

* fix: update components

* fix: tests

* fix `NodeBuilder` unwrap assumption

* fix: Proper support for keyboard navigation for Radio (#880)

* fix: Proper incremental redraws for elements with outer or center borders

* chore: torin changes

* feat: Proper support for keyboard navigation with Radio

* fix: Update tests

* chore: Update tests

* feat: Only focus focusable nodes

* chore: Update tests

* chore: Update tests

* feat: add attributes for most AccessKit properties

* fix: update components

* fix: tests

* revert components changes

* fix accessibility nodes not being added to tree

* feat: use inner text for `paragraph`/`label` names if none is provided

* fix accessibility tests

* fmt, lint

* reduce out-of-scope changes

* fmt

* refactor: make `a11y_role` attribute kebab case

* lint

* fmt again

* fix bad accessibility state merge

* use `Role::parse` rather than `serde_json`

* fix bad role in test

* fix role parsing test

* update or remove redundant roles from components

---------

Co-authored-by: Marc Espin <[email protected]>

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/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/tree.rs

@@ -185,7 +185,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));
@@ -337,7 +336,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();
@@ -352,6 +362,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.
@@ -458,28 +476,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()
     }
 }