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 => {
|
sortbtns.forEach(sortbtn => {
|
||||||
sortbtn.addEventListener('click', function() {
|
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')
|
sortbtn.classList.add('sorted')
|
||||||
|
|
||||||
const rev = sortbtn.dataset.sorted === 'asc' ? 'desc' : 'asc'
|
const rev = sortbtn.dataset.sorted === 'ascending' ? 'descending' : 'ascending'
|
||||||
sortbtn.dataset.sorted = rev
|
sortbtn.dataset.sorted = rev
|
||||||
|
|
||||||
sort(grid, sortbtn.dataset.sort, rev === 'desc')
|
sort(grid, sortbtn.dataset.sort, rev === 'descending')
|
||||||
sortbtn.classList.add(`sorted-${rev}`)
|
sortbtn.classList.add(`sorted-${rev}`)
|
||||||
|
sortbtn.setAttribute('aria-sort', rev)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,8 +31,8 @@
|
||||||
.sorted
|
.sorted
|
||||||
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)
|
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)
|
||||||
|
|
||||||
&-asc:before
|
&-ascending:before
|
||||||
content: " ▼ "
|
content: " ▼ "
|
||||||
&-desc:before
|
&-descending:before
|
||||||
content: " ▲ "
|
content: " ▲ "
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
{{ if $pages }}
|
{{ if $pages }}
|
||||||
<div class="gamegridcontrols">
|
<div class="gamegridcontrols">
|
||||||
Sort by:
|
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="name">Title</button>
|
||||||
<button class="sortbtn" data-sort="year">Release year</button>
|
<button class="sortbtn" data-sort="year">Release year</button>
|
||||||
<button class="sortbtn" data-sort="hours">How long to beat</button>
|
<button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||||
|
|
Loading…
Reference in New Issue