From 03b00b393fd396c3e1777b632da2cf50eaa767e2 Mon Sep 17 00:00:00 2001
From: wgroeneveld <wouter@brainbaking.com>
Date: Thu, 19 May 2022 09:22:53 +0200
Subject: [PATCH] use aria-sort on sortable buttons

---
 themes/jefklak-creative-portfolio/assets/js/codex.js   | 10 +++++++---
 .../jefklak-creative-portfolio/assets/sass/_grid.sass  |  4 ++--
 .../layouts/partials/gamegrid.html                     |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/themes/jefklak-creative-portfolio/assets/js/codex.js b/themes/jefklak-creative-portfolio/assets/js/codex.js
index 481cb91..5a9c82b 100644
--- a/themes/jefklak-creative-portfolio/assets/js/codex.js
+++ b/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)
 			})
 		})
 	}
diff --git a/themes/jefklak-creative-portfolio/assets/sass/_grid.sass b/themes/jefklak-creative-portfolio/assets/sass/_grid.sass
index 765af86..3833ac7 100644
--- a/themes/jefklak-creative-portfolio/assets/sass/_grid.sass
+++ b/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: "​ ▲ ​"
 
diff --git a/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html b/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
index a83b728..f9dbb6e 100644
--- a/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
+++ b/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;