<commit_before>/**
 * @flow
 */

import React, { Component } from 'react'
import styled from 'styled-components'

export class AccessibleAlert extends Component {
  state = { style: { display: 'none' }}

  componentDidMount () {
    setInterval(() => this.setState({ style: { display: 'initial' }}), 10)
  }

  render () {
    return (
      <span role="alert" style={this.state.style}>
        {this.props.children}
      </span>
    )
  }
}

export const LabelForScreenReaders = styled.div`
  position: absolute;
  left: -10000px;
  top: auto;<commit_msg>Lessens the flicker of the alert<commit_after>/**
 * @flow
 */

import React, { Component } from 'react'
import styled from 'styled-components'

export class AccessibleAlert extends Component {
  state = { style: { display: 'none' }}

  componentDidMount () {
    setInterval(() => this.setState({ style: { display: 'initial' }}), 1)
  }

  render () {
    return (
      <span role="alert" style={this.state.style}>
        {this.props.children}
      </span>
    )
  }
}

export const LabelForScreenReaders = styled.div`
  position: absolute;
  left: -10000px;
  top: auto;
{'fraction_non_alphanumeric': 0.14840989399293286, 'fraction_numerical': 0.011484098939929329, 'mean_word_length': 3.2276119402985075, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2951886', 'n_tokens_mistral': 371, 'n_tokens_neox': 356, 'n_words': 92}