import React from 'react';
import { Text, StyleSheet } from 'react-native';

/**
 * NAM-403: visually-hidden assertive live region used to speak the full-page
 * composite announcement. Default (RN) path uses accessibilityLiveRegion, which
 * TalkBack/VoiceView honor on focus-independent text changes. The Kepler override
 * (A11yLiveRegion.kepler.tsx) uses Amazon's preferred aria-live prop. Empty text
 * renders nothing to speak.
 */
export const A11yLiveRegion: React.FC<{ text: string }> = ({ text }) => (
  <Text
    accessible={!!text}
    accessibilityLiveRegion="assertive"
    style={styles.hidden}
    allowFontScaling={false}
  >
    {text}
  </Text>
);

const styles = StyleSheet.create({
  hidden: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', left: -9999, opacity: 0 },
});