feat: Add VisuallyHidden component

packages/reakit-playground/src/__deps/reakit.ts

@@ -16,6 +16,8 @@ export default {
   "reakit/system": require("reakit/system"),
   "reakit/system/SystemProvider": require("reakit/system/SystemProvider"),
   "reakit/system/SystemContext": require("reakit/system/SystemContext"),
+  "reakit/VisuallyHidden": require("reakit/VisuallyHidden"),
+  "reakit/VisuallyHidden/VisuallyHidden": require("reakit/VisuallyHidden/VisuallyHidden"),
   "reakit/Tooltip": require("reakit/Tooltip"),
   "reakit/Tooltip/TooltipState": require("reakit/Tooltip/TooltipState"),
   "reakit/Tooltip/TooltipReference": require("reakit/Tooltip/TooltipReference"),

packages/reakit/.gitignore

@@ -5,6 +5,7 @@
 /ts
 /utils
 /system
+/VisuallyHidden
 /Tooltip
 /Toolbar
 /Tabbable

packages/reakit/src/VisuallyHidden/README.md

@@ -0,0 +1,53 @@
+---
+path: /docs/visually-hidden
+---
+
+# VisuallyHidden
+
+`VisuallyHidden` is a common techinique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
+
+## Installation
+
+```sh
+npm install reakit
+```
+
+Learn more in [Get started](/docs/get-started).
+
+## Usage
+
+<!-- eslint-disable import/no-unresolved -->
+
+```jsx
+import { Button } from "reakit/Button";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
+import UniversalAccess from "./UniversalAccess";
+
+function Example() {
+  return (
+    <Button>
+      <VisuallyHidden>Universal Access</VisuallyHidden> <UniversalAccess />
+    </Button>
+  );
+}
+```
+
+## Accessibility
+
+- `VisuallyHidden` has all the styles necessary to hide it from visual clients, but keep it for screen readers.
+
+Learn more in [Accessibility](/docs/accessibility).
+
+## Composition
+
+- `Separator` uses [Box](/docs/box).
+
+Learn more in [Composition](/docs/composition#props-hooks).
+
+## Props
+
+<!-- Automatically generated -->
+
+### `VisuallyHidden`
+
+No props to show

packages/reakit/src/VisuallyHidden/VisuallyHidden.ts

@@ -0,0 +1,47 @@
+import { unstable_createComponent } from "../utils/createComponent";
+import { mergeProps } from "../utils/mergeProps";
+import { unstable_useProps } from "../system/useProps";
+import { BoxOptions, BoxProps, useBox } from "../Box/Box";
+import { Keys } from "../__utils/types";
+import { unstable_useOptions } from "../system";
+
+export type VisuallyHiddenOptions = BoxOptions;
+
+export type VisuallyHiddenProps = BoxProps;
+
+export function useVisuallyHidden(
+  options: VisuallyHiddenOptions = {},
+  htmlProps: VisuallyHiddenProps = {}
+) {
+  options = unstable_useOptions("VisuallyHidden", options, htmlProps);
+
+  htmlProps = mergeProps(
+    {
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: "1px"
+      }
+    } as typeof htmlProps,
+    htmlProps
+  );
+
+  htmlProps = unstable_useProps("VisuallyHidden", options, htmlProps);
+  htmlProps = useBox(options, htmlProps);
+  return htmlProps;
+}
+
+const keys: Keys<VisuallyHiddenOptions> = [...useBox.__keys];
+
+useVisuallyHidden.__keys = keys;
+
+export const VisuallyHidden = unstable_createComponent({
+  as: "div",
+  useHook: useVisuallyHidden
+});

packages/reakit/src/VisuallyHidden/__tests__/VisuallyHidden-test.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { render } from "react-testing-library";
+import { VisuallyHidden } from "../VisuallyHidden";
+
+test("render", () => {
+  const { baseElement } = render(<VisuallyHidden />);
+  expect(baseElement).toMatchInlineSnapshot();
+});

packages/reakit/src/VisuallyHidden/index.ts

@@ -0,0 +1 @@
+export * from "./VisuallyHidden";

packages/website/src/templates/Docs.tsx

@@ -8,7 +8,7 @@ import {
   usePlaygroundState
 } from "reakit-playground";
 import createUseContext from "constate";
-import * as fa from "react-icons/fa";
+import { FaUniversalAccess } from "react-icons/fa";
 import CoreLayout from "../components/CoreLayout";
 import FiraCodeBold from "../fonts/FiraCode-Bold.woff";
 import FiraCodeLight from "../fonts/FiraCode-Light.woff";
@@ -122,7 +122,10 @@ const { Compiler: renderAst } = new RehypeReact({
             <div>
               <PlaygroundPreview
                 noSystem={noSystem}
-                modules={{ constate: createUseContext, "react-icons/fa": fa }}
+                modules={{
+                  constate: createUseContext,
+                  "./UniversalAccess": FaUniversalAccess
+                }}
                 {...state}
               />
               <PlaygroundEditor mode={mode} maxHeight={maxHeight} {...state} />