serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Add additional accessibilty (#150)

Browse source 
* Add additional accessibilty

* Requested revisions for accessibility commit
This commit is contained in:
Gav Hern 2021-05-28 09:54:53 -07:00 committed by GitHub
parent 716d8846cf
commit 2cc8f87810
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/css/browser.css
View file

@ -1309,4 +1309,18 @@ cp { color: #ff00ff }
100% { 100% {
transform: scale(1.1); 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;
}
} }

58
html/home.html
View file

@ -25,22 +25,6 @@
<img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleY(-1)"> <img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleY(-1)">
</div> </div>
<div style="position:absolute; top: 1.7%; right: 2%; text-align: right; width: 10%;">
<img id="creditsButton" class="gdButton" src="../assets/credits.png" width="60%" onclick="loadCredits()">
</div>
<div style="position:absolute; bottom: 2.5%; right: 1.5%; text-align: right; width: 18%;">
<a href="../gdps"><img class="gdButton" src="../assets/basement.png" width="40%"></a>
</div>
<div style="position:absolute; bottom: 17%; right: 7%; width: 9%; text-align: right; pointer-events: none">
<img src="../assets/privateservers.png" width=85%;">
</div>
<div style="position:absolute; top: -1.5%; right: 10%; text-align: right; width: 10%;">
<a href="../iconkit"><img class="iconRope" src="../assets/iconrope.png" width="40%"></a>
</div>
<div class="menu-achievements" style="position:absolute; top: 5.5%; left: 3%; width: 12%;"> <div class="menu-achievements" style="position:absolute; top: 5.5%; left: 3%; width: 12%;">
<a href="../achievements"><img class="gdButton" src="../assets/achievements.png" width="40%"></a> <a href="../achievements"><img class="gdButton" src="../assets/achievements.png" width="40%"></a>
@ -49,6 +33,14 @@
<div class="menu-messages" style="position:absolute; top: -1.7%; left: 11%; text-align: left; width: 10%;"> <div class="menu-messages" style="position:absolute; top: -1.7%; left: 11%; text-align: left; width: 10%;">
<a href="../messages"><img class="iconRope" src="../assets/messagerope.png" width="40%"></a> <a href="../messages"><img class="iconRope" src="../assets/messagerope.png" width="40%"></a>
</div> </div>
<div style="position:absolute; top: -1.5%; right: 10%; text-align: right; width: 10%;">
<a href="../iconkit"><img class="iconRope" src="../assets/iconrope.png" width="40%"></a>
</div>
<div style="position:absolute; top: 1.7%; right: 2%; text-align: right; width: 10%;">
<img id="creditsButton" class="gdButton" src="../assets/credits.png" width="60%" onclick="loadCredits()">
</div>
<div id="dl" style="display: none; position:absolute; top: 15%; right: 0.5%; text-align: center; width: 17%"> <div id="dl" style="display: none; position:absolute; top: 15%; right: 0.5%; text-align: center; width: 17%">
<h1 class="smaller" style="margin-bottom: 1%">Note</h1> <h1 class="smaller" style="margin-bottom: 1%">Note</h1>
@ -59,17 +51,17 @@
<div class="supercenter center" id="menuButtons" style="bottom: 5%;"> <div class="supercenter center" id="menuButtons" style="bottom: 5%;">
<table> <table>
<tr> <tr>
<td><a href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png"></a></td> <td><a tabindex="1" href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png"></a></td>
<td><a href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png"></a></td> <td><a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png"></a></td>
<td><a href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png"></a></td> <td><a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png"></a></td>
<td><a href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png"></a></td> <td><a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png"></a></td>
</tr> </tr>
<tr> <tr>
<td><a href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png"></a></td> <td><a tabindex="1" href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png"></a></td>
<!-- <img src="./assets/exclamation.png" style="position: absolute; height: 18%; left: 3.5%; bottom: 23%; pointer-events: none; z-index: 50;"> --> <!-- <img src="./assets/exclamation.png" style="position: absolute; height: 18%; left: 3.5%; bottom: 23%; pointer-events: none; z-index: 50;"> -->
<td><a href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png"></a></td> <td><a tabindex="1" href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png"></a></td>
<td><a href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png"></a></td> <td><a tabindex="1" href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png"></a></td>
<td><a href="./search"><img class="menubutton menu-search" src="../assets/category-search.png"></a></td> <td><a tabindex="1" href="./search"><img class="menubutton menu-search" src="../assets/category-search.png"></a></td>
</tr> </tr>
</table> </table>
@ -83,6 +75,15 @@
<a class="menuLink" href="https://store.steampowered.com/app/322170/Geometry_Dash/">Buy Geometry Dash!</a></p> <a class="menuLink" href="https://store.steampowered.com/app/322170/Geometry_Dash/">Buy Geometry Dash!</a></p>
</div> </div>
<div style="position:absolute; bottom: 17%; right: 7%; width: 9%; text-align: right; pointer-events: none">
<img src="../assets/privateservers.png" width=85%;">
</div>
<div style="position:absolute; bottom: 2.5%; right: 1.5%; text-align: right; width: 18%;">
<a href="../gdps"><img class="gdButton" src="../assets/basement.png" width="40%"></a>
</div>
<div class="center" width="100%" style="margin-top: 2%"> <div class="center" width="100%" style="margin-top: 2%">
<img src="../assets/gdlogo.png" height="11.5%"><br> <img src="../assets/gdlogo.png" height="11.5%"><br>
<img id="browserlogo" src="../assets/browser.png" height="7%" style="margin: 0.5% 0% 0% 30%"> <img id="browserlogo" src="../assets/browser.png" height="7%" style="margin: 0.5% 0% 0% 30%">
@ -125,6 +126,7 @@ function loadCredits() {
$('.creditsicon:visible').each(function() { // only load icons when necessary $('.creditsicon:visible').each(function() { // only load icons when necessary
$(this).attr('src', $(this).attr('icon')) $(this).attr('src', $(this).attr('icon'))
}) })
} }
Fetch(`./api/credits`).then(res => { Fetch(`./api/credits`).then(res => {
@ -132,6 +134,7 @@ Fetch(`./api/credits`).then(res => {
lastPage = res.credits.length + 1 lastPage = res.credits.length + 1
res.credits.forEach((x, y) => { res.credits.forEach((x, y) => {
$('#credits').append(`<div id="credits${y+1}" class="subCredits" style="display: none;"> $('#credits').append(`<div id="credits${y+1}" class="subCredits" style="display: none;">
<img class="gdButton" src="../assets/arrow-left.png" width="60vh" style="${y == 0 ? "display: none; " : ""}position: absolute; top: 45%; right: 75%" tabindex="0" onclick="page -= 1; loadCredits()">
<div class="brownBox center supercenter" style="width: 80vh; height: 43%; padding-top: 1.5%; padding-bottom: 3.5%;"> <div class="brownBox center supercenter" style="width: 80vh; height: 43%; padding-top: 1.5%; padding-bottom: 3.5%;">
<h1>${x.header}</h1><br> <h1>${x.header}</h1><br>
<h2 style="margin-bottom: 1.5%" class="gdButton"><a href="https://gdbrowser.com/u/${x.ign || x.name}">${x.name}</h2></a> <h2 style="margin-bottom: 1.5%" class="gdButton"><a href="https://gdbrowser.com/u/${x.ign || x.name}">${x.name}</h2></a>
@ -141,8 +144,7 @@ Fetch(`./api/credits`).then(res => {
<a target=_blank href="${x.github[0]}"><img src="../assets/${x.github[1]}.png" width="11%" class="sideSpace gdButton"></a> <a target=_blank href="${x.github[0]}"><img src="../assets/${x.github[1]}.png" width="11%" class="sideSpace gdButton"></a>
<br> <br>
</div> </div>
<img class="gdButton" src="../assets/arrow-right.png" width="60vh" style="position: absolute; top: 45%; left: 75%" onclick="page += 1; loadCredits()"> <img class="gdButton" src="../assets/arrow-right.png" width="60vh" style="position: absolute; top: 45%; left: 75%" tabindex="0" onclick="page += 1; loadCredits()">
<img class="gdButton" src="../assets/arrow-left.png" width="60vh" style="${y == 0 ? "display: none; " : ""}position: absolute; top: 45%; right: 75%" onclick="page -= 1; loadCredits()">
</div>`) </div>`)
}) })
@ -150,7 +152,7 @@ Fetch(`./api/credits`).then(res => {
<div id="specialthanks" class="brownBox center supercenter" style="width: 80vh; height: 55%; padding-top: 1.5%; padding-bottom: 3.5%;"> <div id="specialthanks" class="brownBox center supercenter" style="width: 80vh; height: 55%; padding-top: 1.5%; padding-bottom: 3.5%;">
<h1>Special Thanks!</h1><br> <h1>Special Thanks!</h1><br>
</div> </div>
<img class="gdButton" src="../assets/arrow-left.png" width="60vh" style="position: absolute; top: 45%; right: 75%" onclick="page -= 1; loadCredits()"> <img class="gdButton" src="../assets/arrow-left.png" width="60vh" style="position: absolute; top: 45%; right: 75%" tabindex="0" onclick="page -= 1; loadCredits()">
</div>`) </div>`)
res.specialThanks.forEach((x, y) => { res.specialThanks.forEach((x, y) => {
@ -162,7 +164,7 @@ Fetch(`./api/credits`).then(res => {
}) })
$('#credits').append(`<div id="closeCredits" class="center supercenter" style="width: 80vh; height: ${xButtonPos}%; pointer-events: none;"> $('#credits').append(`<div id="closeCredits" class="center supercenter" style="width: 80vh; height: ${xButtonPos}%; pointer-events: none;">
<img class="closeWindow gdButton" src="../assets/close.png" width="14%" style="position: absolute; top: -24%; left: -7vh; pointer-events: all;" onclick="$('#credits').hide(); page = 1;"></div>`) <img class="closeWindow gdButton" src="../assets/close.png" width="14%" style="position: absolute; top: -24%; left: -7vh; pointer-events: all;" tabindex="0" onclick="$('#credits').hide(); page = 1;"></div>`)
$(document).keydown(function(k) { $(document).keydown(function(k) {

21
misc/sizecheck.js
View file

@ -67,3 +67,24 @@ while ($(this).scrollTop() != 0) {
$(document).ready(function() { $(document).ready(function() {
$(window).trigger('resize'); $(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();
})