kopia lustrzana https://github.com/jointakahe/takahe
				
				
				
			Keyboard navigation
							rodzic
							
								
									7413dab052
								
							
						
					
					
						commit
						25b8bf6a2e
					
				| 
						 | 
				
			
			@ -1149,3 +1149,22 @@ table.metadata td.name {
 | 
			
		|||
    color: var(--color-highlight);
 | 
			
		||||
    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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,9 +1,9 @@
 | 
			
		|||
{% 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>
 | 
			
		||||
    </a>
 | 
			
		||||
{% 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>
 | 
			
		||||
    </a>
 | 
			
		||||
{% endif %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,8 +1,8 @@
 | 
			
		|||
{% load static %}
 | 
			
		||||
{% 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">
 | 
			
		||||
    </a>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,22 +1,22 @@
 | 
			
		|||
{% load static %}
 | 
			
		||||
{% 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">
 | 
			
		||||
    </a>
 | 
			
		||||
 | 
			
		||||
    <time _="on click go url {% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %} then halt">
 | 
			
		||||
        {% 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 %}
 | 
			
		||||
            <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 %}
 | 
			
		||||
            <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 %}
 | 
			
		||||
            <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 %}
 | 
			
		||||
        <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 %}
 | 
			
		||||
        {% if post.published %}
 | 
			
		||||
            <a href="{% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %}" title="{{ post.published }}">{{ post.published | timedeltashort }}</a>
 | 
			
		||||
| 
						 | 
				
			
			@ -26,31 +26,31 @@
 | 
			
		|||
    </time>
 | 
			
		||||
 | 
			
		||||
    {% if request.identity %}
 | 
			
		||||
    <div class="actions">
 | 
			
		||||
    <div class="actions" role="menubar">
 | 
			
		||||
        {% include "activities/_reply.html" %}
 | 
			
		||||
        {% include "activities/_like.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>
 | 
			
		||||
        </a>
 | 
			
		||||
        <menu>
 | 
			
		||||
            <a href="{{ post.urls.view }}">
 | 
			
		||||
            <a href="{{ post.urls.view }}" role="menuitem">
 | 
			
		||||
                <i class="fa-solid fa-comment"></i> View Post & Replies
 | 
			
		||||
            </a>
 | 
			
		||||
            {% 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
 | 
			
		||||
            </a>
 | 
			
		||||
            <a href="{{ post.urls.action_delete }}">
 | 
			
		||||
            <a href="{{ post.urls.action_delete }}" role="menuitem">
 | 
			
		||||
                <i class="fa-solid fa-trash"></i> Delete
 | 
			
		||||
            </a>
 | 
			
		||||
            {% 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
 | 
			
		||||
              </a>
 | 
			
		||||
            {% endif %}
 | 
			
		||||
            {% 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
 | 
			
		||||
            </a>
 | 
			
		||||
            {% endif %}
 | 
			
		||||
| 
						 | 
				
			
			@ -88,5 +88,5 @@
 | 
			
		|||
        </div>
 | 
			
		||||
    {% endif %}
 | 
			
		||||
 | 
			
		||||
    <a class="whole-box" href="{{ post.urls.view }}"></a>
 | 
			
		||||
    <a class="whole-box" href="{{ post.urls.view }}" tabindex="-1"></a>
 | 
			
		||||
</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
</a>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -4,7 +4,7 @@
 | 
			
		|||
 | 
			
		||||
{% block content %}
 | 
			
		||||
    {% for post in page_obj %}
 | 
			
		||||
        {% include "activities/_post.html" %}
 | 
			
		||||
        {% include "activities/_post.html" with feedindex=forloop.counter %}
 | 
			
		||||
    {% empty %}
 | 
			
		||||
        No posts yet.
 | 
			
		||||
    {% endfor %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,7 +20,8 @@
 | 
			
		|||
    {% block extra_head %}{% endblock %}
 | 
			
		||||
</head>
 | 
			
		||||
<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>
 | 
			
		||||
        <header>
 | 
			
		||||
            <a class="logo" href="/">
 | 
			
		||||
| 
						 | 
				
			
			@ -29,19 +30,19 @@
 | 
			
		|||
            </a>
 | 
			
		||||
            <menu>
 | 
			
		||||
                {% 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>
 | 
			
		||||
                    </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>
 | 
			
		||||
                    </a>
 | 
			
		||||
                    {% 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>
 | 
			
		||||
                        </a>
 | 
			
		||||
                    {% endif %}
 | 
			
		||||
                    <div class="gap"></div>
 | 
			
		||||
                    <a href="/identity/select/" class="identity">
 | 
			
		||||
                    <a href="/identity/select/" role="menuitem" class="identity">
 | 
			
		||||
                        {% if not request.identity %}
 | 
			
		||||
                            No Identity
 | 
			
		||||
                            <img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected">
 | 
			
		||||
| 
						 | 
				
			
			@ -52,7 +53,7 @@
 | 
			
		|||
                    </a>
 | 
			
		||||
                {% else %}
 | 
			
		||||
                    <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 %}
 | 
			
		||||
            </menu>
 | 
			
		||||
        </header>
 | 
			
		||||
| 
						 | 
				
			
			@ -61,11 +62,11 @@
 | 
			
		|||
            {% block pre_content %}
 | 
			
		||||
            {% endblock %}
 | 
			
		||||
            <div class="columns">
 | 
			
		||||
                <div class="left-column">
 | 
			
		||||
                <div class="left-column" id="main-content">
 | 
			
		||||
                    {% block content %}
 | 
			
		||||
                    {% endblock %}
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="right-column">
 | 
			
		||||
                <div class="right-column" id="side-navigation">
 | 
			
		||||
                    {% block right_content %}
 | 
			
		||||
                        {% include "activities/_menu.html" %}
 | 
			
		||||
                    {% endblock %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Ładowanie…
	
		Reference in New Issue