Skip to content

Commit

Permalink
add(aria): adding aria labels for settings keybinds and others (#1827)
Browse files Browse the repository at this point in the history
  • Loading branch information
@luisecm
luisecm authored Feb 6, 2024
1 parent 31df9cc commit a74c56a
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 2 deletions.
3 changes: 3 additions & 0 deletions kit/src/elements/checkbox/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ pub struct Props<'a> {
is_checked: bool,
// returns true if the box is selected, false otherwise
on_click: EventHandler<'a, ()>,
aria_label: Option<String>,
}

#[allow(non_snake_case)]
pub fn Checkbox<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
let disabled_class = if cx.props.disabled { "disabled" } else { "" };
let checked_class = if cx.props.is_checked { "checked" } else { "" };
let aria_label = cx.props.aria_label.clone().unwrap_or_default();

let height = cx
.props
Expand All @@ -33,6 +35,7 @@ pub fn Checkbox<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {

cx.render(rsx!(
div {
aria_label: "{aria_label}",
class: "input-checkbox {checked_class} {disabled_class} ",
height: "{height}",
width: "{width}",
Expand Down
11 changes: 11 additions & 0 deletions ui/src/components/settings/sub_pages/about.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,46 +255,57 @@ pub fn AboutPage(cx: Scope) -> Element {
class: "flags-settings",
img {
src: "{image_path_flag_USA}",
aria_label: "usa-flag",
alt: "USA Flag",
},
img {
src: "{image_path_flag_MX}",
aria_label: "mx-flag",
alt: "Mexico Flag",
}
img {
src: "{image_path_flag_DE}",
aria_label: "de-flag",
alt: "Germany Flag",
}
img {
src: "{image_path_flag_PT}",
aria_label: "pt-flag",
alt: "Portugal Flag",
}
img {
src: "{image_path_flag_BR}",
aria_label: "br-flag",
alt: "Brazil Flag",
}
img {
src: "{image_path_flag_IT}",
aria_label: "it-flag",
alt: "Italy Flag",
}
img {
src: "{image_path_flag_UR}",
aria_label: "ur-flag",
alt: "Ukraine Flag",
}
img {
src: "{image_path_flag_BL}",
aria_label: "bl-flag",
alt: "Belarus Flag",
}
img {
src: "{image_path_flag_JP}",
aria_label: "jp-flag",
alt: "Japan Flag",
}
img {
src: "{image_path_flag_AU}",
aria_label: "au-flag",
alt: "Australia Flag",
}
img {
src: "{image_path_flag_IN}",
aria_label: "in-flag",
alt: "Indonesia Flag",
}
}
Expand Down
21 changes: 19 additions & 2 deletions ui/src/components/settings/sub_pages/keybinds.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,17 @@ pub fn Keybind(cx: Scope<KeybindProps>) -> Element {
let keys_rendered = cx.props.keys.iter().enumerate().map(|(idx, key)| {
rsx!(div {
class: "keybind-key",
aria_label: "keybind-key",
div {
aria_label: "keybind-key-inner",
class: "keybind-key-inner",
"{key.to_uppercase()}",
}
},
if idx != cx.props.keys.len() - 1 {
rsx!(div {
class: "keybind-separator",
aria_label: "keybind-separator",
IconElement {
icon: Icon::Plus
}
Expand All @@ -70,6 +73,7 @@ pub struct KeybindSectionProps {
pub bindings: Vec<(GlobalShortcut, Shortcut)>,
pub shortcut: GlobalShortcut,
pub section_label: String,
pub aria_label: Option<String>,
}

pub fn check_for_conflicts(shortcut: Shortcut, shortcuts: Vec<(GlobalShortcut, Shortcut)>) -> bool {
Expand All @@ -92,6 +96,7 @@ pub fn KeybindSection(cx: Scope<KeybindSectionProps>) -> Element {
let system_shortcut = Shortcut::get_system_shortcut(state, cx.props.shortcut.clone());
let new_keybind_has_one_key = use_ref(cx, || false);
let new_keybind_has_at_least_one_modifier = use_ref(cx, || false);
let aria_label = cx.props.aria_label.clone().unwrap_or_default();

if update_keybind.read().is_some() && !is_recording.get() {
let (keys, modifiers) = update_keybind.read().clone().unwrap();
Expand Down Expand Up @@ -163,6 +168,7 @@ pub fn KeybindSection(cx: Scope<KeybindSectionProps>) -> Element {
div {
id: format_args!("{}", keybind_section_id),
class: "keybind-section",
aria_label: "{aria_label}",
(**is_recording).then(|| rsx!(div {
class: "keybind-section-mask",
onclick: move |_| {
Expand All @@ -171,11 +177,13 @@ pub fn KeybindSection(cx: Scope<KeybindSectionProps>) -> Element {
}
})),
div {
aria_label: "keybind-section-label",
class: "keybind-section-label",
"{cx.props.section_label}"
},
div {
class: "{keybind_class}",
aria_label: "keybind-section-keys",
contenteditable: true,
onfocus: move |_| {
is_recording.set(true);
Expand Down Expand Up @@ -234,7 +242,7 @@ pub fn KeybindSection(cx: Scope<KeybindSectionProps>) -> Element {
}
},
Button {
aria_label: "reset-keybinds-button".into(),
aria_label: "reset-single-keybind-button".into(),
icon: Icon::ArrowUturnDown,
onpress: move |_| {
let (keys, modifiers) = get_keycode_and_modifier_from_a_shortcut(cx.props.shortcut.clone());
Expand Down Expand Up @@ -276,10 +284,12 @@ pub fn KeybindSettings(cx: Scope) -> Element {
aria_label: "settings-keybinds",
div {
class: "settings-keybinds-info",
aria_label: "settings-keybind-info",
IconElement {
icon: Icon::Keybind
},
p {
aria_label: "settings-keybind-info-text",
get_local_text("settings-keybinds.info")
}
},
Expand All @@ -288,7 +298,7 @@ pub fn KeybindSettings(cx: Scope) -> Element {
section_label: get_local_text("settings-keybinds.reset-keybinds"),
section_description: get_local_text("settings-keybinds.reset-keybinds-description"),
Button {
aria_label: "reset-keybinds-button".into(),
aria_label: "revert-keybinds-button".into(),
icon: Icon::ArrowUturnDown,
onpress: move |_| {
state.write().mutate(Action::ResetKeybinds);
Expand All @@ -298,42 +308,49 @@ pub fn KeybindSettings(cx: Scope) -> Element {
},
},
KeybindSection {
aria_label: "increase-font-size-section".into(),
id: format!("{:?}", GlobalShortcut::IncreaseFontSize),
section_label: get_local_text("settings-keybinds.increase-font-size"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::IncreaseFontSize
}
KeybindSection {
aria_label: "decrease-font-size-section".into(),
id: format!("{:?}", GlobalShortcut::DecreaseFontSize),
section_label: get_local_text("settings-keybinds.decrease-font-size"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::DecreaseFontSize
}
KeybindSection {
aria_label: "toggle-mute-section".into(),
id: format!("{:?}", GlobalShortcut::ToggleMute),
section_label: get_local_text("settings-keybinds.toggle-mute"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::ToggleMute
}
KeybindSection {
aria_label: "toggle-deafen-section".into(),
id: format!("{:?}", GlobalShortcut::ToggleDeafen),
section_label: get_local_text("settings-keybinds.toggle-deafen"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::ToggleDeafen
}
KeybindSection {
aria_label: "open-close-dev-tools-section".into(),
id: format!("{:?}", GlobalShortcut::OpenCloseDevTools),
section_label: get_local_text("settings-keybinds.open-close-dev-tools"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::OpenCloseDevTools
}
KeybindSection {
aria_label: "toggle-devmode-section".into(),
id: format!("{:?}", GlobalShortcut::ToggleDevmode),
section_label: get_local_text("settings-keybinds.toggle-devmode"),
bindings: bindings.clone(),
shortcut: GlobalShortcut::ToggleDevmode
}
KeybindSection {
aria_label: "hide-focus-uplink-section".into(),
id: format!("{:?}", GlobalShortcut::SetAppVisible),
section_label: get_local_text("settings-keybinds.hide-focus-uplink"),
bindings: bindings.clone(),
Expand Down
3 changes: 3 additions & 0 deletions ui/src/components/settings/sub_pages/profile/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,7 +643,9 @@ pub fn ProfileSettings(cx: Scope) -> Element {
)
},
SettingSectionSimple {
aria_label: "store-recovery-seed-on-account-section".into(),
Checkbox {
aria_label: "store-recovery-seed-on-account-checkbox".into(),
disabled: false,
is_checked: *store_phrase.get(),
height: "15px".into(),
Expand All @@ -653,6 +655,7 @@ pub fn ProfileSettings(cx: Scope) -> Element {
},
},
label {
aria_label: "store-recovery-seed-on-account-label",
get_local_text("settings-profile.store-on-account")
}
},
Expand Down

0 comments on commit a74c56a

Please sign in to comment.