import { memo } from "react";

export interface SrOnlyProps {
	children: string;
}

/**
 * Component to display text that is only visible for screen readers
 *
 * Ref: https://webaim.org/techniques/css/invisiblecontent/
 */
export default memo(function SrOnly({ children }: SrOnlyProps) {
	return (
		<span
			style={{
				position: "absolute",
				left: "-10000vw",
				top: "auto",
				width: "1px",
				height: "1px",
				overflow: "hidden",
			}}
		>
			{children}
		</span>
	);
});