hideVisually.js.flow 986 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. // @flow
  2. import type { Styles } from '../types/style'
  3. /**
  4. * CSS to hide content visually but remain accessible to screen readers.
  5. * from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/9a176f57af1cfe8ec70300da4621fb9b07e5fa31/src/css/main.css#L121)
  6. *
  7. * @example
  8. * // Styles as object usage
  9. * const styles = {
  10. * ...hideVisually(),
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * ${hideVisually()};
  16. * `
  17. *
  18. * // CSS as JS Output
  19. *
  20. * 'div': {
  21. * 'border': '0',
  22. * 'clip': 'rect(0 0 0 0)',
  23. * 'height': '1px',
  24. * 'margin': '-1px',
  25. * 'overflow': 'hidden',
  26. * 'padding': '0',
  27. * 'position': 'absolute',
  28. * 'whiteSpace': 'nowrap',
  29. * 'width': '1px',
  30. * }
  31. */
  32. export default function hideVisually(): Styles {
  33. return {
  34. border: '0',
  35. clip: 'rect(0 0 0 0)',
  36. height: '1px',
  37. margin: '-1px',
  38. overflow: 'hidden',
  39. padding: '0',
  40. position: 'absolute',
  41. whiteSpace: 'nowrap',
  42. width: '1px',
  43. }
  44. }