Use semantically more correct elements for error bubble

This commit is contained in:
Simon Ser 2021-06-22 15:48:42 +02:00
parent 724d7318cf
commit 1ea3180f5b
2 changed files with 9 additions and 6 deletions

View File

@ -1231,11 +1231,11 @@ export default class App extends Component {
let error = null; let error = null;
if (this.state.error) { if (this.state.error) {
error = html` error = html`
<p id="error-msg"> <div id="error-msg">
${this.state.error} ${this.state.error}
${" "} ${" "}
<a href="#" onClick=${this.dismissError}>×</a> <button onClick=${this.dismissError}>×</button>
</p> </div>
`; `;
} }

View File

@ -460,9 +460,12 @@ details summary[role="button"] {
margin: 0.5rem; margin: 0.5rem;
} }
#error-msg a { #error-msg button {
color: white; border: none;
text-decoration: none; background: transparent;
color: inherit;
font-size: inherit;
padding: 0;
} }
.error-text { .error-text {