Add accesskeys (attribute specifies a shortcut key to activate/focus an element.)

c - ToC Open/Close
g- Go To Top
h - Home (according to current lang)
t - Theme toggle

more: https://www.w3schools.com/tags/att_global_accesskey.asp
This commit is contained in:
Aditya Telange 2020-10-30 01:15:29 +05:30
parent 9acbc2c134
commit b239f42f6b
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
3 changed files with 4 additions and 4 deletions

View File

@ -27,7 +27,7 @@
<div class="toc">
<details {{if .Params.TocOpen }} open{{ end }}>
<summary>
<div class="details">{{- i18n "toc" | default "Table of Contents" }}</div>
<div class="details" accesskey="c">{{- i18n "toc" | default "Table of Contents" }}</div>
</summary>
<blockquote>
{{- partial "toc.html" . }}

View File

@ -9,7 +9,7 @@
<span>&middot;</span>
<span>Theme <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a></span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top">
<a href="#top" aria-label="go to top" title="Go to Top" accesskey="g">
<button class="top-link" id="top-link" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6">
<path d="M12 6H0l6-6z" /></svg>

View File

@ -33,7 +33,7 @@
<header class="header">
<nav class="nav">
<div class="logo">
<a href="{{ "" | absLangURL }}">
<a href="{{ "" | absLangURL }}" accesskey="h">
{{- if .Site.Params.label.icon }}
<img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
height="{{- .Site.Params.label.iconHeight | default "30px" -}}">
@ -43,7 +43,7 @@
<span class="logo-switches">
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
<span class="theme-toggle">
<a id="theme-toggle">
<a id="theme-toggle" accesskey="t">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">