feat: add ScreenReaderOnlyText component

packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mountWithProviders } from '../../test-utils/renderer';
+import { ScreenReaderOnlyText } from './ScreenReaderOnlyText';
+
+describe('ScreenReaderOnlyText', () => {
+    it('matches snapshot', () => {
+        const wrapper = mountWithProviders(
+            <ScreenReaderOnlyText label="test" />,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenReaderOnlyText matches snapshot 1`] = `
+.c0 {
+  border: 0;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+<ScreenReaderOnlyText
+  label="test"
+>
+  <styled.span>
+    <span
+      className="c0"
+    >
+      test
+    </span>
+  </styled.span>
+</ScreenReaderOnlyText>
+`;

packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx

@@ -0,0 +1,21 @@
+import React, { VoidFunctionComponent } from 'react';
+import styled from 'styled-components';
+
+const StyledSpan = styled.span`
+    border: 0;
+    clip: rect(0,0,0,0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+`;
+
+interface Props {
+    label: string;
+}
+
+export const ScreenReaderOnlyText: VoidFunctionComponent<Props> = ({ label }) => (
+    <StyledSpan>{label}</StyledSpan>
+);