diff --git a/assets/css/browser.css b/assets/css/browser.css index 40f56b1..4112da9 100644 --- a/assets/css/browser.css +++ b/assets/css/browser.css @@ -1309,4 +1309,18 @@ cp { color: #ff00ff } 100% { transform: scale(1.1); } +} + +/* + * Disable all transitions and animations if the user has reduced motion enabled in their sytem settings + * Also disabled on devices that may be slow to render new frames for performance optimization + */ +@media screen and + (prefers-reduced-motion: reduce), + (update: slow) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } } \ No newline at end of file diff --git a/html/home.html b/html/home.html index 8f736ec..d361973 100644 --- a/html/home.html +++ b/html/home.html @@ -25,22 +25,6 @@ -
- -
- -
- -
- -
- -
- - -
- -
@@ -49,6 +33,14 @@
+ +
+ +
+ +
+ +
`) $(document).keydown(function(k) { diff --git a/misc/sizecheck.js b/misc/sizecheck.js index 4ec6130..3aa95d8 100644 --- a/misc/sizecheck.js +++ b/misc/sizecheck.js @@ -67,3 +67,24 @@ while ($(this).scrollTop() != 0) { $(document).ready(function() { $(window).trigger('resize'); }); + + + +// Adds all necessary elements into the tab index (all buttons and links that aren't natively focusable) +const inaccessibleLinkSelector = "*:not(a) > img.gdButton, .leaderboardTab, .gdcheckbox"; + +document.querySelectorAll(inaccessibleLinkSelector).forEach(elem => { + elem.setAttribute('tabindex', 0); +}) + +document.getElementById('backButton')?.setAttribute('tabindex', 1); // Prioritize back button, first element to be focused + + +// Event listener to run a .click() function if +window.addEventListener("keydown", e => { + if(e.key !== 'Enter') return; + + const active = document.activeElement; + const isUnsupportedLink = active.hasAttribute('tabindex'); // Only click on links that aren't already natively supported to prevent double clicking + if(isUnsupportedLink) active.click(); +}) \ No newline at end of file