Components: Add VisuallyHidden component

docs/manifest-devhub.json

@@ -899,6 +899,12 @@
 		"markdown_source": "../packages/components/src/sandbox/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ScreenReaderText",
+		"slug": "screen-reader-text",
+		"markdown_source": "../packages/components/src/screen-reader-text/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ScrollLock",
 		"slug": "scroll-lock",

packages/components/src/index.js

@@ -49,6 +49,7 @@ export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
+export { default as ScreenReaderText } from './screen-reader-text';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';

packages/components/src/screen-reader-text/README.md

@@ -0,0 +1,9 @@
+# ScreenReaderText
+
+A component used to render text intended for a screen reader, not visible elsewhere.
+
+### Usage
+
+```jsx
+<ScreenReaderText> Show text for screenreader. </ScreenReaderText>
+```

packages/components/src/screen-reader-text/index.js

@@ -0,0 +1,10 @@
+
+function ScreenReaderText( props ) {
+	return (
+		<div className="screen-reader-text">
+			{ props.children }
+		</div>
+	);
+}
+
+export default ScreenReaderText;

packages/components/src/screen-reader-text/stories/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import ScreenReaderText from '../';
+import '../style.scss';
+
+export default { title: 'ScreenReaderText', component: ScreenReaderText };
+
+export const _default = () => (
+	<>
+		<ScreenReaderText>
+			This should not show.
+		</ScreenReaderText>
+		<div>
+			This text will always show.
+		</div>
+	</>
+);

packages/components/src/screen-reader-text/style.scss

@@ -0,0 +1,13 @@
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	-webkit-clip-path: inset(50%);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}

packages/components/src/style.scss

@@ -33,6 +33,7 @@
 @import "./resizable-box/style.scss";
 @import "./responsive-wrapper/style.scss";
 @import "./sandbox/style.scss";
+@import "./screen-reader-text/style.scss";
 @import "./scroll-lock/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";

packages/components/storybook/webpack.config.js

@@ -3,7 +3,16 @@ module.exports = ( { config } ) => {
 		test: /\/stories\/.+\.js$/,
 		loaders: [ require.resolve( '@storybook/source-loader' ) ],
 		enforce: 'pre',
-	} );
+	},
+	{
+		test: /\.scss$/,
+		loaders: [
+			require.resolve( 'style-loader' ),
+			require.resolve( 'css-loader' ),
+			require.resolve( 'sass-loader' ),
+		],
+	}
+	);
 
 	return config;
 };