Skip to content

Commit

Permalink
fix(a11y): use buttons instead of divs
Browse files Browse the repository at this point in the history
  • Loading branch information
@lavafroth
lavafroth committed Feb 18, 2024
1 parent 5ecb678 commit 919a909
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 46 deletions.
17 changes: 11 additions & 6 deletions src/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
40 changes: 10 additions & 30 deletions src/static/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

.icon:active {
background-color: #444;
transition: 0.25s background-color;
button {
width: 2rem;
height: 2rem;
border: 0.5rem solid transparent;
background: #222;
}

.add {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTExLjc1IDQuNWEuNzUuNzUgMCAwIDEgLjc1Ljc1VjExaDUuNzVhLjc1Ljc1IDAgMCAxIDAgMS41SDEyLjV2NS43NWEuNzUuNzUgMCAwIDEtMS41IDBWMTIuNUg1LjI1YS43NS43NSAwIDAgMSAwLTEuNUgxMVY1LjI1YS43NS43NSAwIDAgMSAuNzUtLjc1WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPgo=');
button:hover {
background: #555;
}

.editorarea {
Expand All @@ -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;
}

Expand Down Expand Up @@ -156,4 +136,4 @@ body {
.show {
width: calc(100vw - 3rem);
}
}
}
23 changes: 13 additions & 10 deletions src/static/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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)
})
})
}
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 919a909

Please sign in to comment.