Skip to content

Commit

Permalink
add aria hidden to aside
Browse files Browse the repository at this point in the history
  • Loading branch information
@39zde
39zde committed Oct 9, 2024
1 parent 632fb18 commit ab7a37c
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 30 deletions.
22 changes: 11 additions & 11 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ aside {
}


.open-shortcuts-label {
.toggle-shortcuts-label {
width: var(--shortcut-list-handle-width);
max-width: var(--shortcut-list-handle-width);
height: 100%;
Expand All @@ -120,15 +120,15 @@ aside {
background: var(--color-gray-light);
}

&>#open-shortcuts {
&>#toggle-shortcuts {
appearance: none;
max-width: var(--shortcut-list-handle-width);

}
}


.open-shortcuts-label:has(#open-shortcuts:not(:checked))::before {
.toggle-shortcuts-label:has(#toggle-shortcuts:not(:checked))::before {
content: " 🢒 ";
text-align: center;
font-size: 36px;
Expand All @@ -142,7 +142,7 @@ aside {
margin: auto 0;
}

.open-shortcuts-label:has(#open-shortcuts:checked)::before {
.toggle-shortcuts-label:has(#toggle-shortcuts:checked)::before {
content: " 🢐 ";
text-align: center;
font-size: 36px;
Expand All @@ -157,7 +157,7 @@ aside {

}

.shortcuts {
#shortcuts {
padding-left: 12px;
flex-wrap: nowrap;
width: var(--shortcut-list-width);
Expand Down Expand Up @@ -217,10 +217,10 @@ kbd {
font-size: 16px;
}

aside:has(.open-shortcuts-label):has(#open-shortcuts:checked) {
aside:has(.toggle-shortcuts-label):has(#toggle-shortcuts:checked) {
width: var(--shortcut-width);

&>.shortcuts {
&>#shortcuts {
display: flex;
}
}
Expand Down Expand Up @@ -271,7 +271,7 @@ output.progress#notification {
Steps
*/

div.steps {
form.steps {
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -281,7 +281,7 @@ div.steps {
}


div.steps>label {
form.steps>label {
box-shadow: var(--shadow);
border-radius: 18px;
height: fit-content;
Expand All @@ -302,13 +302,13 @@ div.steps>label {
}

@media screen and (width < 550px) {
div.steps>label {
form.steps>label {
width: 90%;
}
}

@media screen and (width >=550px) {
div.steps>label {
form.steps>label {
min-width: 360px;
}
}
Expand Down
25 changes: 14 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
<html lang="en">

<head>
<meta charset="UTF-8" name="Simple File Compressor" lang="en-US,de-DE" http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; manifest-src 'self'; img-src 'self'"
<meta charset="UTF-8" name="Simple File Compressor" lang="en-US,de-DE"
description="A tool to reduce the file size of your files. Free online, local, tracking-free, advert-free file compression. Simple and fast." />
<!-- <meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; manifest-src 'self'; img-src 'self'" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" href="icons/icon.svg" />
Expand All @@ -26,10 +27,11 @@ <h1 role="heading">
</header>
<main>
<aside>
<label class="open-shortcuts-label" for="open-shortcuts" tabindex="-1" title="Show/Hide keyboard shortcuts">
<input id="open-shortcuts" type="checkbox">
<label class="toggle-shortcuts-label" for="toggle-shortcuts" tabindex="-1"
title="Show/Hide keyboard shortcuts">
<input id="toggle-shortcuts" type="checkbox">
</label>
<div class="shortcuts">
<div id="shortcuts" aria-hidden="true">
<h3>Jump to Steps</h3>
<ul>
<li>
Expand Down Expand Up @@ -89,12 +91,12 @@ <h3>Compress the file</h3>
<article>
<output id="notification" aria-hidden="true" role="status">
</output>
<div class="steps" role="list">
<label for="compression-file-input" tabindex="0" role="listitem" aria-keyshortcuts="1">
<form class="steps">
<label for="compression-file-input" tabindex="0" aria-keyshortcuts="1">
<h2>1. Select File(s)</h2>
<input type="file" id="compression-file-input" tabindex="-1" aria-keyshortcuts="o" multiple>
</label>
<label for="compression-type-input" tabindex="0" role="listitem" aria-keyshortcuts="2">
<label for="compression-type-input" tabindex="0" aria-keyshortcuts="2">
<h2>2. Select a compression type</h2>
<select id="compression-type-input" tabindex="-1" aria-keyshortcuts="s">
<option value="gzip">
Expand All @@ -105,11 +107,12 @@ <h2>2. Select a compression type</h2>
</option>
</select>
</label>
<label for="compression-start-input" tabindex="0" role="listitem" aria-keyshortcuts="3">
<label for="compression-start-input" tabindex="0" aria-keyshortcuts="3">
<h2>3. Compress the file</h2>
<input id="compression-start-input" type="button" value="Go" tabindex="-1" disabled>
<input id="compression-start-input" type="button" value="Go" tabindex="-1" disabled
aria-keyshortcuts="c">
</label>
</div>
</form>
</article>

</main>
Expand Down
27 changes: 19 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,15 +282,20 @@ function displayMessage(element, type, msg) {
* @param {string} fileInputID HTMLInputElement id attribute value for the file upload button
* @param {string} compressionTypeInputID HTMLSelectElement id attribute value for the compression type selection
* @param {string} startInputID HTMLInputElement id attribute value for the file action button
* @param {string} messageOutputID
* @param {string} messageOutputID HTMLOutputElement id attribute value for the message output element
* @param {string} shortcutID HTMLDivElement id attribute value for the hidden div inside of the aside element
* @param {string} shortcutToggle HTMLInputElement id attribute value for checkbox element to toggle the keyboard-shortcuts
* @returns
*/
function main(fileInputID, compressionTypeInputID, startInputID, messageOutputID) {
function main(fileInputID, compressionTypeInputID, startInputID, messageOutputID, shortcutID, shortcutToggleID) {
const fileInput = document.getElementById(fileInputID);
const typeSelect = document.getElementById(compressionTypeInputID);
const actionInput = document.getElementById(startInputID);
const messageOutput = document.getElementById(messageOutputID);
if (fileInput == null || typeSelect == null || actionInput == null || messageOutput == null) {
const shortcutDiv = document.getElementById(shortcutID);
const shortcutToggle = document.getElementById(shortcutToggleID);
if (fileInput == null || typeSelect == null || actionInput == null || messageOutput == null || shortcutDiv == null || shortcutToggle == null) {
console.log("File Input: ", fileInput == null, "type select: ", typeSelect == null, "action input: ", actionInput == null, "message output: ", messageOutput == null, "shortcut-div", shortcutDiv == null, "short-cut toggle", shortcutToggle == null);
return console.error("failed to find input elements");
}

Expand All @@ -309,14 +314,12 @@ function main(fileInputID, compressionTypeInputID, startInputID, messageOutputID
messageOutput.addEventListener("click", () => {
displayMessage(messageOutput, "hide");
});

fileInput.addEventListener("input", () => {
// enable the action button
actionInput.removeAttribute("disabled");
});

// check for compression button clicks
actionInput.addEventListener("click", (event) => {
// check for compression button clicks
event.preventDefault();
// set the notification-style to progress
displayMessage(messageOutput, "progress", "Starting...");
Expand All @@ -336,10 +339,18 @@ function main(fileInputID, compressionTypeInputID, startInputID, messageOutputID
}
}
});
shortcutToggle.addEventListener("input", () => {
// on toggle sidebar
if (shortcutDiv.ariaHidden === "true") {
shortcutDiv.ariaHidden = "false";
} else {
shortcutDiv.ariaHidden = "true";
}
});
}

// execute main, once the document has loaded
document.addEventListener("DOMContentLoaded", () => {
const elementIDs = ["compression-file-input", "compression-type-input", "compression-start-input", "notification"];
main(elementIDs[0], elementIDs[1], elementIDs[2], elementIDs[3]);
const elementIDs = ["compression-file-input", "compression-type-input", "compression-start-input", "notification", "shortcuts", "toggle-shortcuts"];
main(elementIDs[0], elementIDs[1], elementIDs[2], elementIDs[3], elementIDs[4], elementIDs[5]);
});

0 comments on commit ab7a37c

Please sign in to comment.