VisuallyHidden

packages/actify/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,13 +1,15 @@
+import { VisuallyHiddenProps, useVisuallyHidden } from 'react-aria'
+
 import React from 'react'
-import styles from './actify.module.css'
+import styles from './visually-hidden.module.css'
 
-interface CompProps {
-  as?: keyof React.JSX.IntrinsicElements
+interface Props extends VisuallyHiddenProps {
+  as?: keyof HTMLElementTagNameMap | React.ElementType
 }
-const VisuallyHidden: React.FC<
-  CompProps & React.HTMLAttributes<HTMLOrSVGElement>
-> = ({ as: Tag = 'span', ...rest }) => {
-  return <Tag className={styles['visually-hidden']} {...rest} />
+const VisuallyHidden = ({ as: Tag = 'span', ...props }: Props) => {
+  const { visuallyHiddenProps } = useVisuallyHidden(props)
+
+  return <Tag className={styles['visually-hidden']} {...visuallyHiddenProps} />
 }
 
 export { VisuallyHidden }

packages/actify/src/components/VisuallyHidden/actify.module.css → packages/actify/src/components/VisuallyHidden/visually-hidden.module.css

@@ -1,12 +1,12 @@
-.visually-hidden {
-  /* https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss */
-  position: absolute;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-}
+.visually-hidden {
+  /* https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss */
+  position: absolute;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}