feat: Uncomment the ARIA property

Cargo.toml

@@ -16,5 +16,5 @@ thaw_components = { version = "0.1.1", path = "./thaw_components" }
 thaw_macro = { version = "0.1.0", path = "./thaw_macro" }
 thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
 
-leptos = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
+leptos = { git = "https://github.com/leptos-rs/leptos", rev = "db02d3f5" }
-leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
+leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "db02d3f5" }

demo/Cargo.toml

@@ -9,7 +9,7 @@ edition = "2021"
 [dependencies]
 leptos = { workspace = true }
 leptos_meta = { workspace = true }
-leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
+leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "db02d3f5" }
 thaw = { path = "../thaw" }
 demo_markdown = { path = "../demo_markdown" }
 icondata = "0.3.0"

thaw/src/accordion/accordion_item.rs

@@ -43,7 +43,7 @@ pub fn AccordionItem(
             <div class="thaw-accordion-header">
                 <button
                     class="thaw-accordion-header__button"
-                    // aria_expanded=move || is_show_panel.get().to_string() #TODO
+                    aria-expanded=move || is_show_panel.get().to_string()
                     type="button"
                     on:click=on_click
                 >

thaw/src/auto_complete/auto_complete_option.rs

@@ -5,13 +5,13 @@ use leptos::prelude::*;
 pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
     let value = key.clone();
     let auto_complete = AutoCompleteInjection::use_();
-    // let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
+    let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
 
     view! {
         <div
             class="thaw-auto-complete-option"
             role="option"
-            // aria-selected=move || if is_selected.get() { "true" } else { "false" }
+            aria-selected=move || if is_selected.get() { "true" } else { "false" }
             on:click=move |_| auto_complete.select_value(value.clone())
         >
             {children()}

thaw/src/combobox/combobox.rs

@@ -107,7 +107,7 @@ pub fn Combobox(
             >
                 <input
                     type="text"
-                    // aria-expanded="true"
+                    aria-expanded="true"
                     role="combobox"
                     class="thaw-combobox__input"
                     prop:value=move || {
@@ -135,7 +135,7 @@ pub fn Combobox(
                     }
                 }
                 <span
-                    // aria-expanded="true"
+                    aria-expanded="true"
                     role="button"
                     aria-label="Open"
                     class="thaw-combobox__expand-icon"

thaw/src/combobox/combobox_option.rs

@@ -23,7 +23,7 @@ pub fn ComboboxOption(
     view! {
         <div
             role="option"
-            // aria_selected="true"
+            aria-selected="true"
             class=class_list![
                 "thaw-combobox-option",
                 ("thaw-combobox-option--selected", move || value.with_value(|value| combobox.is_selected(&value)))

thaw/src/dialog/dialog_surface.rs

@@ -19,7 +19,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
                 class="thaw-dialog-surface"
                 node_ref=surface_ref
                 role="dialog"
-                // aria-modal="true"
+                aria-modal="true"
                 style:display=move || display.get().map(|_| "none").unwrap_or_default()
             >
                 {children()}

thaw/src/divider/mod.rs

@@ -13,7 +13,7 @@ pub fn Divider(
     view! {
         <div
             class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
-            // aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
+            aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
             role="separator"
         >
             <OptionComp value=children let:children>

thaw/src/drawer/overlay_drawer.rs

@@ -85,7 +85,7 @@ pub fn OverlayDrawer(
                             }
                             node_ref=drawer_ref
                             role="dialog"
-                            // aria-modal="true"
+                            aria-modal="true"
                         >
                             {children()}
                         </div>

thaw/src/progress_bar/progress_bar.rs

@@ -22,9 +22,9 @@ pub fn ProgressBar(
                 move || format!("thaw-progress-bar--{}", color.get().as_str())
             ]
             role="progressbar"
-            // aria_valuemax=move || max.get()
+            aria_valuemax=move || max.get()
-            // aria-valuemin="0"
+            aria-valuemin="0"
-            // aria-valuenow=move || value.get()
+            aria-valuenow=move || value.get()
         >
             <div class="thaw-progress-bar__bar" style=style>
             </div>

thaw/src/progress_bar/progress_circle.rs

@@ -42,9 +42,9 @@ pub fn ProgressCircle(
         <div
             class=class_list!["thaw-progress-circle", class.map(| c | move || c.get())]
             role="progressbar"
-            // aria-valuemax="100"
+            aria-valuemax="100"
-            // aria-valuemin="0"
+            aria-valuemin="0"
-            // aria-valuenow=move || value.get()
+            aria-valuenow=move || value.get()
             style=("--thaw-size", move || size.get())
         >
 

thaw/src/spin_button/mod.rs

@@ -60,7 +60,7 @@ where
             <input
                 autocomplete="off"
                 role="spinbutton"
-                // aria-valuenow=move || value.get().to_string()
+                aria-valuenow=move || value.get().to_string()
                 type="text"
                 disabled=move || disabled.get()
                 value=initialization_value

thaw/src/spinner/mod.rs

@@ -42,14 +42,22 @@ pub fn Spinner(
     mount_style("spinner", include_str!("./spinner.css"));
     let id = StoredValue::new(uuid::Uuid::new_v4().to_string());
 
-    // let spinner_label = label.clone();
+    let spinner_label = label.clone();
-    // let labelledby = move || spinner_label.with(|_| true).map(|_| id.get_value());
+    let labelledby = move || {
+        spinner_label.with(|label| {
+            if label.is_some() {
+                Some(id.get_value())
+            } else {
+                None
+            }
+        })
+    };
 
     view! {
         <div
             class=class_list!["thaw-spinner", move || format!("thaw-spinner--{}", size.get().as_str()), class]
             role="progressbar"
-            // aria-labelledby=labelledby
+            aria-labelledby=labelledby
         >
             <span class="thaw-spinner__spinner">
                 <span class="thaw-spinner__spinner-tail"></span>

thaw/src/tab_list/tab.rs

@@ -65,7 +65,7 @@ pub fn Tab(
                 "thaw-tab", ("thaw-tab--selected", move || selected.get()), class
             ]
             role="tab"
-            // aria-selected=move || if selected.get() { "true" } else { "false" }
+            aria-selected=move || if selected.get() { "true" } else { "false" }
             node_ref=tab_ref
             on:click=on_select
         >