From 1ea3180f5b5f1324bc5e346157ebc47a3083140a Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Tue, 22 Jun 2021 15:48:42 +0200
Subject: [PATCH] Use semantically more correct elements for error bubble

---
 components/app.js | 6 +++---
 style.css         | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/app.js b/components/app.js
index e8f838c..050f712 100644
--- 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>
 			`;
 		}
 
diff --git a/style.css b/style.css
index 5b7c3f2..30818b7 100644
--- 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 {