Markup improvements (#220)

* bugfix: various markup improvements, accessibility

* bugfix: various markup improvements, accessibility
This commit is contained in:
James Read 2024-01-27 23:43:30 +00:00 committed by GitHub
parent 143528d919
commit 0c19ba59d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 16 deletions

View File

@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang = "en">
<head> <head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta name = "description" content = "Give safe and simple access to predefined shell commands from a web interface." />
<title>OliveTin</title> <title>OliveTin</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" /> <link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "shortcut icon" type = "image/png" href = "OliveTinLogo.png" /> <link rel = "shortcut icon" type = "image/png" href = "OliveTinLogo.png" />
@ -79,7 +80,7 @@
<dialog title = "Execution Results" id = "execution-results-popup"> <dialog title = "Execution Results" id = "execution-results-popup">
<div class = "action-header"> <div class = "action-header">
<span class = "icon" role = "icon"></span> <span role = "img" class = "icon"></span>
<h2>Log: <h2>Log:
<span class = "title">?</span> <span class = "title">?</span>
@ -112,7 +113,7 @@
</details> </details>
<form method = "dialog"> <form method = "dialog">
<button name = "cancel">Close</button> <button name = "Cancel">Close</button>
</form> </form>
</dialog> </dialog>
@ -121,7 +122,7 @@
<form class = "action-arguments"> <form class = "action-arguments">
<div class = "wrapper"> <div class = "wrapper">
<div class = "action-header"> <div class = "action-header">
<span class = "icon" role = "icon"></span> <span class = "icon" role = "img"></span>
<h2>Argument form</h2> <h2>Argument form</h2>
</div> </div>
@ -133,13 +134,13 @@
</div> </div>
</div> </div>
</form> </form>
</button> </dialog>
</template> </template>
<template id = "tplActionButton"> <template id = "tplActionButton">
<button> <button>
<span role = "icon" title = "action button icon" class = "icon">&#x1f4a9;</span> <span title = "action button icon" class = "icon">&#x1f4a9;</span>
<span role = "title" class = "title">Untitled Button</span> <span class = "title">Untitled Button</span>
</button> </button>
<div class = "action-button-footer"> <div class = "action-button-footer">
@ -150,7 +151,7 @@
<tr class = "log-row"> <tr class = "log-row">
<td class = "timestamp">?</td> <td class = "timestamp">?</td>
<td> <td>
<span class = "icon" role = "icon"></span> <span role = "img" class = "icon"></span>
<span class = "content">?</span> <span class = "content">?</span>
<details> <details>

View File

@ -130,16 +130,16 @@ legend {
padding-top: 1em; padding-top: 1em;
} }
span[role="icon"] { span.icon {
display: block; display: block;
font-size: 3em; font-size: 3em;
vertical-align: middle;
} }
.action-header span[role="icon"], .action-header span.icon,
tr.log-row span[role="icon"] { tr.log-row span.icon {
display: inline-block; display: inline-block;
padding-right: 0.2em; padding-right: 0.2em;
vertical-align: middle;
} }
.error { .error {
@ -165,9 +165,9 @@ div.entity {
} }
h2 { h2 {
margin-top: 0;
font-size: 1em;
display: inline-block; display: inline-block;
font-size: 1em;
margin-top: 0;
} }
div.entity h2 { div.entity h2 {