I have a very simple component that does two things:

1. Prevent render of its child components if there is no screen reader enabled
2. Render its child components if there is a screen reader enabled, but visually hide them from the UI so that they're only visible to the screen reader

The component looks like this:

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;

When I try to use the component like this:

<VisuallyHidden>{linkButtons}</VisuallyHidden>

The screen reader does not read out the linkButtons, but when I remove the CSS that hides them from the screen, the screen reader reads them out. So my question is whether my CSS is making the screen reader not read them out for some reason? I know that they are being rendered because I can see them once I remove the CSS that hides them, so the screen reader should be able to reach them.