Go to side pane keyboard nav

This commit is contained in:
rimu 2024-02-05 08:39:08 +13:00
parent 25f7eaf812
commit 843d4eb03a
19 changed files with 21 additions and 17 deletions

View file

@ -386,6 +386,9 @@ var showCurrentPost = false; // when true, the currently selected post will b
function setupKeyboardShortcuts() {
document.addEventListener('keydown', function(event) {
if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
if(document.activeElement.tagName !== 'A' && document.activeElement.classList.contains('skip-link')) {
return;
}
var didSomething = false;
if(event.shiftKey && event.key === '?') {
location.href = '/keyboard_shortcuts';

View file

@ -92,6 +92,7 @@
</head>
<body class="d-flex flex-column{{ ' low_bandwidth' if low_bandwidth }}">
<a href="#outer_container" class="skip-link" role="navigation" aria-label="Skip main navigation" tabindex="">Skip to main content</a>
<a href="#side_pane" class="skip-link" role="navigation" aria-label="Go to side pane" tabindex="">Go to side pane</a>
<!-- Page content -->
{% block navbar %}
<div class="navbar navbar-expand-lg">

View file

@ -97,7 +97,7 @@
</form>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">
<h2>{{ community.title }}</h2>

View file

@ -96,7 +96,7 @@
</nav>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card">
<div class="card-body">
<div class="row">

View file

@ -34,7 +34,7 @@
</nav>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
{% if current_user.is_authenticated %}
<div class="card mt-3">
<div class="card-header">

View file

@ -44,7 +44,7 @@
</nav>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
</aside>
</div>

View file

@ -16,7 +16,7 @@
<p>Liberapay is preferred as it has lower fees.</p>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">
<h2>{{ _('About %(site_name)s', site_name=g.site.name) }}</h2>

View file

@ -28,7 +28,7 @@
</nav>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<!-- <div class="card">
<div class="card-body">
<form method="get">

View file

@ -53,7 +53,7 @@
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">
<h2>{{ _('About %(site_name)s', site_name=g.site.name) }}</h2>

View file

@ -31,7 +31,7 @@
{% endif %}
</div>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card">
<div class="card-body">
<div class="row">

View file

@ -83,7 +83,7 @@
</div>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card">
<div class="card-body">
<div class="row">

View file

@ -150,7 +150,7 @@
{% endif %}
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card">
<div class="card-body">
<div class="row">

View file

@ -133,7 +133,7 @@
</form>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">
<h2>{{ post.community.title }}</h2>

View file

@ -31,7 +31,7 @@
{% endif %}
</div>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card">
<div class="card-body">
<div class="row">

View file

@ -71,7 +71,7 @@
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
</aside>
</div>

View file

@ -47,7 +47,7 @@
</nav>
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
{% if topic_communities %}
<div class="card mt-3">
<div class="card-header">

View file

@ -38,7 +38,7 @@
{% endif %}
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">

View file

@ -29,7 +29,7 @@
{% endif %}
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
<div class="card mt-3">
<div class="card-header">

View file

@ -100,7 +100,7 @@
{% endif %}
</div>
<aside class="col-12 col-md-4 side_pane" role="complementary">
<aside id="side_pane" class="col-12 col-md-4 side_pane" role="complementary">
{% if current_user.is_authenticated and current_user.id == user.id %}
<div class="card mt-3">
<div class="card-header">