diff --git a/packages/actify/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/actify/src/components/VisuallyHidden/VisuallyHidden.tsx index ce4661b..6c9c71b 100644 --- a/packages/actify/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/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 -> = ({ as: Tag = 'span', ...rest }) => { - return +const VisuallyHidden = ({ as: Tag = 'span', ...props }: Props) => { + const { visuallyHiddenProps } = useVisuallyHidden(props) + + return } export { VisuallyHidden } diff --git a/packages/actify/src/components/VisuallyHidden/actify.module.css b/packages/actify/src/components/VisuallyHidden/visually-hidden.module.css similarity index 95% rename from packages/actify/src/components/VisuallyHidden/actify.module.css rename to packages/actify/src/components/VisuallyHidden/visually-hidden.module.css index e538b0d..97b508c 100644 --- a/packages/actify/src/components/VisuallyHidden/actify.module.css +++ b/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; +}