54afa3ba91
* Fix a11y issues flagged by axe on homepage This commit brings the number of violations found on homepage (local, not prod) down from ~100 to ~10. It should have no serious impact on the visual layout or design of the page. * Change aria-labels to be consistent
103 lines
4.5 KiB
Text
103 lines
4.5 KiB
Text
<div class="navigation-progress" id="navigation-progress">
|
|
</div>
|
|
<header class="top-bar" id="top-bar" role="banner">
|
|
<a href="#articles-list" class="skip-content-link">Skip to content</a>
|
|
<div class="top-bar__container">
|
|
<a href="/" class="top-bar--logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
|
|
|
|
<div id="pwa-nav-buttons" class="pwa-nav-buttons">
|
|
<button type="button" id="app-back-button">
|
|
<%= inline_svg_tag("keyboard-left-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Back") %>
|
|
</button>
|
|
<button type="button" id="app-forward-button">
|
|
<%= inline_svg_tag("keyboard-right-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Forward") %>
|
|
</button>
|
|
<button type="button" id="app-refresh-button">
|
|
<%= inline_svg_tag("refresh-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Refresh") %>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="top-bar--search" id="top-bar--search">
|
|
<form acceptCharset="UTF-8" method="get" action="/search">
|
|
<input class="top-bar--search-input crayons-textfield" type="text" name="q" id="nav-search" placeholder="Search..." autoComplete="off" />
|
|
</form>
|
|
</div>
|
|
|
|
<div class="top-bar__links">
|
|
<a href="/new" class="crayons-btn hidden mr-2 whitespace-nowrap s:block">Write a post</a>
|
|
|
|
<a id="moderation-link" class="top-bar__link trusted-visible-block" aria-label="Moderation" href="<%= mod_path %>">
|
|
<%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
|
|
</a>
|
|
|
|
<a href="/connect" id="connect-link" class="top-bar__link" aria-label="Connect">
|
|
<%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: "Connect") %>
|
|
<span class="crayons-indicator crayons-indicator--accent hidden" id="connect-number"></span>
|
|
</a>
|
|
<a href="/notifications" id="notifications-link" class="top-bar__link" aria-label="Notifications">
|
|
<%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: "Notifications") %>
|
|
<span class="crayons-indicator crayons-indicator--critical hidden" id="notifications-number"></span>
|
|
</a>
|
|
|
|
<div class="top-bar__menu" id="top-bar__menu">
|
|
<button type="button" class="top-bar__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
|
|
<% if user_signed_in? %>
|
|
<span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
|
|
<% else %>
|
|
<%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: "Navigation menu") %>
|
|
<% end %>
|
|
</button>
|
|
<%= render "layouts/nav_menu" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% if user_signed_in? %>
|
|
<script async>
|
|
// Here we have some scripts we want to get working on before
|
|
// waiting for the page to stream in.
|
|
|
|
// Load the current user's pic as quickly as it's available
|
|
var currentUser = localStorage.getItem('current_user')
|
|
var navProfilePic = document.getElementById('nav-profile-image')
|
|
if (currentUser && navProfilePic) {
|
|
navProfilePic.src = JSON.parse(currentUser).profile_image_90;
|
|
}
|
|
|
|
// Load notifications count as quickly as it's available.
|
|
// Not if we're on the notifications page itself
|
|
if (
|
|
window.location.pathname !== '/notifications'
|
|
) {
|
|
var xmlhttp;
|
|
if (window.XMLHttpRequest) {
|
|
xmlhttp = new XMLHttpRequest();
|
|
} else {
|
|
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
|
|
}
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
var count = xmlhttp.response;
|
|
if (isNaN(count)) {
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.add('hidden');
|
|
} else if (count != '0' && count != undefined && count != '') {
|
|
document.getElementById('notifications-number').innerHTML =
|
|
xmlhttp.response;
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.remove('hidden');
|
|
} else {
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.add('hidden');
|
|
}
|
|
}
|
|
};
|
|
|
|
xmlhttp.open('GET', '/notifications/counts', true);
|
|
xmlhttp.send();
|
|
}
|
|
</script>
|
|
<% end %>
|
|
</header>
|