Slightly improve accessibility

This commit is contained in:
Misode
2021-01-01 05:23:06 +01:00
parent 45608057d7
commit 28909fe96c
3 changed files with 18 additions and 10 deletions

View File

@@ -5,6 +5,7 @@ import { Octicon } from './Octicon';
import { Toggle } from './Toggle';
import { languages } from '../../config.json'
import { Tracker } from '../Tracker';
import { locale } from '../Locales';
export const Header = (view: View, title: string, homeLink = '/') => {
const panelTogglesId = view.register(el => {
@@ -33,7 +34,7 @@ export const Header = (view: View, title: string, homeLink = '/') => {
return `<header>
<div class="header-title">
<a data-link href="${homeLink}" class="home-link">${Octicon.three_bars}</a>
<a data-link href="${homeLink}" class="home-link" aria-label="${locale('home')}">${Octicon.three_bars}</a>
<h2>${title}</h2>
</div>
<nav>
@@ -42,12 +43,12 @@ export const Header = (view: View, title: string, homeLink = '/') => {
<li>${Dropdown(view, 'globe', languages.map(l => [l.code, l.name]), App.language, Tracker.setLanguage)}</li>
<li>${Toggle(view, [['dark', 'sun'], ['light', 'moon']], App.theme, Tracker.setTheme)}</li>
<li>
<a data-link href="/settings/fields/">
<a data-link href="/settings/fields/" title="${locale('settings')}">
${Octicon.gear}
</a>
</li>
<li class="dimmed">
<a href="https://github.com/misode/misode.github.io" target="_blank">
<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" title="${locale('github')}">
${Octicon.mark_github}
</a>
</li>