@instructure/quiz-interactions/src/util/Alert/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import omit from 'lodash/omit'

import {ScreenReaderContent} from '@instructure/ui-a11y-content'

export default class Alert extends Component {
  state = {
    alerts: {},
  }

  _timeouts = []

  componentWillUnmount() {
    this._timeouts.forEach(clearTimeout)
  }

  setAlert = content => {
    this.setState({
      alerts: {
        ...this.state.alerts,
        [content]: content,
      },
    })

    this._timeouts = this._timeouts.concat(
      setTimeout(
        () =>
          this.setState({
            alerts: omit(this.state.alerts, [content]),
          }),
        1000,
      ),
    )
  }

  render() {
    const alerts = Object.values(this.state.alerts)

    return (
      <ScreenReaderContent>
        <div role="alert" aria-live="assertive">
          {alerts.map(alert => (
            <span key={alert}>{alert}</span>
          ))}
        </div>
      </ScreenReaderContent>
    )
  }
}