Components: Add VisuallyHidden component (#18022)

* Add ScreenReaderText component

* Add new component readme to manifest

* Remove CSS style loading within stories

* Switch component name to VisuallyHidden

- Rename directory and includes
- Update README usage
- Update Storybook usage

* Switch classname to components-visually-hidden

* Lint: newline

* Add focus style

* Switch to 'as' for specifying tag

* Move renderAsRenderProps to utils.js

* Move utils to inside component folder

Waiting to refine the utils usage a little better before
making it look available for other components to use.

* Apply suggestions from code review

Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl>

* Lint: Move newline

* Fix variable name

* Use variable for stylesheet

docs/manifest-devhub.json

@@ -971,6 +971,12 @@
 		"markdown_source": "../packages/components/src/tree-select/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "VisuallyHidden",
+		"slug": "visually-hidden",
+		"markdown_source": "../packages/components/src/visually-hidden/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Data Module Reference",
 		"slug": "data",

packages/components/src/index.js

@@ -62,6 +62,7 @@ export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
 export { default as Tooltip } from './tooltip';
 export { default as TreeSelect } from './tree-select';
+export { default as VisuallyHidden } from './visually-hidden';
 export { default as IsolatedEventContainer } from './isolated-event-container';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 

packages/components/src/style.scss

@@ -44,3 +44,4 @@
 @import "./toolbar/style.scss";
 @import "./toolbar-button/style.scss";
 @import "./tooltip/style.scss";
+@import "./visually-hidden/style.scss";

packages/components/src/visually-hidden/README.md

@@ -0,0 +1,9 @@
+# VisuallyHidden
+
+A component used to render text intended to be visually hidden, but will show for alternate devices, for example a screen reader.
+
+### Usage
+
+```jsx
+<VisuallyHidden> Show text for screenreader. </VisuallyHidden>
+```

packages/components/src/visually-hidden/index.js

@@ -0,0 +1,22 @@
+
+/**
+ * Internal dependencies
+ */
+import { renderAsRenderProps } from './utils';
+
+/**
+ * VisuallyHidden component to render text out non-visually
+ * for use in devices such as a screen reader.
+ */
+function VisuallyHidden( {
+	as = 'div',
+	...props
+} ) {
+	return renderAsRenderProps( {
+		as,
+		className: 'components-visually-hidden',
+		...props,
+	} );
+}
+export default VisuallyHidden;
+

packages/components/src/visually-hidden/stories/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import VisuallyHidden from '../';
+
+export default { title: 'VisuallyHidden', component: VisuallyHidden };
+
+export const _default = () => (
+	<>
+		<VisuallyHidden>
+			This should not show.
+		</VisuallyHidden>
+		<div>
+			This text will <VisuallyHidden as="span">but not inline </VisuallyHidden> always show.
+		</div>
+	</>
+);

packages/components/src/visually-hidden/style.scss

@@ -0,0 +1,30 @@
+.components-visually-hidden {
+	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;
+}
+
+.components-visually-hidden:focus {
+	background-color: $light-gray-500;
+	clip: auto !important;
+	clip-path: none;
+	color: #444;
+	display: block;
+	font-size: 1em;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}

packages/components/src/visually-hidden/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Utility Functions
+ */
+
+/**
+ * renderAsRenderProps is used to wrap a component and convert
+ * the passed property "as" either a string or component, to the
+ * rendered tag if a string, or component.
+ *
+ * See VisuallyHidden hidden for example.
+ *
+ * @param {string|Component} as A tag or component to render.
+ * @return {Component} The rendered component.
+ */
+function renderAsRenderProps( { as: Component = 'div', ...props } ) {
+	if ( typeof props.children === 'function' ) {
+		return props.children( props );
+	}
+	return <Component { ...props } />;
+}
+
+export { renderAsRenderProps };