Use semantically more correct elements for error bubble

2021-06-22 15:48:42 +02:00
parent 724d7318cf
commit 1ea3180f5b
2 changed files with 9 additions and 6 deletions
--- a/components/app.js
+++ b/components/app.js
@@ -1231,11 +1231,11 @@ export default class App extends Component {
 		let error = null;
 		if (this.state.error) {
 			error = html`
-				<p id="error-msg">
+				<div id="error-msg">
 					${this.state.error}
 					${" "}
-					<a href="#" onClick=${this.dismissError}>×</a>
-				</p>
+					<button onClick=${this.dismissError}>×</button>
+				</div>
 			`;
 		}

--- a/style.css
+++ b/style.css
@@ -460,9 +460,12 @@ details summary[role="button"] {
 	margin: 0.5rem;
 }

-#error-msg a {
-	color: white;
-	text-decoration: none;
+#error-msg button {
+	border: none;
+	background: transparent;
+	color: inherit;
+	font-size: inherit;
+	padding: 0;
 }

 .error-text {