Просмотр исходного кода

Markup improvements (#220)

* bugfix: various markup improvements, accessibility

* bugfix: various markup improvements, accessibility
James Read 2 лет назад
Родитель
Сommit
0c19ba59d2
2 измененных файлов с 17 добавлено и 16 удалено
  1. 11 10
      webui/index.html
  2. 6 6
      webui/style.css

+ 11 - 10
webui/index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 
-<html>
+<html lang = "en">
 	<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>
+
 		<link rel = "stylesheet" type = "text/css" href = "style.css" />
 		<link rel = "shortcut icon" type = "image/png" href = "OliveTinLogo.png" />
 
@@ -79,7 +80,7 @@
 
 		<dialog title = "Execution Results" id = "execution-results-popup">
 			<div class = "action-header">
-				<span class = "icon" role = "icon"></span>
+				<span role = "img" class = "icon"></span>
 
 				<h2>Log:
 					<span class = "title">?</span>
@@ -112,7 +113,7 @@
 			</details>
 
 			<form method = "dialog">
-				<button name = "cancel">Close</button>
+				<button name = "Cancel">Close</button>
 			</form>
 		</dialog>
 
@@ -121,7 +122,7 @@
 				<form class = "action-arguments">
 					<div class = "wrapper">
 						<div class = "action-header">
-							<span class = "icon" role = "icon"></span>
+							<span class = "icon" role = "img"></span>
 							<h2>Argument form</h2>
 						</div>
 
@@ -133,13 +134,13 @@
 						</div>
 					</div>
 				</form>
-			</button>
+			</dialog>
 		</template>
 
 		<template id = "tplActionButton">
 			<button>
-				<span role = "icon" title = "action button icon" class = "icon">&#x1f4a9;</span>
-				<span role = "title" class = "title">Untitled Button</span>
+				<span title = "action button icon" class = "icon">&#x1f4a9;</span>
+				<span class = "title">Untitled Button</span>
 			</button>
 
 			<div class = "action-button-footer">
@@ -150,7 +151,7 @@
 			<tr class = "log-row">
 				<td class = "timestamp">?</td>
 				<td>
-					<span class = "icon" role = "icon"></span>
+					<span role = "img" class = "icon"></span>
 					<span class = "content">?</span>
 
 					<details>

+ 6 - 6
webui/style.css

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