Alert

const CorrectLiveRegionReact = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <Button
        data-size='sm'
        variant='secondary'
        onClick={() => setShowAlert((value) => !value)}
      >
        {showAlert ? 'Skjul varsel' : 'Handling som fører til varsel'}
      </Button>
      {/* Korrekt bruk: role="alert" ligger på elementet der varselet dukker opp */}
      <div role='alert'>
        {showAlert && (
          <Alert data-color='warning'>
            <Heading
              level={2}
              data-size='xs'
              style={{
                marginBottom: 'var(--ds-size-2)',
              }}
            >
              Vi klarer ikke lagre skjemaet
            </Heading>
            <Paragraph>
              Vi har mistet forbindelsen med serveren og får ikke lagret
              skjemaet. Vent litt og prøv en gang til.
            </Paragraph>
          </Alert>
        )}
      </div>
    </>
  );
};

render(<CorrectLiveRegionReact />)