feat: Uncomment the ARIA property

This commit is contained in:
luoxiao 2024-07-11 20:44:19 +08:00
parent ca13969a01
commit 0839db8ec4
14 changed files with 31 additions and 23 deletions

View file

@ -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_meta = { 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 = "db02d3f5" }

View file

@ -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"

View file

@ -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
>

View file

@ -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()}

View file

@ -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"

View file

@ -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)))

View file

@ -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()}

View file

@ -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>

View file

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

View file

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

View file

@ -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-valuemin="0"
// aria-valuenow=move || value.get()
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow=move || value.get()
style=("--thaw-size", move || size.get())
>

View file

@ -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

View file

@ -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 labelledby = move || spinner_label.with(|_| true).map(|_| id.get_value());
let spinner_label = label.clone();
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>

View file

@ -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
>