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>
<meta charset="UTF-8">
<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>
<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 rel="copy-dir" href="public">
<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;
fn set_focus(index: usize) {
let prefix = match index {
0 => "",
_ => "-"
};
if let Some(w) = web_sys::window() {
if let Some(d) = w.document() {
if let Some(n) = d
.query_selector(&format!("[tabindex='{index}']"))
.query_selector(&format!("[tabindex='{prefix}{index}']"))
.ok()
.flatten()
{
@ -478,11 +482,24 @@ pub fn Home() -> Html {
})
};
let prefix = match index {
0 => String::new(),
_ => "-".to_owned(),
};
html! {
<input
aria-label={format!("letter-{}", match index {
0 => "one",
1 => "two",
2 => "three",
3 => "four",
4 => "five",
_ => "",
})}
onkeyup={on_enter.clone()}
oninput={on_input.clone()}
tabindex={index.to_string()}
tabindex={ format!("{prefix}{index}")}
ref={node_ref.clone()}
value={input_values[index].clone()}
onfocus={on_focus.clone()}
@ -519,7 +536,8 @@ pub fn Home() -> Html {
}
>
<button
tabindex={(*length + 1).to_string()}
aria-label={if *game_over { "Play Again"} else { "Submit"}}
tabindex={format!("-{}",*length + 1)}
class={
classes!(
"w-24",