From 742501cf5b0044f3c715d55542c117c1c7f7f749 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.gendron07@gmail.com>
Date: Fri, 5 Nov 2021 14:35:54 -0400
Subject: [PATCH] feat: add ScreenReaderOnlyText component

---
 .../ScreenReaderOnlyText.test.tsx             | 13 +++++++++
 .../ScreenReaderOnlyText.test.tsx.snap        | 27 +++++++++++++++++++
 .../ScreenReaderOnlyText.tsx                  | 21 +++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx
 create mode 100644 packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx.snap
 create mode 100644 packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx

diff --git a/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx b/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx
new file mode 100644
index 0000000000..ae8118b53f
--- /dev/null
+++ b/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();
+    });
+});
diff --git a/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx.snap b/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.test.tsx.snap
new file mode 100644
index 0000000000..37f77d7ced
--- /dev/null
+++ b/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>
+`;
diff --git a/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx b/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx
new file mode 100644
index 0000000000..f28eb9e0ee
--- /dev/null
+++ b/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>
+);