Merge pull request #1935 from joachimesque/accessibility/fixes

[Accessibility] Fixes
This commit is contained in:
Mouse Reeve
2022-02-17 16:50:32 -08:00
committed by GitHub
14 changed files with 251 additions and 105 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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">

View File

@ -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 %}

View File

@ -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 %}>

View File

@ -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">

View File

@ -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' %}

View File

@ -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>