Skip to content

Commit

Permalink
UPDATE: accessibility fixes (from WAVE tool)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fileformat
fileformat committed May 6, 2024
1 parent ffe7535 commit 4271bbd
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 61 deletions.
6 changes: 6 additions & 0 deletions www/_includes/meta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,12 @@
}
.copy2tip { display: none; }

a {
/* WAVE doesn't like bootstrap default #007bff */
color: #003bbf;
}


</style>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/popper.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion www/_includes/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<li class="nav-item"><a class="nav-link" href="/support/index.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/VectorLogoZone/vlz-contrib#contributing-to-vectorlogozone-">Contribute</a></li>
<li class="nav-item"><a class="nav-link" href="/report/index.html">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="/index.html"><svg style="width: 1em; height: 1em; vertical-align:-.125em;" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></a></li>
<li class="nav-item"><a class="nav-link" href="/index.html" title="Search"><svg alt="search" style="width: 1em; height: 1em; vertical-align:-.125em;" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg><span class="d-none">Search</span></span></a></li>
</ul>
</div><!--/.navbar-collapse -->
</nav>
120 changes: 60 additions & 60 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,45 @@
- /search.html
---
<div class="jumbotron jumbotron-fluid bg-transparent pb-0 pt-2">
<div class="container px-0">
<h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img alt="logo" src="/images/about/vlzlogo-grey.svg" style="max-width: 100%;object-fit: contain;"/></a></h1>
<p class="lead d-flex justify-content-center" style="font-size:1.75rem;">3,000+ gorgeous SVG logos, perfect for your README or credits page</p>
</div>
<div class="container px-0">
<h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img alt="VectorLogoZone logo" src="/images/about/vlzlogo-grey.svg" style="max-width: 100%;object-fit: contain;"/></a></h1>
<p class="lead d-flex justify-content-center" style="font-size:1.75rem;">3,000+ gorgeous SVG logos, perfect for your README or credits page</p>
</div>
</div>

<form action="get" class="form-inline justify-content-center" id="site_search" style="display:none;">
<div class="form-row align-items-center" style="padding-bottom:20px;">
<div class="col-auto">
<img alt="Loading..." src="/images/spinner.svg" style="height:64px;width:64px;" id="wait"/>
<label class="sr-only" for="q">Search query</label>
<div class="input-group">
<input autocomplete="off" autofocus="autofocus" class="form-control" id="q" name="q" placeholder="Search terms" type="text"/>
<div class="input-group-append">
<button type="submit" class="btn" style="background-color:#1d8286;color:white;font-weight:bold;">Search</button>
</div>
</div>
</div>
</div>
<div class="form-row align-items-center" style="padding-bottom:20px;">
<div class="col-auto">
<img alt="Loading..." src="/images/spinner.svg" style="height:64px;width:64px;" id="wait"/>
<label class="sr-only" for="q">Search query</label>
<div class="input-group">
<input autocomplete="off" autofocus="autofocus" class="form-control" id="q" name="q" placeholder="Search terms" type="text"/>
<div class="input-group-append">
<button type="submit" class="btn" style="background-color:#1d8286;color:white;font-weight:bold;">Search</button>
</div>
</div>
</div>
</div>
</form>

<div class="row clearfix">
<div class="logo-container" id="search_results"></div>
</div>

<div class="row clearfix">
<div class="col">
<p id="pending-tip" class="alert alert-primary" style="display:none;">The following logos are on the &quot;To Do&quot; list and should be ready shortly.</p>
<ul id="pending"></ul>
</div>
<div class="col">
<p id="pending-tip" class="alert alert-primary" style="display:none;">The following logos are on the &quot;To Do&quot; list and should be ready shortly.</p>
<ul id="pending"></ul>
</div>
</div>
{%- comment %}NOTE: this is random at *build time*, so a given deploy will always have the same set of logos (which is the desired result) {% endcomment %}
{%- assign sorted_pages = site.pages | where_exp:"item","item.logohandle" | sort:'sort' %}
{%- assign all = "" | split: '' %}
{%- for logopage in sorted_pages %}
{%- capture logofile %}{{ logopage.logohandle }}{{ '-ar21.svg' }}{% endcapture -%}
{%- capture logofile %}{{ logopage.logohandle }}{{ '-ar21.svg' }}{% endcapture -%}
{%- if logopage.noindex %}{% else %}
{%- if logopage.images contains logofile %}
{%- assign all = all | push: logopage.logohandle %}
{%- assign all = all | push: logopage.logohandle %}
{%- endif %}
{%- endif %}
{%- endfor %}
Expand Down Expand Up @@ -76,16 +76,16 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
window.idx.add($.extend({ "id": index }, value));
});
console.log("data loaded");
$("#wait").hide();
$("#site_search").show();
show_default();
$("#wait").hide();
$("#site_search").show();
show_default();
});

