Skip to content

Instantly share code, notes, and snippets.

@turbod
Created February 25, 2023 17:45
Show Gist options
  • Save turbod/515e65086e5833f0aa4c24475ca1c90a to your computer and use it in GitHub Desktop.
Save turbod/515e65086e5833f0aa4c24475ca1c90a to your computer and use it in GitHub Desktop.
// These styles will make sure the component
// is not visible, but will still be announced
// by screen readers.
//
// Adding “display: none” would hide the
// element from ALL users, including those
// using screen-readers.
const hiddenStyles = {
display: 'inline-block',
position: 'absolute',
overflow: 'hidden',
clip: 'rect(0 0 0 0)',
height: 1,
width: 1,
margin: -1,
padding: 0,
border: 0,
};
const VisuallyHidden = ({ children }) => {
return (
<span style={hiddenStyles}>
{children}
</span>
);
};
export default VisuallyHidden;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment