Alert

An Alert is a sentence in a box, and whether a screen reader announces it is a separate decision: role="status" waits for a pause, and role="alert" interrupts. On React Native it is a live region on Android and an announcement on iOS. Press Save draft above: the notice that appears is announced politely. The two that were there when the page loaded are not.

A notice that is simply on the page, and is not announced.

Save draft

Your session expires in two minutes.

AlertDemo.tsx

import { View } from '@hozo/core'
import { Alert, Button } from '@hozo/ui'
import { useState } from 'react'

export function AlertDemo() {
  const [saved, setSaved] = useState(false)
  return (
    <View className="w-full max-w-md gap-3">
      <Alert>A notice that is simply on the page, and is not announced.</Alert>
      <View className="flex-row">
        <Button tone="accent" size="sm" onPress={() => setSaved(true)}>
          Save draft
        </Button>
      </View>
      {saved ? (
        <Alert tone="accent" live="polite">
          Draft saved.
        </Alert>
      ) : null}
      <Alert tone="danger">Your session expires in two minutes.</Alert>
    </View>
  )
}

• tone: neutral (the default), accent or danger. The tone is the look only; it does not decide whether the alert is announced.
• live: 'polite', 'assertive' or false (the default). It defaults to silence because an alert rendered with the page is announced on load, and a notice that speaks on every visit is one people turn their reader off for. Use 'assertive' only for something that went wrong.