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

View File

@ -9,7 +9,7 @@
<span>&middot;</span> <span>&middot;</span>
<span>Theme <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a></span> <span>Theme <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a></span>
</footer> </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"> <button class="top-link" id="top-link" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6">
<path d="M12 6H0l6-6z" /></svg> <path d="M12 6H0l6-6z" /></svg>

View File

@ -33,7 +33,7 @@
<header class="header"> <header class="header">
<nav class="nav"> <nav class="nav">
<div class="logo"> <div class="logo">
<a href="{{ "" | absLangURL }}"> <a href="{{ "" | absLangURL }}" accesskey="h">
{{- if .Site.Params.label.icon }} {{- if .Site.Params.label.icon }}
<img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo" <img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
height="{{- .Site.Params.label.iconHeight | default "30px" -}}"> height="{{- .Site.Params.label.iconHeight | default "30px" -}}">
@ -43,7 +43,7 @@
<span class="logo-switches"> <span class="logo-switches">
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }} {{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
<span class="theme-toggle"> <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" <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" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">