var doSearch = function(query)
{
if (!query || query.length == 0)
{
$("#search_results").empty();
$("#search_results").empty();
$("#pending").empty();
$("#pending-tip").css('display', 'none');
show_default();
Expand All @@ -102,12 +102,12 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
var previousQuery = getParameterByName("q");
var query = $("#q").val();
if (query && previousQuery && query.length > 0 && previousQuery.length > 0 && (query.startsWith(previousQuery) || previousQuery.startsWith(query))) {
history.replaceState({ "q": query}, "", "?q=" + query);
}
else {
history.pushState({"q": query}, "", "?q=" + query);
}
document.title = "Search logos for '" + query + "'";
history.replaceState({ "q": query}, "", "?q=" + query);
}
else {
history.pushState({"q": query}, "", "?q=" + query);
}
document.title = "Search logos for '" + query + "'";
doSearch(query);
});

Expand Down Expand Up @@ -143,9 +143,9 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function htmlEncode(value){
return $("<div>").text(value).html();
}
function htmlEncode(value){
return $("<div>").text(value).html();
}

var query = getParameterByName("q");
if (query && query.length)
Expand All @@ -160,9 +160,9 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
function display_search_results(query, results) {
var $search_results = $("#search_results");
var $pending = $("#pending");
$search_results.empty(); // Clear any old results
$search_results.empty(); // Clear any old results
$pending.empty();
$("#pending-tip").css("display",'none');
$("#pending-tip").css("display",'none');

// Wait for data to load
window.data.then(function(loaded_data) {
Expand All @@ -180,26 +180,26 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
if (results.length)
{

if (results.length > 50) {
results.length = 50;
}
if (results.length > 50) {
results.length = 50;
}

// Iterate over the results
results.forEach(function(result) {
var item = loaded_data[result.ref];

if (item.haslogo) {
// Build a snippet of HTML for this result
var appendString = '<a href="/logos/' + result.ref + '/index.html"><img class="ar21" title="' + item.title + '" src="/logos/' + result.ref + '/' + result.ref + '-ar21.svg" /></a></li>';

// Add it to the results
$search_results.append(appendString);
}
else {
$pending.append($("<li>").append($("<a>").text(item.title).attr("href", "/logos/" + result.ref + "/index.html")));
}
// Build a snippet of HTML for this result
var appendString = '<a href="/logos/' + result.ref + '/index.html" title="' + htmlEncode(item.title) + '"><img class="ar21" alt="' + htmlEncode(item.title) + '" src="/logos/' + result.ref + '/' + result.ref + '-ar21.svg" /></a></li>';

// Add it to the results
$search_results.append(appendString);
}
else {
$pending.append($("<li>").append($("<a>").text(item.title).attr("href", "/logos/" + result.ref + "/index.html")));
}
});
$("#pending-tip").css("display", $pending.children().length > 0 ? "block" : "none");
$("#pending-tip").css("display", $pending.children().length > 0 ? "block" : "none");
}
else
{
Expand All @@ -209,16 +209,16 @@ <h1 class="display-4 d-flex justify-content-center"><a href="/about.html"><img a
}

function show_default() {
console.log("showing defaults");
var $search_results = $("#search_results");
for (var loop = 0; loop < default_logos.length; loop++) {
var logohandle = default_logos[loop];
var appendString = '<a href="/logos/' + logohandle + '/index.html"><img class="ar21" title="' + logohandle + '" src="/logos/' + logohandle + '/' + logohandle + '-ar21.svg" /></a></li>';

// Add it to the results
$search_results.append(appendString);
}
}
console.log("showing defaults");
var $search_results = $("#search_results");
for (var loop = 0; loop < default_logos.length; loop++) {
var logohandle = default_logos[loop];
var appendString = '<a href="/logos/' + logohandle + '/index.html"><img class="ar21" title="' + logohandle + '" src="/logos/' + logohandle + '/' + logohandle + '-ar21.svg" /></a></li>';

// Add it to the results
$search_results.append(appendString);
}
}
});
/*]]>*/
</script>

0 comments on commit 4271bbd

Please sign in to comment.