The <VisuallyHidden /> React component aims at visually hiding a piece of text which leaving it accessible for assistive technologies such as screen-readers.

Component

const VisuallyHidden = ({ as: Component, ...props }) => (
<Component {...props} className='sr-only' />
)

VisuallyHidden.defaultProps = {
as: 'span'
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

Usage

const Navigation = props => (
<a href={`/blog/${props.currentPage + 1}`}>
Next
<VisuallyHidden>page</VisuallyHidden>
</a>
)

Read previous snippet: .sr-only {}