Hide text for accessibility with React + Styled Components

I built this little component to hide text that isn't important when you have the whole screen visible for context, but for anyone using a screen reader that hidden content can be invaluable.

import styled from 'styled-components';

const Hide = styled.span.attrs({
    "aria-hidden": true
})`
    display: none;
`;

So if you have a Shop Now button, you can make that a lot more accessible.

Shop <Hide>our {category.name} collection</Hide> now

Comments

[Sung M. Kim]

Would content wrapped inside <Hide> won't be visible to users but screen readers will be able to read it? Or is it the other way around?

(Kind of confused as aria-hidden is also set to true)