mirrors/takahe
1
1
Fork 0
mirror of https://github.com/jointakahe/takahe.git synced 2024-11-26 09:11:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Keyboard navigation

Browse source
This commit is contained in:
Michael Manfre 2022-12-07 11:12:43 -05:00 committed by GitHub
parent 7413dab052
commit 25b8bf6a2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/css/style.css
View file

@ -1149,3 +1149,22 @@ table.metadata td.name {
color: var(--color-highlight); color: var(--color-highlight);
transition: 0.2s; transition: 0.2s;
} }
/* Accessibility */
.screenreader-text {
position: absolute;
left: -999px;
width: 1px;
height: 1px;
top: auto;
}
.screenreader-text:focus {
color: black;
display: inline-block;
height: auto;
width: auto;
position: static;
margin: auto;
}

4
templates/activities/_like.html
View file

@ -1,9 +1,9 @@
{% if post.pk in interactions.like %} {% if post.pk in interactions.like %}
<a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML"> <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>
</a> </a>
{% else %} {% else %}
<a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML"> <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>
</a> </a>
{% endif %} {% endif %}

4
templates/activities/_mini_post.html
View file

@ -1,8 +1,8 @@
{% load static %} {% load static %}
{% load activity_tags %} {% load activity_tags %}
<div class="post mini" data-takahe-id="{{ post.id }}"> <div class="post mini" data-takahe-id="{{ post.id }}" role="article">
<a href="{{ post.author.urls.view }}"> <a href="{{ post.author.urls.view }}" tabindex="-1">
<img src="{{ post.author.local_icon_url }}" class="icon"> <img src="{{ post.author.local_icon_url }}" class="icon">
</a> </a>

30
templates/activities/_post.html
View file

@ -1,22 +1,22 @@
{% load static %} {% load static %}
{% load activity_tags %} {% load activity_tags %}
<div class="post {% if reply %}reply{% endif %}" data-takahe-id="{{ post.id }}"> <div class="post {% if reply %}reply{% endif %}" data-takahe-id="{{ post.id }}" role="article" tabindex="0">
<a href="{{ post.author.urls.view }}"> <a href="{{ post.author.urls.view }}" tabindex="-1">
<img src="{{ post.author.local_icon_url }}" class="icon"> <img src="{{ post.author.local_icon_url }}" class="icon">
</a> </a>
<time _="on click go url {% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %} then halt"> <time _="on click go url {% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %} then halt">
{% if post.visibility == 0 %} {% if post.visibility == 0 %}
<i class="visibility fa-solid fa-earth-oceania" title="Public"></i> <i class="visibility fa-solid fa-earth-oceania" title="Public" aria-label="public"></i>
{% elif post.visibility == 1 %} {% elif post.visibility == 1 %}
<i class="visibility fa-solid fa-lock-open" title="Unlisted"></i> <i class="visibility fa-solid fa-lock-open" title="Unlisted" aria-label="unlisted"></i>
{% elif post.visibility == 2 %} {% elif post.visibility == 2 %}
<i class="visibility fa-solid fa-lock" title="Followers Only"></i> <i class="visibility fa-solid fa-lock" title="Followers Only" aria-label="followers only"></i>
{% elif post.visibility == 3 %} {% elif post.visibility == 3 %}
<i class="visibility fa-solid fa-at" title="Mentioned Only"></i> <i class="visibility fa-solid fa-at" title="Mentioned Only" aria-label="mentioned only"></i>
{% elif post.visibility == 4 %} {% elif post.visibility == 4 %}
<i class="visibility fa-solid fa-link-slash" title="Local Only"></i> <i class="visibility fa-solid fa-link-slash" title="Local Only" aria-label="local only"></i>
{% endif %} {% endif %}
{% if post.published %} {% if post.published %}
<a href="{% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %}" title="{{ post.published }}">{{ post.published | timedeltashort }}</a> <a href="{% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %}" title="{{ post.published }}">{{ post.published | timedeltashort }}</a>
@ -26,31 +26,31 @@
</time> </time>
{% if request.identity %} {% if request.identity %}
<div class="actions"> <div class="actions" role="menubar">
{% include "activities/_reply.html" %} {% include "activities/_reply.html" %}
{% include "activities/_like.html" %} {% include "activities/_like.html" %}
{% include "activities/_boost.html" %} {% include "activities/_boost.html" %}
<a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt"> <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
<i class="fa-solid fa-caret-down"></i> <i class="fa-solid fa-caret-down"></i>
</a> </a>
<menu> <menu>
<a href="{{ post.urls.view }}"> <a href="{{ post.urls.view }}" role="menuitem">
<i class="fa-solid fa-comment"></i> View Post &amp; Replies <i class="fa-solid fa-comment"></i> View Post &amp; Replies
</a> </a>
{% if post.author == request.identity %} {% if post.author == request.identity %}
<a href="{{ post.urls.action_edit }}"> <a href="{{ post.urls.action_edit }}" role="menuitem">
<i class="fa-solid fa-pen-to-square"></i> Edit <i class="fa-solid fa-pen-to-square"></i> Edit
</a> </a>
<a href="{{ post.urls.action_delete }}"> <a href="{{ post.urls.action_delete }}" role="menuitem">
<i class="fa-solid fa-trash"></i> Delete <i class="fa-solid fa-trash"></i> Delete
</a> </a>
{% elif not post.local and post.url %} {% elif not post.local and post.url %}
<a href="{{ post.url }}"> <a href="{{ post.url }}" role="menuitem">
<i class="fa-solid fa-arrow-up-right-from-square"></i> See Original <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
</a> </a>
{% endif %} {% endif %}
{% if request.user.admin %} {% if request.user.admin %}
<a href="{{ post.urls.admin_edit }}"> <a href="{{ post.urls.admin_edit }}" role="menuitem">
<i class="fa-solid fa-gear"></i> View In Admin <i class="fa-solid fa-gear"></i> View In Admin
</a> </a>
{% endif %} {% endif %}
@ -88,5 +88,5 @@
</div> </div>
{% endif %} {% endif %}
<a class="whole-box" href="{{ post.urls.view }}"></a> <a class="whole-box" href="{{ post.urls.view }}" tabindex="-1"></a>
</div> </div>

