h/pwnpi-amora
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): use buttons instead of divs

Browse Source
This commit is contained in:
Himadri Bhattacharjee
2024-02-18 09:34:48 +05:30
parent 5ecb678c49
commit 919a9092b6
3 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/static/index.html
View File

@@ -11,17 +11,22 @@
<body>
<div class="container">
<div class="hide files">
</div>
<div class="hide files"></div>
<div class="sidebar">
<div class="documents icon"></div>
<div class="run icon"></div>
<div class="add icon"></div>
<button id="documents" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M2 4.75C2 3.784 2.784 3 3.75 3h4.971c.58 0 1.12.286 1.447.765l1.404 2.063c.046.069.124.11.207.11h8.471c.966 0 1.75.783 1.75 1.75V19.25A1.75 1.75 0 0 1 20.25 21H3.75A1.75 1.75 0 0 1 2 19.25Zm1.75-.25a.25.25 0 0 0-.25.25v14.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V7.687a.25.25 0 0 0-.25-.25h-8.471a1.75 1.75 0 0 1-1.447-.765L8.928 4.61a.252.252 0 0 0-.208-.11Z" stroke="#fff"></path></svg>
</button>
<button id="run" class="icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button id="add" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.75 4.5a.75.75 0 0 1 .75.75V11h5.75a.75.75 0 0 1 0 1.5H12.5v5.75a.75.75 0 0 1-1.5 0V12.5H5.25a.75.75 0 0 1 0-1.5H11V5.25a.75.75 0 0 1 .75-.75Z" fill="#fff"></path></svg>
</button>
</div>
<div class="editorarea">
<div class="title-bar">
<input class="title" placeholder="new file"></input>
<button class="title-btn">
<button id="title_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>

40
src/static/main.css
View File

