[system] Introduce visuallyHidden style utility

docs/pages/api-docs/visually-hidden.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/visually-hidden';
+const requireRaw = require.context('!raw-loader!./', false, /\/visually-hidden\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/visually-hidden.md

@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui-lab/src/VisuallyHidden/VisuallyHidden.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# VisuallyHidden API
+
+<p class="description">The API documentation of the VisuallyHidden React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import VisuallyHidden from '@material-ui/lab/VisuallyHidden';
+// or
+import { VisuallyHidden } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiVisuallyHidden` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiVisuallyHidden-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/VisuallyHidden/VisuallyHidden.js) for more detail.
+
+## Demos
+
+- [Visually Hidden](/components/visually-hidden/)
+

docs/pages/components/visually-hidden.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/visually-hidden';
+const requireDemo = require.context(
+  'docs/src/pages/components/visually-hidden',
+  false,
+  /\.(js|tsx)$/,
+);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/visually-hidden',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/src/pages.js

@@ -125,6 +125,7 @@ const pages = [
           { pathname: '/components/timeline' },
           { pathname: '/components/toggle-button' },
           { pathname: '/components/tree-view' },
+          { pathname: '/components/visually-hidden' },
         ],
       },
     ],

docs/src/pages/components/tables/EnhancedTable.js

@@ -20,6 +20,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { visuallyHidden } from '@material-ui/lab/VisuallyHidden';
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };
@@ -200,17 +201,7 @@ const useStyles = makeStyles((theme) => ({
   table: {
     minWidth: 750,
   },
-  visuallyHidden: {
-    border: 0,
-    clip: 'rect(0 0 0 0)',
-    height: 1,
-    margin: -1,
-    overflow: 'hidden',
-    padding: 0,
-    position: 'absolute',
-    top: 20,
-    width: 1,
-  },
+  visuallyHidden,
 }));
 
 export default function EnhancedTable() {

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -19,6 +19,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { visuallyHidden } from '@material-ui/lab/VisuallyHidden';
 
 interface Data {
   calories: number;
@@ -227,17 +228,7 @@ const useStyles = makeStyles((theme: Theme) =>
     table: {
       minWidth: 750,
     },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1,
-    },
+    visuallyHidden,
   }),
 );
 

docs/src/pages/components/visually-hidden/VisuallyHiddenUsage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import VisuallyHidden from '@material-ui/lab/VisuallyHidden';
+import IconButton from '@material-ui/core/IconButton';
+import AccessibilityIcon from '@material-ui/icons/Accessibility';
+
+export default function VisuallyHiddenUsage() {
+  return (
+    <IconButton>
+      <VisuallyHidden>
+        This text will not be visible, but will be read by screen readers.
+      </VisuallyHidden>
+      <AccessibilityIcon />
+    </IconButton>
+  );
+}

docs/src/pages/components/visually-hidden/VisuallyHiddenUsage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import VisuallyHidden from '@material-ui/lab/VisuallyHidden';
+import IconButton from '@material-ui/core/IconButton';
+import AccessibilityIcon from '@material-ui/icons/Accessibility';
+
+export default function VisuallyHiddenUsage() {
+  return (
+    <IconButton>
+      <VisuallyHidden>
+        This text will not be visible, but will be read by screen readers.
+      </VisuallyHidden>
+      <AccessibilityIcon />
+    </IconButton>
+  );
+}

docs/src/pages/components/visually-hidden/visually-hidden.md

@@ -0,0 +1,15 @@
+---
+title: VisuallyHidden React component
+components: VisuallyHidden
+---
+
+# VisuallyHidden
+
+<p class="description">The vissually hidden component provides a common technique that is used on the web for hidings some elements visually from the clients, but making them available for the screen readers and other assistive technology.</p>
+
+
+## Usage
+
+The text in the example will not be shown visually, but will be read by screen readers.
+
+{{"demo": "pages/components/visually-hidden/VisuallyHiddenUsage.js"}}

packages/material-ui-lab/src/Rating/Rating.js

@@ -11,6 +11,7 @@ import {
   unstable_useId as useId,
 } from '@material-ui/core/utils';
 import Star from '../internal/svg-icons/Star';
+import { visuallyHidden } from '../VisuallyHidden';
 
 function clamp(value, min, max) {
   if (value < min) {
@@ -71,18 +72,7 @@ export const styles = (theme) => ({
   /* Pseudo-class applied to the root element if keyboard focused. */
   focusVisible: {},
   /* Visually hide an element. */
-  visuallyhidden: {
-    border: 0,
-    clip: 'rect(0 0 0 0)',
-    height: 1,
-    margin: -1,
-    color: '#000',
-    overflow: 'hidden',
-    padding: 0,
-    position: 'absolute',
-    top: 20,
-    width: 1,
-  },
+  visuallyhidden: visuallyHidden,
   /* Styles applied to the pristine label. */
   pristine: {
     'input:focus + &': {

packages/material-ui-lab/src/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StandardProps } from '@material-ui/core';
+import { CSSProperties } from '@material-ui/styles';
+
+export interface VisuallyHiddenProps extends StandardProps<{}, VisuallyHiddenClassKey> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+}
+
+export type VisuallyHiddenClassKey = 'root';
+
+export const visuallyHidden: CSSProperties;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Visually Hidden](https://material-ui.com/components/visually-hidden/)
+ *
+ * API:
+ *
+ * - [VisuallyHidden API](https://material-ui.com/api/visually-hidden/)
+ */
+export default function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;

packages/material-ui-lab/src/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '@material-ui/core/styles';
+
+export const visuallyHidden = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: 1,
+  margin: -1,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: 1,
+};
+
+export const styles = () => ({
+  /* Styles applied to the root element. */
+  root: visuallyHidden,
+});
+
+const VisuallyHidden = React.forwardRef(function VisuallyHidden(props, ref) {
+  const { classes, className, ...other } = props;
+
+  return <span className={clsx(classes.root, className)} ref={ref} {...other} />;
+});
+
+VisuallyHidden.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'MuiVisuallyHidden' })(VisuallyHidden);

packages/material-ui-lab/src/VisuallyHidden/VisuallyHidden.test.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { getClasses } from '@material-ui/core/test-utils';
+import createMount from 'test/utils/createMount';
+import describeConformance from '@material-ui/core/test-utils/describeConformance';
+import VisuallyHidden from './VisuallyHidden';
+
+describe('<VisuallyHidden />', () => {
+  const mount = createMount();
+  let classes;
+
+  before(() => {
+    classes = getClasses(<VisuallyHidden />);
+  });
+
+  describeConformance(<VisuallyHidden />, () => ({
+    classes,
+    inheritComponent: 'span',
+    mount,
+    refInstanceof: window.HTMLSpanElement,
+    skip: ['componentProp'],
+  }));
+});

packages/material-ui-lab/src/VisuallyHidden/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './VisuallyHidden';
+export * from './VisuallyHidden';

packages/material-ui-lab/src/VisuallyHidden/index.js

@@ -0,0 +1 @@
+export { default, visuallyHidden } from './VisuallyHidden';

packages/material-ui-lab/src/index.d.ts

@@ -75,3 +75,6 @@ export * from './TreeView';
 
 export { default as useAutocomplete } from './useAutocomplete';
 export * from './useAutocomplete';
+
+export { default as VisuallyHidden } from './VisuallyHidden';
+export * from './VisuallyHidden';

packages/material-ui-lab/src/index.js

@@ -76,3 +76,6 @@ export * from './TreeView';
 
 // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
+
+export { default as VisuallyHidden } from './VisuallyHidden';
+export * from './VisuallyHidden';