Merge pull request #1951 from bookwyrm-social/accessibility-fixes

Accessibility fixes

bookwyrm/static/css/bookwyrm.css

@@ -301,6 +301,183 @@ details.dropdown .dropdown-menu a:focus-visible {
     }
 }
 
+/** Bookwyrm Tabs
+ ******************************************************************************/
+
+.bw-tabs {
+    -webkit-overflow-scrolling: touch;
+    -webkit-touch-callout: none;
+    position: relative;
+    align-items: center;
+    display: flex;
+    font-size: 1rem;
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.bw-tabs::before {
+    border-bottom-color: #dbdbdb;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    bottom: 0;
+    content: "";
+    position: absolute;
+    width: 100%;
+}
+
+.bw-tabs:not(:last-child) {
+    margin-bottom: 1.5rem;
+}
+
+.bw-tabs a {
+    align-items: center;
+    border-bottom-color: #dbdbdb;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    color: #4a4a4a;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -1px;
+    padding: 0.5em 1em;
+    position: relative;
+}
+
+.bw-tabs a:hover {
+    border-bottom-color: transparent;
+    color: #363636;
+}
+
+.bw-tabs a.is-active {
+    border-bottom-color: transparent;
+    color: #3273dc;
+}
+
+.bw-tabs.is-left {
+    padding-right: 0.75em;
+}
+
+.bw-tabs.is-center {
+    flex: none;
+    justify-content: center;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+}
+
+.bw-tabs.is-right {
+    justify-content: flex-end;
+    padding-left: 0.75em;
+}
+
+.bw-tabs .icon:first-child {
+    margin-right: 0.5em;
+}
+
+.bw-tabs .icon:last-child {
+    margin-left: 0.5em;
+}
+
+.bw-tabs.is-centered {
+    justify-content: center;
+}
+
+.bw-tabs.is-boxed a {
+    border: 1px solid transparent;
+    border-radius: 4px 4px 0 0;
+}
+
+.bw-tabs.is-boxed a:hover {
+    background-color: #f5f5f5;
+    border-bottom-color: #dbdbdb;
+}
+
+.bw-tabs.is-boxed a.is-active {
+    background-color: #fff;
+    border-color: #dbdbdb;
+    border-bottom-color: #fff !important;
+}
+
+.bw-tabs.is-fullwidth a {
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.bw-tabs.is-toggle a {
+    border-color: #dbdbdb;
+    border-style: solid;
+    border-width: 1px;
+    margin-bottom: 0;
+    position: relative;
+}
+
+.bw-tabs.is-toggle a:hover {
+    background-color: #f5f5f5;
+    border-color: #b5b5b5;
+    z-index: 2;
+}
+
+.bw-tabs.is-toggle a + a {
+    margin-left: -1px;
+}
+
+.bw-tabs.is-toggle a:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.bw-tabs.is-toggle a:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.bw-tabs.is-toggle a.is-active {
+    background-color: #3273dc;
+    border-color: #3273dc;
+    color: #fff;
+    z-index: 1;
+}
+
+.bw-tabs.is-toggle {
+    border-bottom: none;
+}
+
+.bw-tabs.is-toggle.is-toggle-rounded a:first-child {
+    border-bottom-left-radius: 290486px;
+    border-top-left-radius: 290486px;
+    padding-left: 1.25em;
+}
+
+.bw-tabs.is-toggle.is-toggle-rounded a:last-child {
+    border-bottom-right-radius: 290486px;
+    border-top-right-radius: 290486px;
+    padding-right: 1.25em;
+}
+
+.bw-tabs.is-small {
+    font-size: 0.75rem;
+}
+
+.bw-tabs.is-medium {
+    font-size: 1.25rem;
+}
+
+.bw-tabs.is-large {
+    font-size: 1.5rem;
+}
+
+.bw-tabs.has-aside-text a {
+    margin-top: 1.5rem;
+}
+
+.bw-tabs a .aside-text {
+    position: absolute;
+    top: calc(-0.75rem - 0.75rem);
+    left: 0;
+    color: #4a4a4a;
+}
+
 /** Details panel
  ******************************************************************************/
 

bookwyrm/static/js/vendor/tabs.js

@@ -11,17 +11,17 @@ class TabGroup {
         this.container = container;
 
         this.tablist = this.container.querySelector('[role="tablist"]');
-        this.buttons = this.tablist.querySelectorAll('[role="tab"]');
+        this.tabs = this.tablist.querySelectorAll('[role="tab"]');
         this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]');
         this.delay = this.determineDelay();
 
-        if(!this.tablist || !this.buttons.length || !this.panels.length) {
+        if(!this.tablist || !this.tabs.length || !this.panels.length) {
             return;
         }
 
         this.keys = this.keys();
         this.direction = this.direction();
-        this.initButtons();
+        this.initTabs();
         this.initPanels();
     }
 
@@ -46,17 +46,21 @@ class TabGroup {
         };
     }
 
-    initButtons() {
+    initTabs() {
         let count = 0;
-        for(let button of this.buttons) {
-            let isSelected = button.getAttribute("aria-selected") === "true";
-            button.setAttribute("tabindex", isSelected ? "0" : "-1");
+        for(let tab of this.tabs) {
+            let isSelected = tab.getAttribute("aria-selected") === "true";
+            tab.setAttribute("tabindex", isSelected ? "0" : "-1");
 
-            button.addEventListener('click', this.clickEventListener.bind(this));
-            button.addEventListener('keydown', this.keydownEventListener.bind(this));
-            button.addEventListener('keyup', this.keyupEventListener.bind(this));
+            tab.addEventListener('click', this.clickEventListener.bind(this));
+            tab.addEventListener('keydown', this.keydownEventListener.bind(this));
+            tab.addEventListener('keyup', this.keyupEventListener.bind(this));
 
-            button.index = count++;
+            if (isSelected) {
+                tab.scrollIntoView();
+            }
+
+            tab.index = count++;
         }
     }
 
@@ -73,11 +77,11 @@ class TabGroup {
     }
 
     clickEventListener(event) {
-        let button = event.target.closest('a');
+        let tab = event.target.closest('[role="tab"]');
 
         event.preventDefault();
 
-        this.activateTab(button, false);
+        this.activateTab(tab, false);
     }
 
     // Handle keydown on tabs
@@ -88,12 +92,12 @@ class TabGroup {
             case this.keys.end:
                 event.preventDefault();
                 // Activate last tab
-                this.activateTab(this.buttons[this.buttons.length - 1]);
+                this.activateTab(this.tabs[this.tabs.length - 1]);
                 break;
             case this.keys.home:
                 event.preventDefault();
                 // Activate first tab
-                this.activateTab(this.buttons[0]);
+                this.activateTab(this.tabs[0]);
                 break;
 
             // Up and down are in keydown
@@ -147,15 +151,15 @@ class TabGroup {
     switchTabOnArrowPress(event) {
         var pressed = event.keyCode;
 
-        for (let button of this.buttons) {
-            button.addEventListener('focus', this.focusEventHandler.bind(this));
+        for (let tab of this.tabs) {
+            tab.addEventListener('focus', this.focusEventHandler.bind(this));
         }
 
         if (this.direction[pressed]) {
             var target = event.target;
             if (target.index !== undefined) {
-                if (this.buttons[target.index + this.direction[pressed]]) {
-                    this.buttons[target.index + this.direction[pressed]].focus();
+                if (this.tabs[target.index + this.direction[pressed]]) {
+                    this.tabs[target.index + this.direction[pressed]].focus();
                 }
                 else if (pressed === this.keys.left || pressed === this.keys.up) {
                     this.focusLastTab();
@@ -184,8 +188,8 @@ class TabGroup {
         // Set the tab as selected
         tab.setAttribute('aria-selected', 'true');
 
-        // Give the tab parent an is-active class
-        tab.parentNode.classList.add('is-active');
+        // Give the tab is-active class
+        tab.classList.add('is-active');
 
         // Get the value of aria-controls (which is an ID)
         var controls = tab.getAttribute('aria-controls');
@@ -201,11 +205,11 @@ class TabGroup {
 
     // Deactivate all tabs and tab panels
     deactivateTabs() {
-        for (let button of this.buttons) {
-            button.parentNode.classList.remove('is-active');
-            button.setAttribute('tabindex', '-1');
-            button.setAttribute('aria-selected', 'false');
-            button.removeEventListener('focus', this.focusEventHandler.bind(this));
+        for (let tab of this.tabs) {
+            tab.classList.remove('is-active');
+            tab.setAttribute('tabindex', '-1');
+            tab.setAttribute('aria-selected', 'false');
+            tab.removeEventListener('focus', this.focusEventHandler.bind(this));
         }
 
         for (let panel of this.panels) {
@@ -214,11 +218,11 @@ class TabGroup {
     }
 
     focusFirstTab() {
-        this.buttons[0].focus();
+        this.tabs[0].focus();
     }
 
     focusLastTab() {
-        this.buttons[this.buttons.length - 1].focus();
+        this.tabs[this.tabs.length - 1].focus();
     }
 
     // Determine whether there should be a delay

bookwyrm/templates/discover/large-book.html

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

bookwyrm/templates/discover/small-book.html

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

bookwyrm/templates/feed/suggested_books.html

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

bookwyrm/templates/layout.html

@@ -207,12 +207,15 @@
 </div>
 {% endif %}
 
-<div class="section is-flex-grow-1">
+<main class="section is-flex-grow-1">
     <div class="container">
+        {# almost every view needs to know the user shelves #}
+        {% with request.user.shelf_set.all as user_shelves %}
         {% block content %}
         {% endblock %}
+        {% endwith %}
     </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>

bookwyrm/templates/lists/list.html

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

bookwyrm/templates/search/book.html

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

bookwyrm/templates/settings/link_domains/link_domains.html

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

bookwyrm/templates/settings/reports/report.html

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

bookwyrm/templates/snippets/create_status.html

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

bookwyrm/templates/snippets/filters_panel/filters_panel.html

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

bookwyrm/templates/snippets/status/header.html

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

dev-tools/.stylelintrc.js

@@ -16,5 +16,6 @@ module.exports = {
         "property-no-vendor-prefix": null,
         "color-function-notation": null,
         "declaration-block-no-redundant-longhand-properties": null,
+        "no-descending-specificity": null
     }
 };