feat(visually-hidden): add VisuallyHidden component

packages/visually-hidden/src/createVisuallyHidden.ts → packages/visually-hidden/src/createVisuallyHidden.tsx

@@ -17,14 +17,23 @@
 
 import { createFocus } from "@solid-aria/interactions";
 import { access, isObject, MaybeAccessor } from "@solid-primitives/utils";
-import { createSignal, JSX, mergeProps } from "solid-js";
+import { Component, createSignal, JSX, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
 
-interface AriaVisuallyHiddenProps {
+type ElementType = keyof JSX.IntrinsicElements | Component<any>;
+
+interface AriaVisuallyHiddenProps extends JSX.DOMAttributes<any> {
   /**
    * Whether the element should become visible on focus, for example skip links.
    */
   isFocusable?: MaybeAccessor<boolean | undefined>;
 
+  /**
+   * The element type for the container.
+   * @default "div"
+   */
+  elementType?: ElementType;
+
   /**
    * Additional style to be passed to the element.
    */
@@ -86,3 +95,15 @@ export function createVisuallyHidden(props: AriaVisuallyHiddenProps = {}): Visua
 
   return { visuallyHiddenProps };
 }
+
+export function VisuallyHidden(props: AriaVisuallyHiddenProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, elementType = "div", isFocusable, style, ...otherProps } = props;
+  const { visuallyHiddenProps } = createVisuallyHidden(props);
+
+  return (
+    <Dynamic component={elementType} {...mergeProps(otherProps, visuallyHiddenProps)}>
+      {children}
+    </Dynamic>
+  );
+}

packages/visually-hidden/test/VisuallyHidden.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 Solid Aria Working Group.
+ * MIT License
+ *
+ * Portions of this file are based on code from react-spectrum.
+ * Copyright 2020 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { render, screen } from "solid-testing-library";
+
+import { VisuallyHidden } from "../src";
+
+function Example(props: any) {
+  return <VisuallyHidden data-testid="example" {...props} />;
+}
+
+describe("VisuallyHidden", () => {
+  it("should create a div", async () => {
+    render(() => <Example />);
+
+    const el = screen.getByTestId("example");
+    expect(el.tagName).toBe("DIV");
+  });
+
+  it("should create a span", async () => {
+    render(() => <Example elementType={"span"} />);
+
+    const el = screen.getByTestId("example");
+    expect(el.tagName).toBe("SPAN");
+  });
+});