Enhancements for Better Accessibility and Code Refactoring ⚙

pagefind_ui/default/svelte/result.svelte

@@ -31,6 +31,7 @@
                         class="pagefind-ui__result-image"
                         src={data.meta?.image}
                         alt={data.meta?.image_alt || data.meta?.title}
+                        decoding="async"
                     />
                 {/if}
             </div>

pagefind_ui/default/svelte/result_with_subs.svelte

@@ -53,6 +53,7 @@
             class="pagefind-ui__result-image"
             src={data.meta?.image}
             alt={data.meta?.image_alt || data.meta?.title}
+            decoding="async"
           />
         {/if}
       </div>

pagefind_ui/default/svelte/ui.svelte

@@ -186,8 +186,7 @@
         }
     };
 
-    const showMore = (e) => {
-        e?.preventDefault();
+    const showMore = () => {
         show += 5;
     };
 </script>
@@ -198,23 +197,20 @@
         role="search"
         aria-label={translate("search_label", automatic_translations, translations)}
         action="javascript:void(0);"
-        on:submit={(e) => e.preventDefault()}
+        on:submit|preventDefault ={() => {}}
     >
         <input
             class="pagefind-ui__search-input"
             on:focus={init}
-            on:keydown={(e) => {
+            on:keydown|preventDefault ={(e) => {
                 if (e.key === "Escape") {
                     val = "";
                     input_el.blur();
                 }
-                if (e.key === "Enter") {
-                    e.preventDefault();
-                }
             }}
             bind:value={val}
             bind:this={input_el}
-            type="text"
+            type="search"
             placeholder={translate("placeholder", automatic_translations, translations)}
             autocapitalize="none"
             enterkeyhint="search"
@@ -301,7 +297,7 @@
                             <button
                                 type="button"
                                 class="pagefind-ui__button"
-                                on:click={showMore}
+                                on:click|preventDefault={showMore}
                                 >{translate("load_more", automatic_translations, translations)}</button
                             >
                         {/if}

pagefind_ui/modular/components/input.js

@@ -91,7 +91,8 @@ export class Input {
                 .class("pagefind-modular-input")
                 .attrs({
                     autocapitalize: "none",
-                    enterkeyhint: "search"
+                    enterkeyhint: "search",
+                    type: "search"
                 })
                 .addTo(wrapper);
 

pagefind_ui/modular/components/resultList.js

@@ -35,7 +35,8 @@ const resultTemplate = (result) => {
     if (result?.meta?.image) {
         new El("img").class("pagefind-modular-list-image").attrs({
             src: result.meta.image,
-            alt: result.meta.image_alt || result.meta.title
+            alt: result.meta.image_alt || result.meta.title,
+            decoding: "async"
         }).addTo(thumb);
     }