feat: Rename a11y attributes (#869)

marc2332 · web-flow · commit 392324aeb9ef · 2024-09-11T19:51:44.000+02:00
* feat: Rename a11y attributes

* chore: Fixes and clean up

* chore: clean up

* fixes

* fixes

* fix: fix parsing of a11y_focusable
diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
@@ -92,7 +92,7 @@ pub fn Button(
     let mut status = use_signal(ButtonStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let ButtonTheme {
         background,
@@ -175,14 +175,14 @@ pub fn Button(
             onmouseenter,
             onmouseleave,
             onkeydown,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
             padding: "{padding}",
             margin: "{margin}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "button",
+            a11y_role:"button",
             color: "{font_theme.color}",
             shadow: "{shadow}",
             border: "{border}",
diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -66,7 +66,7 @@ where
     let mut status = use_signal(DropdownItemStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let is_focused = focus.is_focused();
     let is_selected = *selected.read() == value;
 
@@ -115,8 +115,8 @@ where
         rect {
             width: "fill-min",
             color: "{color}",
-            focus_id,
-            role: "button",
+            a11y_id,
+            a11y_role:"button",
             background: "{background}",
             padding: "6 22 6 16",
             corner_radius: "6",
@@ -194,7 +194,7 @@ where
 
     let is_opened = *opened.read();
     let is_focused = focus.is_focused();
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     // Update the provided value if the passed value changes
     use_effect(use_reactive(&props.value, move |value| {
@@ -269,7 +269,7 @@ where
                 onclick,
                 onkeydown,
                 margin: "{margin}",
-                focus_id,
+                a11y_id,
                 background: "{button_background}",
                 color: "{font_theme.color}",
                 corner_radius: "8",
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
@@ -165,7 +165,7 @@ pub fn Input(
         _ => {}
     };
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let cursor_reference = editable.cursor_attr();
     let highlights = editable.highlights_attr(0);
 
@@ -211,9 +211,9 @@ pub fn Input(
             corner_radius: "{corner_radius}",
             margin: "{margin}",
             cursor_reference,
-            focus_id,
-            focusable: "true",
-            role: "textInput",
+            a11y_id,
+            a11y_focusable: "true",
+            a11y_role:"textInput",
             main_align: "center",
             paragraph {
                 margin: "8 12",
diff --git a/crates/components/src/menu.rs b/crates/components/src/menu.rs
@@ -148,7 +148,7 @@ pub fn MenuItem(
     let mut status = use_signal(MenuItemStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let click = &onclick;
 
     let MenuItemTheme {
@@ -197,12 +197,12 @@ pub fn MenuItem(
             onclick,
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "fill-min",
             padding: "6",
             margin: "2",
-            focusable: "true",
-            role: "button",
+            a11y_focusable: "true",
+            a11y_role:"button",
             color: "{font_theme.color}",
             corner_radius: "{corner_radius}",
             background: "{background}",
diff --git a/crates/components/src/network_image.rs b/crates/components/src/network_image.rs
@@ -70,7 +70,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
     let mut cached_assets = use_signal::<Vec<AssetConfiguration>>(Vec::new);
     let mut assets_tasks = use_signal::<Vec<Task>>(Vec::new);
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let NetworkImageTheme { width, height } = use_applied_theme!(&props.theme, network_image);
     let alt = props.alt.as_deref();
 
@@ -121,10 +121,10 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
         rsx!(image {
             height: "{height}",
             width: "{width}",
-            focus_id,
+            a11y_id,
             image_data,
-            role: "image",
-            alt
+            a11y_role: "image",
+            a11y_alt: alt
         })
     } else if *status.read() == ImageState::Loading {
         if let Some(loading_element) = &props.loading {
diff --git a/crates/components/src/scroll_views/scroll_bar.rs b/crates/components/src/scroll_views/scroll_bar.rs
@@ -56,7 +56,7 @@ pub fn ScrollBar(
     rsx!(
         rect {
             overflow: "clip",
-            role: "scrollBar",
+            a11y_role:"scrollBar",
             width: "{width}",
             height: "{height}",
             offset_x: "{offset_x}",
diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
@@ -363,11 +363,11 @@ pub fn ScrollView(
         .map(|f| f.0 == Axis::Y)
         .unwrap_or_default();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     rsx!(
         rect {
-            role: "scrollView",
+            a11y_role:"scrollView",
             overflow: "clip",
             direction: "horizontal",
             width,
@@ -376,7 +376,7 @@ pub fn ScrollView(
             onglobalmousemove: onmousemove,
             onkeydown,
             onkeyup,
-            focus_id,
+            a11y_id,
             rect {
                 direction: "vertical",
                 width: "{container_width}",
diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -437,11 +437,11 @@ pub fn VirtualScrollView<
     let offset_y_min = (-corrected_scrolled_y / item_size).floor() * item_size;
     let offset_y = -corrected_scrolled_y - offset_y_min;
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     rsx!(
         rect {
-            role: "scrollView",
+            a11y_role:"scrollView",
             overflow: "clip",
             direction: "horizontal",
             width: "{width}",
@@ -450,7 +450,7 @@ pub fn VirtualScrollView<
             onglobalmousemove: onmousemove,
             onkeydown,
             onkeyup,
-            focus_id,
+            a11y_id,
             rect {
                 direction: "vertical",
                 width: "{container_width}",
diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
@@ -99,7 +99,7 @@ pub fn Slider(
     let (node_reference, size) = use_node();
 
     let value = ensure_correct_slider_range(value);
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.peek() == SliderStatus::Hovering {
@@ -176,7 +176,7 @@ pub fn Slider(
             height: "20",
             onmousedown,
             onglobalclick: onclick,
-            focus_id,
+            a11y_id,
             onmouseenter,
             onglobalmousemove: onmousemove,
             onmouseleave,
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
@@ -98,7 +98,7 @@ pub fn Switch(props: SwitchProps) -> Element {
     let mut status = use_signal(SwitchStatus::default);
     let mut focus = use_focus();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.read() == SwitchStatus::Hovering {
@@ -171,7 +171,7 @@ pub fn Switch(props: SwitchProps) -> Element {
             onmouseleave,
             onkeydown,
             onclick,
-            focus_id,
+            a11y_id,
             offset_x: "{offset_x}",
             main_align: "center",
             rect {
diff --git a/crates/components/src/tabs.rs b/crates/components/src/tabs.rs
@@ -84,7 +84,7 @@ pub fn Tab(children: Element, theme: Option<TabThemeWith>) -> Element {
     let platform = use_platform();
     let is_active = use_activable_route();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let TabTheme {
         background,
@@ -127,12 +127,12 @@ pub fn Tab(children: Element, theme: Option<TabThemeWith>) -> Element {
         rect {
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "tab",
+            a11y_role:"tab",
             color: "{font_theme.color}",
             background: "{background}",
             text_align: "center",
@@ -203,7 +203,7 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
     let platform = use_platform();
     let is_active = use_activable_route();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let BottomTabTheme {
         background,
@@ -239,12 +239,12 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
         rect {
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "tab",
+            a11y_role:"tab",
             color: "{font_theme.color}",
             background: "{background}",
             text_align: "center",
diff --git a/crates/components/src/tile.rs b/crates/components/src/tile.rs
@@ -43,7 +43,7 @@ pub fn Tile(
     let platform = use_platform();
     let TileTheme { padding } = use_applied_theme!(&theme, tile);
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.read() == TileStatus::Hovering {
@@ -73,7 +73,7 @@ pub fn Tile(
             onclick,
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             direction: "horizontal",
             onclick: move |_| {
                 if let Some(onclick) = &onclick {
diff --git a/crates/core/src/accessibility/mod.rs b/crates/core/src/accessibility/mod.rs
@@ -36,7 +36,7 @@ impl NodeAccessibility for DioxusNode<'_> {
             Some(ACCESSIBILITY_ROOT_ID)
         } else {
             let node_accessibility = &*self.get::<AccessibilityNodeState>()?;
-            node_accessibility.accessibility_id
+            node_accessibility.a11y_id
         }
     }
 
diff --git a/crates/core/src/accessibility/tree.rs b/crates/core/src/accessibility/tree.rs
@@ -325,7 +325,7 @@ impl AccessibilityTree {
         // Set focusable action
         // This will cause assistive technology to offer the user an option
         // to focus the current element if it supports it.
-        if node_accessibility.focusable {
+        if node_accessibility.a11y_focusable {
             builder.add_action(Action::Focus);
         }
 
@@ -429,20 +429,20 @@ impl AccessibilityTree {
         }
 
         // Set text value
-        if let Some(alt) = &node_accessibility.alt {
+        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.name {
+        if let Some(name) = &node_accessibility.a11y_name {
             builder.set_name(name.to_owned());
         }
 
         // Set role
-        if let Some(role) = node_accessibility.role {
+        if let Some(role) = node_accessibility.a11y_role {
             builder.set_role(role);
         }
         // Set root role
diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs
diff --git a/crates/hooks/src/use_init_native_platform.rs b/crates/hooks/src/use_init_native_platform.rs
diff --git a/crates/hooks/tests/use_focus.rs b/crates/hooks/tests/use_focus.rs
diff --git a/crates/native-core/src/attributes.rs b/crates/native-core/src/attributes.rs
diff --git a/crates/state/src/accessibility.rs b/crates/state/src/accessibility.rs
diff --git a/examples/accessibility.rs b/examples/accessibility.rs
diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs
