itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): improves accessibility and seo

Browse Source
This commit is contained in:
itsscb 2024-09-03 09:21:07 +02:00
parent 49a8505a9f
commit 3409f17ff2
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -4,8 +4,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Author: itsscb, Description: Guess a random word with five letters">
<title>wordl</title> <title>wordl</title>
<link data-trunk href="./public/styles.css" rel="css"> <link data-trunk href="./public/styles.css" rel="css">
<link data-trunk rel="copy-file" href="public/robots.txt" data-target-path="/" />
<!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> --> <!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> -->
<link data-trunk rel="copy-dir" href="public"> <link data-trunk rel="copy-dir" href="public">
<link rel="manifest" href="public/manifest.json" /> <link rel="manifest" href="public/manifest.json" />

1
frontend/public/robots.txt Normal file
View File

@ -0,0 +1 @@
User-agent: *

24
frontend/src/pages/home.rs
View File

@ -15,10 +15,14 @@ static WORDS_URI: &str = "https://wordl.shuttleapp.rs/public/wordlist.json";
static MAX_TRIES: usize = 5; static MAX_TRIES: usize = 5;
fn set_focus(index: usize) { fn set_focus(index: usize) {
let prefix = match index {
0 => "",
_ => "-"
};
if let Some(w) = web_sys::window() { if let Some(w) = web_sys::window() {
if let Some(d) = w.document() { if let Some(d) = w.document() {
if let Some(n) = d if let Some(n) = d
.query_selector(&format!("[tabindex='{index}']")) .query_selector(&format!("[tabindex='{prefix}{index}']"))
.ok() .ok()
.flatten() .flatten()
{ {
@ -478,11 +482,24 @@ pub fn Home() -> Html {
}) })
}; };
let prefix = match index {
0 => String::new(),
_ => "-".to_owned(),
};
html! { html! {
<input <input
aria-label={format!("letter-{}", match index {
0 => "one",
1 => "two",
2 => "three",
3 => "four",
4 => "five",
_ => "",
})}
onkeyup={on_enter.clone()} onkeyup={on_enter.clone()}
oninput={on_input.clone()} oninput={on_input.clone()}
tabindex={index.to_string()} tabindex={ format!("{prefix}{index}")}
ref={node_ref.clone()} ref={node_ref.clone()}
value={input_values[index].clone()} value={input_values[index].clone()}
onfocus={on_focus.clone()} onfocus={on_focus.clone()}
@ -519,7 +536,8 @@ pub fn Home() -> Html {
} }
> >
<button <button
tabindex={(*length + 1).to_string()} aria-label={if *game_over { "Play Again"} else { "Submit"}}
tabindex={format!("-{}",*length + 1)}
class={ class={
classes!( classes!(
"w-24", "w-24",