mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-12-25 01:20:35 +00:00
Certain ARIA roles must contain particular children
https://dequeuniversity.com/rules/axe/4.3/aria-required-children In order to make this work, I had to translate Bulma's style so it doesn't use `ul` and `li` anymore. The JS code had to be adapted, I also changed `button` to `tab` (seemed like a more relevant name) and added a `scrollIntoView()` on load the active tab is always visible.
This commit is contained in:
Joachim
parent
bbb89605a5
commit
b27b6a5980
4 changed files with 238 additions and 93 deletions
|
|
@ -301,6 +301,159 @@ 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:.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:.75em
|
||||
}
|
||||
.bw-tabs.is-center {
|
||||
flex:none;
|
||||
justify-content:center;
|
||||
padding-left:.75em;
|
||||
padding-right:.75em
|
||||
}
|
||||
.bw-tabs.is-right {
|
||||
justify-content:flex-end;
|
||||
padding-left:.75em
|
||||
}
|
||||
.bw-tabs .icon:first-child {
|
||||
margin-right:.5em
|
||||
}
|
||||
.bw-tabs .icon:last-child {
|
||||
margin-left:.5em
|
||||
}
|
||||
.bw-tabs.is-centered {
|
||||
justify-content:center
|
||||
}
|
||||
.bw-tabs.is-right {
|
||||
justify-content:flex-end
|
||||
}
|
||||
.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:.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(-.75rem - .75rem);
|
||||
left: 0;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
/** Details panel
|
||||
******************************************************************************/
|
||||
|
||||
|
|
|
|||
60
bookwyrm/static/js/vendor/tabs.js
vendored
60
bookwyrm/static/js/vendor/tabs.js
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue