12 lines
561 B
JavaScript
12 lines
561 B
JavaScript
import { html } from 'htm/preact'
|
|
|
|
// A polite live region. It is rendered even when the message is empty, because a
|
|
// live region has to already be in the DOM for a later change to be announced:
|
|
// mounting it together with its text would let the first message pass unnoticed.
|
|
// The text carries the information; `state` only changes the weight of the line,
|
|
// never its color alone.
|
|
export function StatusLine({ message = '', state = 'idle' }) {
|
|
return html`<p class=${`status status--${state}`} role="status" aria-live="polite">
|
|
${message}
|
|
</p>`
|
|
}
|