Improve accessibility and performance

This commit is contained in:
Stéphane Goetz 2020-04-24 23:41:18 +02:00
parent 710150c550
commit 68bf50c595
20 changed files with 72 additions and 28 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 100 KiB

View File

@ -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"
},

View File

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

View File

@ -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 */
}

View File

@ -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 => {

View File

@ -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 } ?>

View File

@ -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 } ?>

View File

@ -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 } ?>

View File

@ -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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long