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

Add additional accessibilty #150

Merged
GavHern merged 2 commits from master into master 2021-05-28 12:54:54 -04:00
Conversation 6 Commits 2 Files changed 3 +80 -28
22 changed files with 80 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3c8455b10e - Show all commits

14
assets/css/browser.css
View file

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

1
html/achievements.html
View file

@ -81,6 +81,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let disabledFilters = {reward: [], type: [], game: []}

1
html/analyze.html
View file

@ -101,6 +101,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
function clean(text) {return text.toString().replace(/&/g, "&#38;").replace(/</g, "&#60;").replace(/>/g, "&#62;").replace(/=/g, "&#61;").replace(/"/g, "&#34;").replace(/'/g, "&#39;")}

1
html/assets.html
View file

@ -44,6 +44,7 @@
<div id="filenames"></div></body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let data = `{DATA}`

1
html/boomlings.html
View file

@ -44,6 +44,7 @@
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
$('#boomerbox').html('')

1
html/comments.html
View file

@ -131,6 +131,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let {mode, compact} = JSON.parse(localStorage.getItem('commentPreset') || '{"mode": "top", "compact": true}')

1
html/demon.html
View file

@ -73,6 +73,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let max = 250

1
html/filters.html
View file

@ -145,6 +145,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let filters = []

1
html/gauntlets.html
View file

@ -34,6 +34,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let gauntletNames = ["Fire", "Ice", "Poison", "Shadow", "Lava", "Bonus", "Chaos", "Demon", "Time", "Crystal", "Magic", "Spike", "Monster", "Doom", "Death"]

1
html/gdps.html
View file

@ -58,6 +58,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let localhost = window.location.hostname == "localhost"

59
html/home.html
View file

@ -25,22 +25,6 @@
<img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleY(-1)">
</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%;">
<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%;">
<a href="../messages"><img class="iconRope" src="../assets/messagerope.png" width="40%"></a>
</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%">
<h1 class="smaller" style="margin-bottom: 1%">Note</h1>
@ -59,17 +51,17 @@
<div class="supercenter center" id="menuButtons" style="bottom: 5%;">
<table>
<tr>
<td><a 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 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="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png"></a></td>
<td><a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png"></a></td>
<td><a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png"></a></td>
<td><a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png"></a></td>
</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;"> -->
<td><a 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 href="./search"><img class="menubutton menu-search" src="../assets/category-search.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 tabindex="1" href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png"></a></td>
<td><a tabindex="1" href="./search"><img class="menubutton menu-search" src="../assets/category-search.png"></a></td>
</tr>
</table>
@ -83,6 +75,15 @@
<a class="menuLink" href="https://store.steampowered.com/app/322170/Geometry_Dash/">Buy Geometry Dash!</a></p>
</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%">
<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%">
@ -99,6 +100,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let page = 1
@ -125,6 +127,7 @@ function loadCredits() {
$('.creditsicon:visible').each(function() { // only load icons when necessary
$(this).attr('src', $(this).attr('icon'))
})
}
Fetch(`./api/credits`).then(res => {
@ -132,6 +135,7 @@ Fetch(`./api/credits`).then(res => {
lastPage = res.credits.length + 1
res.credits.forEach((x, y) => {
$('#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%;">
<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>
@ -141,8 +145,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>
<br>
</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-left.png" width="60vh" style="${y == 0 ? "display: none; " : ""}position: absolute; top: 45%; right: 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()">
</div>`)
})
@ -150,7 +153,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%;">
<h1>Special Thanks!</h1><br>
</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>`)
res.specialThanks.forEach((x, y) => {
@ -162,7 +165,7 @@ Fetch(`./api/credits`).then(res => {
})
$('#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) {

1
html/iconkit.html
View file

@ -95,6 +95,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script type="text/javascript">
$('#loading').hide();

1
html/leaderboard.html
View file

@ -82,6 +82,7 @@
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let sort = "stars"

1
html/level.html
View file

@ -172,6 +172,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let messageText = 'Your <cy>Geometry Dash password</cy> will <cg>not be stored</cg> anywhere on the site, both <ca>locally and server-side.</ca> You can view the code used for liking a level <a class="menuLink" target="_blank" href="https://github.com/GDColon/GDBrowser/blob/master/api/post/like.js">here</a>.'

1
html/levelboard.html
View file

@ -62,6 +62,7 @@
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let loading = false;

1
html/mappacks.html
View file

@ -32,6 +32,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
fetch('../api/mappacks').then(res => res.json()).then(packs => {

1
html/messages.html
View file

@ -214,6 +214,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let accountID;

1
html/offline.html
View file

@ -54,6 +54,7 @@
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
let line = 0

1
html/profile.html
View file

@ -152,6 +152,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>

1
html/search.html
View file

@ -109,6 +109,7 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../sizecheck.js?"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script type="text/javascript" src="../accessibility.js"></script>
<script>
$('#pageDown').hide()

1
index.js
View file

@ -172,6 +172,7 @@ app.use('/assets/css', express.static(__dirname + '/assets/css')); // override m
app.get("/sizecheck.js", function(req, res) { res.sendFile(__dirname + "/misc/sizecheck.js") })
app.get("/dragscroll.js", function(req, res) { res.sendFile(__dirname + "/misc/dragscroll.js") })
app.get("/accessibility.js", function(req, res) { res.sendFile(__dirname + "/misc/accessibility.js") })
app.get("/assets/:dir*?", function(req, res) {
let main = (req.params.dir || "").toLowerCase()

16
misc/accessibility.js Normal file
View file

@ -0,0 +1,16 @@
// Adds all necessary elements into the tab index (all buttons and links that aren't natively focusable)
document.querySelectorAll('*:not(a) > img.gdButton, .leaderboardTab, .gdcheckbox').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();
})