@@ -26,13 +26,6 @@ body {
border-right: #444 solid 0.1rem;
}
.sidebar > div {
background-size: 1rem;
background-repeat: no-repeat;
background-position: center;
padding: 1rem;
}
.logs {
height: calc(30vh - 2rem);
background: #000;
@@ -60,33 +53,20 @@ body {
font-size: 1rem;
}
.run {
background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgNC45ODk1MUM1IDQuMDE4MzUgNSAzLjUzMjc3IDUuMjAyNDkgMy4yNjUxQzUuMzc4ODkgMy4wMzE5MSA1LjY0ODUyIDIuODg3NjEgNS45NDA0IDIuODcwMThDNi4yNzU0NCAyLjg1MDE3IDYuNjc5NDYgMy4xMTk1MyA3LjQ4NzUyIDMuNjU4MjNMMTguMDAzMSAxMC42Njg2QzE4LjY3MDggMTEuMTEzNyAxOS4wMDQ2IDExLjMzNjMgMTkuMTIwOSAxMS42MTY4QzE5LjIyMjcgMTEuODYyMSAxOS4yMjI3IDEyLjEzNzcgMTkuMTIwOSAxMi4zODNDMTkuMDA0NiAxMi42NjM1IDE4LjY3MDggMTIuODg2IDE4LjAwMzEgMTMuMzMxMkw3LjQ4NzUyIDIwLjM0MTVDNi42Nzk0NiAyMC44ODAyIDYuMjc1NDQgMjEuMTQ5NiA1Ljk0MDQgMjEuMTI5NkM1LjY0ODUyIDIxLjExMjIgNS4zNzg4OSAyMC45Njc5IDUuMjAyNDkgMjAuNzM0N0M1IDIwLjQ2NyA1IDE5Ljk4MTQgNSAxOS4wMTAzVjQuOTg5NTFaIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
}
.documents {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIgNC43NUMyIDMuNzg0IDIuNzg0IDMgMy43NSAzaDQuOTcxYy41OCAwIDEuMTIuMjg2IDEuNDQ3Ljc2NWwxLjQwNCAyLjA2M2MuMDQ2LjA2OS4xMjQuMTEuMjA3LjExaDguNDcxYy45NjYgMCAxLjc1Ljc4MyAxLjc1IDEuNzVWMTkuMjVBMS43NSAxLjc1IDAgMCAxIDIwLjI1IDIxSDMuNzVBMS43NSAxLjc1IDAgMCAxIDIgMTkuMjVabTEuNzUtLjI1YS4yNS4yNSAwIDAgMC0uMjUuMjV2MTQuNWMwIC4xMzguMTEyLjI1LjI1LjI1aDE2LjVhLjI1LjI1IDAgMCAwIC4yNS0uMjVWNy42ODdhLjI1LjI1IDAgMCAwLS4yNS0uMjVoLTguNDcxYTEuNzUgMS43NSAwIDAgMS0xLjQ0Ny0uNzY1TDguOTI4IDQuNjFhLjI1Mi4yNTIgMCAwIDAtLjIwOC0uMTFaIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4K');
}
.delete {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkuMDM2IDcuOTc2YS43NS43NSAwIDAgMC0xLjA2IDEuMDZMMTAuOTM5IDEybC0yLjk2MyAyLjk2M2EuNzUuNzUgMCAxIDAgMS4wNiAxLjA2TDEyIDEzLjA2bDIuOTYzIDIuOTY0YS43NS43NSAwIDAgMCAxLjA2MS0xLjA2TDEzLjA2MSAxMmwyLjk2My0yLjk2NGEuNzUuNzUgMCAxIDAtMS4wNi0xLjA2TDEyIDEwLjkzOSA5LjAzNiA3Ljk3NloiIGZpbGw9IiNmZmYiPjwvcGF0aD48cGF0aCBkPSJNMTIgMWM2LjA3NSAwIDExIDQuOTI1IDExIDExcy00LjkyNSAxMS0xMSAxMVMxIDE4LjA3NSAxIDEyIDUuOTI1IDEgMTIgMVpNMi41IDEyYTkuNSA5LjUgMCAwIDAgOS41IDkuNSA5LjUgOS41IDAgMCAwIDkuNS05LjVBOS41IDkuNSAwIDAgMCAxMiAyLjUgOS41IDkuNSAwIDAgMCAyLjUgMTJaIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+Cg==');
background-repeat: no-repeat;
}
.icon {
width: 1rem;
height: 1rem;
cursor: pointer;
button {
width: 2rem;
height: 2rem;
border: 0.5rem solid transparent;
background: #222;
}
.icon:active {
background-color: #444;
transition: 0.25s background-color;
}
.add {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTExLjc1IDQuNWEuNzUuNzUgMCAwIDEgLjc1Ljc1VjExaDUuNzVhLjc1Ljc1IDAgMCAxIDAgMS41SDEyLjV2NS43NWEuNzUuNzUgMCAwIDEtMS41IDBWMTIuNUg1LjI1YS43NS43NSAwIDAgMSAwLTEuNUgxMVY1LjI1YS43NS43NSAwIDAgMSAuNzUtLjc1WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPgo=');
button:hover {
background: #555;
}
.editorarea {
@@ -112,9 +92,9 @@ body {
padding: 0.5rem 1rem;
}
.editorarea > .title-bar > .title-btn {
#title_btn {
border: none;
background: #222;
display: none;
padding: 0 0.4rem 0 0.4rem;
}
@@ -156,4 +136,4 @@ body {
.show {
width: calc(100vw - 3rem);
}
}
}

23
src/static/script.js
View File

@@ -8,11 +8,7 @@ const waitTime = 500
const files = document.querySelector(".files")
const editor = document.querySelector('.editor')
const logs = document.querySelector('.logs')
const documents_icon = document.querySelector('.documents')
const run_icon = document.querySelector('.run')
const add_icon = document.querySelector('.add')
const title = document.querySelector('.editorarea > .title-bar > .title')
const title_button = document.querySelector('.editorarea > .title-bar > .title-btn')
let timer
function doApi(message) {
@@ -35,8 +31,8 @@ editor.addEventListener('keyup', (_) => {
function reload_logs() {
doApi({'action':'logs'}).then(r => r.json()).then(body => {
body.map(entry => {
logs.innerText += entry + '\n'
logs.scrollTo(0, logs.scrollHeight)
logs.innerText += entry + '\n'
logs.scrollTo(0, logs.scrollHeight)
})
})
}
@@ -73,26 +69,33 @@ function create_file() {
doApi({"action": "create", "filename": title.value})
}
title_button.addEventListener('click', create_file);
title_btn.addEventListener('click', create_file);
title.addEventListener('keypress', (e) => {
if (e.keyCode==13) {
create_file()
}
})
title.addEventListener('keyup', (_) => {
if (title.value == "") {
title_btn.style.display = 'none'
} else {
title_btn.style.display = 'block'
}
})
add_icon.addEventListener('click', () => {
add.addEventListener('click', () => {
editor.value = ''
title.value = ''
title.readOnly = false
title.focus()
})
documents_icon.addEventListener('click', () => {
documents.addEventListener('click', () => {
files.classList.toggle("show");
files.classList.toggle("hide");
});
run_icon.addEventListener('click', () => {
run.addEventListener('click', () => {
if (title.value != "") {
doApi({"action": "run", "filename": title.value})
} else {