Add VisuallyHidden component

[alanbsmith]

🚀 Feature Proposal

An element that provides content to assistive technology, but is hidden from the UI.

Motivation

I found a use case for this when working on Badge, and I think there are probably other components that could use it as well.

Example

      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
        New notifications
      </VisuallyHidden>

[alanbsmith]

Here's sort of what I had in mind:

const VisuallyHidden = styled('div')({
  position: 'absolute',
  top: 0,
  clip: 'rect(1px, 1px, 1px, 1px)',
  overflow: 'hidden',
  height: '1px',
  width: '1px',
  padding: 0,
  border: 0,
})

This is based on Polaris' component. There's not much to the component. Here's the JSX, and this is the styling.

It also seems like a shared mixin we could add as a variant for different components. e.g:

<Label variant="hidden">Hidden label</Label>

[alanbsmith]

Here's the Reach UI example:

• TSX
• Docs

[anicholls]

We already have an accessibleHide style object, but it probably wouldn't hurt having a component for this?

[alanbsmith]

@anicholls,

Yeah, that's great! I think a component would be helpful too, though. Here's an example.

[mathalete]

Note the accessibleHide is the better CSS technique as it includes white-space:nowrap;. For reference see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

[alanbsmith]

Closing as we already have accessibleHide.