2
templates/activities/_reply.html
View file

@ -1,4 +1,4 @@
<a title="Reply" href="{{ post.urls.action_reply }}"> <a title="Reply" href="{{ post.urls.action_reply }}" role="menuitem">
<i class="fa-solid fa-reply"></i> <i class="fa-solid fa-reply"></i>
</a> </a>

2
templates/activities/local.html
View file

@ -4,7 +4,7 @@
{% block content %} {% block content %}
{% for post in page_obj %} {% for post in page_obj %}
{% include "activities/_post.html" %} {% include "activities/_post.html" with feedindex=forloop.counter %}
{% empty %} {% empty %}
No posts yet. No posts yet.
{% endfor %} {% endfor %}

17
templates/base.html
View file

@ -20,7 +20,8 @@
{% block extra_head %}{% endblock %} {% block extra_head %}{% endblock %}
</head> </head>
<body class="{% block body_class %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> <body class="{% block body_class %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<a id='skip-to-main' class='screenreader-text' href='#main-content'>Skip to Content</a>
<a id='skip-to-nav' class='screenreader-text' href='#side-navigation'>Skip to Navigation</a>
<main> <main>
<header> <header>
<a class="logo" href="/"> <a class="logo" href="/">
@ -29,19 +30,19 @@
</a> </a>
<menu> <menu>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a href="{% url "compose" %}" title="Compose" {% if top_section == "compose" %}class="selected"{% endif %}> <a href="{% url "compose" %}" title="Compose" role="menuitem" {% if top_section == "compose" %}class="selected"{% endif %}>
<i class="fa-solid fa-feather"></i> <i class="fa-solid fa-feather"></i>
</a> </a>
<a href="{% url "search" %}" title="Search" {% if top_section == "search" %}class="selected"{% endif %}> <a href="{% url "search" %}" title="Search" role="menuitem" {% if top_section == "search" %}class="selected"{% endif %}>
<i class="fa-solid fa-search"></i> <i class="fa-solid fa-search"></i>
</a> </a>
{% if allows_refresh %} {% if allows_refresh %}
<a href="." title="Refresh" hx-get="." hx-select=".left-column" hx-target=".left-column" hx-swap="outerHTML" hx-trigger="click, every 120s"> <a href="." title="Refresh" role="menuitem" hx-get="." hx-select=".left-column" hx-target=".left-column" hx-swap="outerHTML" hx-trigger="click, every 120s">
<i class="fa-solid fa-rotate"></i> <i class="fa-solid fa-rotate"></i>
</a> </a>
{% endif %} {% endif %}
<div class="gap"></div> <div class="gap"></div>
<a href="/identity/select/" class="identity"> <a href="/identity/select/" role="menuitem" class="identity">
{% if not request.identity %} {% if not request.identity %}
No Identity No Identity
<img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected"> <img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected">
@ -52,7 +53,7 @@
</a> </a>
{% else %} {% else %}
<div class="gap"></div> <div class="gap"></div>
<a href="/auth/login/" class="identity"><i class="fa-solid fa-right-to-bracket"></i> Login</a> <a href="/auth/login/" role="menuitem" class="identity"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
{% endif %} {% endif %}
</menu> </menu>
</header> </header>
@ -61,11 +62,11 @@
{% block pre_content %} {% block pre_content %}
{% endblock %} {% endblock %}
<div class="columns"> <div class="columns">
<div class="left-column"> <div class="left-column" id="main-content">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
<div class="right-column"> <div class="right-column" id="side-navigation">
{% block right_content %} {% block right_content %}
{% include "activities/_menu.html" %} {% include "activities/_menu.html" %}
{% endblock %} {% endblock %}