use aria-sort on sortable buttons

themes/jefklak-creative-portfolio/assets/js/codex.js

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

themes/jefklak-creative-portfolio/assets/sass/_grid.sass

@@ -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: "​ ▲ ​"
 

themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html

@@ -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>&nbsp;&nbsp;
+            <button class="sortbtn sorted sorted-descending" data-sort="date" data-sorted="descending">Date added</button>&nbsp;&nbsp;
             <button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;
             <button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;
             <button class="sortbtn" data-sort="hours">How long to beat</button>&nbsp;&nbsp;