Tengo un componente muy simple que hace dos cosas:

1. Evite el procesamiento de sus componentes secundarios si no hay un lector de pantalla habilitado
2. Representar sus componentes secundarios si hay un lector de pantalla habilitado, pero ocultarlos visualmente de la interfaz de usuario para que solo sean visibles para el lector de pantalla

El componente se ve así:

 const VisuallyHidden: FunctionComponent<ViewProps> = ({ ...rest }) => { const screenReaderEnabled = useScreenReader(); if (!screenReaderEnabled) return null; return <Hidden {...rest} />; }; const Hidden = styled(View)` position: absolute; clip: rect(0 0 0 0); overflow: hidden; height: 1px; width: 1px; `; export default VisuallyHidden;

Cuando trato de usar el componente de esta manera:

 <VisuallyHidden>{linkButtons}</VisuallyHidden>

El lector de pantalla no lee los linkButtons de enlace, pero cuando elimino el CSS que los oculta de la pantalla, el lector de pantalla los lee. Entonces, mi pregunta es si mi CSS hace que el lector de pantalla no los lea por algún motivo. Sé que se están procesando porque puedo verlos una vez que elimino el CSS que los oculta, por lo que el lector de pantalla debería poder acceder a ellos.