Improved mobile accessibility.

vaijira · Dec 21, 2024 · 4646c39 · 4646c39
1 parent ff6765a
commit 4646c39
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -26,7 +26,7 @@
     <header><h1>Generaci&oacute;n del modelo 720 a partir de los informes de Interactive brokers y Degiro.</h1></header>
     <main class="container">
       <div class="item">
-        <div id="burocratinApp" ><script src="js/index.js"></script></div>
+        <div id="burocratinApp" ><script src="js/index.js"></script><svg alt="loading" height="800px" width="600px"></svg></div>
       </div>
       <div class="item">
         <div class="faq">

diff --git a/src/lib.rs b/src/lib.rs
@@ -32,7 +32,11 @@ pub async fn main_js() -> Result<(), JsValue> {
 
     let app = App::new();
 
-    dominator::append_dom(&dominator::get_id("burocratinApp"), App::render(app));
+    dominator::replace_dom(
+        &dominator::get_id("burocratinApp"),
+        &dominator::get_id("burocratinApp").last_child().unwrap(),
+        App::render(app),
+    );
 
     Ok(())
 }
diff --git a/src/personal_info.rs b/src/personal_info.rs
@@ -30,6 +30,7 @@ impl PersonalInfoViewer {
                         .attr("type", "text")
                         .attr("autocomplete", "given-name")
                         .attr("placeholder", "Nombre")
+                        .style("height", "24px")
                         .with_node!(element => {
                             .event(clone!(this => move |_: events::Input| {
                                 this.personal_info.lock_mut().name = element.value().to_uppercase();
@@ -47,6 +48,7 @@ impl PersonalInfoViewer {
                         .attr("type", "text")
                         .attr("autocomplete", "family-name")
                         .attr("placeholder", "Apellidos")
+                        .style("height", "24px")
                         .with_node!(element => {
                             .event(clone!(this => move |_: events::Input| {
                                 this.personal_info.lock_mut().surname = element.value().to_uppercase();
@@ -64,6 +66,7 @@ impl PersonalInfoViewer {
                         .attr("type", "text")
                         .attr("max-length", "9")
                         .attr("placeholder", "DNI con letra")
+                        .style("height", "24px")
                         .with_node!(element => {
                             .event(clone!(this => move |_: events::Input| {
                                 this.personal_info.lock_mut().nif = element.value().to_uppercase();
@@ -82,6 +85,7 @@ impl PersonalInfoViewer {
                         .attr("maxlength", "4")
                         .attr("placeholder", "Año")
                         .attr("value", &DEFAULT_YEAR.to_string())
+                        .style("height", "24px")
                         .with_node!(element => {
                             .event(clone!(this => move |_: events::Input| {
                                 this.personal_info.lock_mut().year = element.value().parse::<usize>().unwrap_or(DEFAULT_YEAR);
@@ -100,6 +104,7 @@ impl PersonalInfoViewer {
                         .attr("autocomplete", "tel")
                         .attr("maxlength", "9")
                         .attr("placeholder", "Teléfono")
+                        .style("height", "24px")
                         .with_node!(element => {
                             .event(clone!(this => move |_: events::Input| {
                                 this.personal_info.lock_mut().phone = element.value().to_uppercase();

diff --git a/src/table.rs b/src/table.rs
@@ -126,6 +126,7 @@ impl Table {
             .map(|header_cell| {
                 html!("th", {
                   .attr("scope", "col")
+                  .attr("role", "columnheader")
                   .style("vertical-align", "bottom")
                   .style("font-weight", "bold")
                   .style("background-color", "#ddd")
@@ -143,6 +144,7 @@ impl Table {
               .child(
                 html!("th", {
                   .attr("scope", "col")
+                  .attr("role", "columnheader")
                   .style("vertical-align", "bottom")
                   .style("font-weight", "bold")
                   .style("background-color", "#ddd")
@@ -153,6 +155,7 @@ impl Table {
               .child(
                 html!("th", {
                   .attr("scope", "col")
+                  .attr("role", "columnheader")
                   .style("vertical-align", "bottom")
                   .style("font-weight", "bold")
                   .style("background-color", "#ddd")