Merge pull request #1935 from joachimesque/accessibility/fixes
[Accessibility] Fixes
This commit is contained in:
@ -30,7 +30,7 @@
|
||||
<div class="column mt-3-mobile ml-3-tablet">
|
||||
<div class="media block mb-2">
|
||||
<figure class="media-left" aria-hidden="true">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}" tabindex="-1">
|
||||
{% include 'snippets/avatar.html' with user=status.user ariaHide="true" medium="true" %}
|
||||
</a>
|
||||
</figure>
|
||||
|
@ -15,7 +15,7 @@
|
||||
|
||||
<div class="media block mb-2">
|
||||
<figure class="media-left" aria-hidden="true">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}" tabindex="-1">
|
||||
{% include 'snippets/avatar.html' with user=status.user ariaHide="true" medium="true" %}
|
||||
</a>
|
||||
</figure>
|
||||
|
@ -9,37 +9,30 @@
|
||||
{% else %}
|
||||
{% with active_book=request.GET.book %}
|
||||
<div class="tab-group">
|
||||
<div class="tabs is-small">
|
||||
<ul role="tablist">
|
||||
{% for shelf in suggested_books %}
|
||||
{% if shelf.books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
<li>
|
||||
<p>
|
||||
<div class="bw-tabs is-small is-toggle has-aside-text" role="tablist">
|
||||
{% for shelf in suggested_books %}
|
||||
{% if shelf.books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
{% for book in shelf.books %}
|
||||
<a
|
||||
class="{% if active_book == book.id|stringformat:'d' %}is-active{% elif not active_book and shelf_counter == 1 and forloop.first %}is-active{% endif %}"
|
||||
href="{{ request.path }}?book={{ book.id }}"
|
||||
id="tab_book_{{ book.id }}"
|
||||
role="tab"
|
||||
aria-label="{{ book.title }}"
|
||||
aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif not active_book and shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
|
||||
aria-controls="book_{{ book.id }}">
|
||||
{% if forloop.first %}
|
||||
<span class="aside-text">
|
||||
{% include "snippets/translated_shelf_name.html" with shelf=shelf %}
|
||||
</p>
|
||||
<div class="tabs is-small is-toggle">
|
||||
<ul>
|
||||
{% for book in shelf.books %}
|
||||
<li class="{% if active_book == book.id|stringformat:'d' %}is-active{% elif not active_book and shelf_counter == 1 and forloop.first %}is-active{% endif %}">
|
||||
<a
|
||||
href="{{ request.path }}?book={{ book.id }}"
|
||||
id="tab_book_{{ book.id }}"
|
||||
role="tab"
|
||||
aria-label="{{ book.title }}"
|
||||
aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
|
||||
aria-controls="book_{{ book.id }}">
|
||||
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m' %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% for shelf in suggested_books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
|
@ -207,12 +207,12 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="section is-flex-grow-1">
|
||||
<main class="section is-flex-grow-1">
|
||||
<div class="container">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div role="region" aria-live="polite" id="live-messages">
|
||||
<p id="status-success-message" class="live-message is-sr-only is-hidden">{% trans "Successfully posted status" %}</p>
|
||||
|
@ -92,7 +92,7 @@
|
||||
<summary>
|
||||
<span role="heading" aria-level="3">
|
||||
{% trans "Edit notes" %}
|
||||
<span class="details-close icon icon-pencil" aria-hidden></span>
|
||||
<span class="details-close icon icon-pencil" aria-hidden="true"></span>
|
||||
</span>
|
||||
</summary>
|
||||
{% include "lists/edit_item_form.html" with book=item.book %}
|
||||
@ -107,7 +107,7 @@
|
||||
<summary>
|
||||
<span role="heading" aria-level="3">
|
||||
{% trans "Add notes" %}
|
||||
<span class="details-close icon icon-plus" aria-hidden></span>
|
||||
<span class="details-close icon icon-plus" aria-hidden="true"></span>
|
||||
</span>
|
||||
</summary>
|
||||
{% include "lists/edit_item_form.html" with book=item.book %}
|
||||
|
@ -45,7 +45,7 @@
|
||||
<a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
|
||||
</span>
|
||||
|
||||
<span class="details-close icon icon-x" aria-hidden></span>
|
||||
<span class="details-close icon icon-x" aria-hidden="true"></span>
|
||||
</summary>
|
||||
{% endif %}
|
||||
|
||||
|
@ -53,7 +53,7 @@
|
||||
{% trans "View links" %}
|
||||
({{ domain.links.count }})
|
||||
</span>
|
||||
<span class="details-close icon icon-x" aria-hidden></span>
|
||||
<span class="details-close icon icon-x" aria-hidden="true"></span>
|
||||
</summary>
|
||||
|
||||
<div class="table-container mt-4">
|
||||
|
@ -21,7 +21,7 @@
|
||||
<details class="details-panel box">
|
||||
<summary>
|
||||
<span class="title is-4">{% trans "Message reporter" %}</span>
|
||||
<span class="details-close icon icon-x" aria-hidden></span>
|
||||
<span class="details-close icon icon-x" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<div class="box">
|
||||
{% trans "Update on your report:" as dm_template %}
|
||||
|
@ -4,42 +4,37 @@
|
||||
|
||||
{% with status_type=request.GET.status_type %}
|
||||
<div class="tab-group">
|
||||
<div class="tabs is-boxed" role="tablist">
|
||||
<ul>
|
||||
<li class="{% if status_type == 'review' or not status_type %}is-active{% endif %}">
|
||||
<a
|
||||
href="{{ request.path }}?status_type=review&book={{ book.id }}"
|
||||
id="tab_review_{{ book.id }}"
|
||||
role="tab"
|
||||
aria-selected="{% if status_type == 'review' or not status_type %}true{% else %}false{% endif %}"
|
||||
aria-controls="review_{{ book.id }}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Review" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{% if status_type == 'comment' %}is-active{% endif %}">
|
||||
<a
|
||||
href="{{ request.path }}?status_type=comment&book={{ book.id}}"
|
||||
id="tab_comment_{{ book.id }}"
|
||||
role="tab"
|
||||
aria-selected="{% if status_type == 'comment' %}true{% else %}false{% endif %}"
|
||||
aria-controls="comment_{{ book.id}}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Comment" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{% if status_type == 'quote' %}is-active{% endif %}">
|
||||
<a
|
||||
href="{{ request.path }}?status_type=quote&book={{ book.id }}"
|
||||
id="tab_quote_{{ book.id }}"
|
||||
role="tab"
|
||||
aria-selected="{% if status_type == 'quote' %}true{% else %}false{% endif %}"
|
||||
aria-controls="quote_{{ book.id }}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Quote" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bw-tabs is-boxed" role="tablist">
|
||||
<a
|
||||
class="{% if status_type == 'review' or not status_type %}is-active{% endif %}"
|
||||
role="tab"
|
||||
href="{{ request.path }}?status_type=review&book={{ book.id }}"
|
||||
id="tab_review_{{ book.id }}"
|
||||
aria-selected="{% if status_type == 'review' or not status_type %}true{% else %}false{% endif %}"
|
||||
aria-controls="review_{{ book.id }}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Review" %}
|
||||
</a>
|
||||
<a
|
||||
class="{% if status_type == 'comment' %}is-active{% endif %}"
|
||||
role="tab"
|
||||
href="{{ request.path }}?status_type=comment&book={{ book.id}}"
|
||||
id="tab_comment_{{ book.id }}"
|
||||
aria-selected="{% if status_type == 'comment' %}true{% else %}false{% endif %}"
|
||||
aria-controls="comment_{{ book.id}}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Comment" %}
|
||||
</a>
|
||||
<a
|
||||
class="{% if status_type == 'quote' %}is-active{% endif %}"
|
||||
role="tab"
|
||||
href="{{ request.path }}?status_type=quote&book={{ book.id }}"
|
||||
id="tab_quote_{{ book.id }}"
|
||||
aria-selected="{% if status_type == 'quote' %}true{% else %}false{% endif %}"
|
||||
aria-controls="quote_{{ book.id }}"
|
||||
data-category="tab-option-{{ book.id }}">
|
||||
{% trans "Quote" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tab-option-{{ book.id }}" id="review_{{ book.id }}" role="tabpanel" aria-labelledby="tab_review_{{ book.id }}" {% if status_type and status_type != "review" %}hidden{% endif %}>
|
||||
|
@ -22,7 +22,7 @@
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden></span>
|
||||
<span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden="true"></span>
|
||||
</summary>
|
||||
|
||||
<div class="mt-3">
|
||||
|
@ -5,10 +5,10 @@
|
||||
{% with next_shelf_identifier=active_shelf.shelf.identifier|next_shelf %}
|
||||
|
||||
{% for shelf in shelves %}
|
||||
{% if next_shelf_identifier != shelf.identifier %}
|
||||
{% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %}
|
||||
<li role="menuitem" class="dropdown-item p-0">
|
||||
<div
|
||||
class="{% if next_shelf_identifier == shelf.identifier %}is-hidden{% endif %}"
|
||||
data-shelf-dropdown-identifier="{{ shelf.identifier }}"
|
||||
data-shelf-next="{{ shelf.identifier|next_shelf }}"
|
||||
>
|
||||
@ -46,6 +46,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if readthrough and active_shelf.shelf.identifier != 'read' %}
|
||||
|
@ -5,7 +5,7 @@
|
||||
|
||||
<div class="media">
|
||||
<figure class="media-left" aria-hidden="true">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}">
|
||||
<a class="image is-48x48" href="{{ status.user.local_path }}" tabindex="-1">
|
||||
{% include 'snippets/avatar.html' with user=status.user ariaHide="true" medium="true" %}
|
||||
</a>
|
||||
</figure>
|
||||
|
Reference in New Issue
Block a user