use aria-sort on sortable buttons
This commit is contained in:
parent
75058b9226
commit
03b00b393f
|
@ -25,14 +25,18 @@ document.addEventListener("DOMContentLoaded",function() {
|
|||
|
||||
sortbtns.forEach(sortbtn => {
|
||||
sortbtn.addEventListener('click', function() {
|
||||
sortbtns.forEach(btn => btn.className = 'sortbtn')
|
||||
sortbtns.forEach(btn => {
|
||||
btn.className = 'sortbtn'
|
||||
btn.setAttribute('aria-sort', 'none')
|
||||
})
|
||||
sortbtn.classList.add('sorted')
|
||||
|
||||
const rev = sortbtn.dataset.sorted === 'asc' ? 'desc' : 'asc'
|
||||
const rev = sortbtn.dataset.sorted === 'ascending' ? 'descending' : 'ascending'
|
||||
sortbtn.dataset.sorted = rev
|
||||
|
||||
sort(grid, sortbtn.dataset.sort, rev === 'desc')
|
||||
sort(grid, sortbtn.dataset.sort, rev === 'descending')
|
||||
sortbtn.classList.add(`sorted-${rev}`)
|
||||
sortbtn.setAttribute('aria-sort', rev)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
@ -31,8 +31,8 @@
|
|||
.sorted
|
||||
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)
|
||||
|
||||
&-asc:before
|
||||
&-ascending:before
|
||||
content: " ▼ "
|
||||
&-desc:before
|
||||
&-descending:before
|
||||
content: " ▲ "
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
{{ if $pages }}
|
||||
<div class="gamegridcontrols">
|
||||
Sort by:
|
||||
<button class="sortbtn sorted sorted-asc" data-sort="date" data-sorted="asc">Date added</button>
|
||||
<button class="sortbtn sorted sorted-descending" data-sort="date" data-sorted="descending">Date added</button>
|
||||
<button class="sortbtn" data-sort="name">Title</button>
|
||||
<button class="sortbtn" data-sort="year">Release year</button>
|
||||
<button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||
|
|
Loading…
Reference in New Issue