Improve accessibility and performance

docs/config.json

@@ -24,9 +24,10 @@
         "google_analytics": false,
         "plausible_domain": false,
         "links": {
-            "Download": "https://github.com/dauxio/daux.io/archive/master.zip",
-            "GitHub Repo": "https://github.com/dauxio/daux.io",
-            "Help/Support/Bugs": "https://github.com/dauxio/daux.io/issues"
+            "GitHub Repository": "https://github.com/dauxio/daux.io",
+            "Help/Support/Bugs": "https://github.com/dauxio/daux.io/issues",
+            "Packagist": "https://packagist.org/packages/daux/daux.io",
+            "Docker Images": "https://hub.docker.com/r/daux/daux.io"
         },
         "powered_by": "Powered by Daux.io"
     },

src/css/theme_daux/_components.scss

@@ -310,6 +310,7 @@ Components
         top: 9px;
         width: 16px;
         height: 16px;
+        cursor: pointer;
     }
 }
 

src/css/theme_daux/_structure.scss

@@ -148,3 +148,13 @@ body {
     // 860 == screen-width of 1200 - sidebar - margin
     max-width: 860px;
 }
+
+.u-visuallyHidden {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap; /* added line */
+}

src/js/search/index.js

@@ -23,6 +23,7 @@ class SearchEngine {
     constructor(options) {
         this.settings = {
             field: document.getElementById("search_input"),
+            form: document.getElementById("search_form"),
             show: 10,
             showURL: true,
             showTitleCount: true,
@@ -96,6 +97,13 @@ class SearchEngine {
                 });
             }
         });
+
+        this.settings.form.addEventListener("submit", event => {
+            event.preventDefault();
+            this.loadData().then(() => {
+                this.displaySearch();
+            });
+        });
     }
 
     keyUpHandler = e => {

templates/home.php

@@ -19,10 +19,11 @@
 
     <div class="HomepageButtons">
         <div class="Container">
-            <?php
-            if ($config->getHTML()->hasRepository()) {
-                echo '<a href="https://github.com/' . $config->getHTML()->getRepository() . '" class="Button Button--secondary Button--hero">' . $this->translate("View_on_github") . '</a>';
-            }
+            <?php if ($config->getHTML()->hasRepository()) { ?>
+               <a href="https://github.com/<?= $config->getHTML()->getRepository(); ?>" class="Button Button--secondary Button--hero" rel="noopener noreferrer">
+                   <?= $this->translate("View_on_github") ?>
+               </a>
+            <?php }
             $view_doc = $this->translate("View_documentation");
             foreach ($page['entry_page'] as $key => $node) {
                 echo '<a href="' . $node . '" class="Button Button--primary Button--hero">' . str_replace("__VIEW_DOCUMENTATION__", $view_doc, $key) . '</a>';
@@ -52,9 +53,9 @@
         <div class="Container--inner">
             <?php if ($config->getHTML()->hasLinks()) { ?>
                 <ul class="HomepageFooter__links">
-                    <?php foreach ($config->getHTML()->getLinks() as $name => $url) {
-                echo '<li><a href="' . $url . '" target="_blank">' . $name . '</a></li>';
-            } ?>
+                    <?php foreach ($config->getHTML()->getLinks() as $name => $url) { ?>
+                        <li><a href="<?= $url; ?>" target="_blank" rel="noopener noreferrer"><?= $name ?></a></li>
+                    <?php } ?>
                 </ul>
             <?php } ?>
 

templates/layout/05_page.php

@@ -27,7 +27,7 @@
                 <?php if ($config->getHTML()->hasLinks()) { ?>
                     <hr/>
                     <?php foreach ($config->getHTML()->getLinks() as $name => $url) { ?>
-                        <a href="<?= $url ?>" target="_blank"><?= $name ?></a>
+                        <a href="<?= $url ?>" target="_blank"  rel="noopener noreferrer"><?= $name ?></a>
                         <br />
                     <?php } ?>
                 <?php } ?>

templates/partials/navbar_content.php

@@ -6,11 +6,34 @@ if (!isset($config)) {
 <a class="Brand" href="<?= $config->getBasePage() . $config->getIndex()->getUri(); ?>"><?= $config->getTitle(); ?></a>
 
 <?php if ($config->getHTML()->hasSearch()) { ?>
-    <div class="Search">
-        <svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
-            <path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/>
-        </svg>
-        <input type="search" id="search_input" class="Search__field" placeholder="<?=$this->translate("Search_placeholder") ?>" autocomplete="on"
-               results=25 autosave=text_search>
+    <form role='search' action="/" method="get" class="Search" id="search_form">
+        <label for="search_input">
+            <span class='u-visuallyHidden'>Search</span>
+        </label>
+
+        <input
+            type="search"
+            id="search_input"
+            class="Search__field"
+            placeholder="<?=$this->translate("Search_placeholder") ?>"
+            aria-label="<?=$this->translate("Search_placeholder") ?>"
+            autocomplete="on"
+            results=25
+            autosave=text_search
+        >
+        <label>
+            <input type="submit" class='u-visuallyHidden' />
+            <span class='u-visuallyHidden'><?=$this->translate("Search_placeholder") ?></span>
+            <svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
+                <path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/>
+            </svg>
+        </label>
+    </form>
+
+
+
+    <div  role="search">
+
+
     </div>
 <?php } ?>

templates/partials/twitter_buttons.php

@@ -4,7 +4,7 @@ if (!isset($config)) {
 }
 ?>
 <?php foreach ($config->getHTML()->getTwitterHandles() as $handle) { ?>
-    <a class="Twitter__button" target="_blank" title="Follow @<?= $handle; ?> on Twitter" href="https://twitter.com/intent/follow?screen_name=<?= $handle; ?>">
+    <a class="Twitter__button" target="_blank" title="Follow @<?= $handle; ?> on Twitter" href="https://twitter.com/intent/follow?screen_name=<?= $handle; ?>" rel="noopener noreferrer">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path fill="none" d="M0 0h72v72H0z"/><path class="icon" fill="#fff" d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"/></svg>
         <span class="Twitter__button__label">Follow @<?= $handle; ?></span>
     </a>