mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
feat: Uncomment the ARIA property
This commit is contained in:
parent
ca13969a01
commit
0839db8ec4
14 changed files with 31 additions and 23 deletions
|
@ -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" }
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)))
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -85,7 +85,7 @@ pub fn OverlayDrawer(
|
|||
}
|
||||
node_ref=drawer_ref
|
||||
role="dialog"
|
||||
// aria-modal="true"
|
||||
aria-modal="true"
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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())
|
||||
>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
Loading…
Add table
Reference in a new issue