> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonui/advances/focusvisible.md).

# FocusVisible

Implements a behavior similar to the CSS `:focus-visible` pseudo class, for browsers that are not supporting it yet. It follows the Chrome implementation, checking for a pointer device rather than a keyboard event.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { FocusVisible } from '@aragon/ui'

function App() {
  return (
    <FocusVisible>
      {({ focusVisible, onFocus }) => (
        <Child
          focusVisible={focusVisible}
          onFocus={onFocus}
          {...props}
        />
      )}
    </FocusVisible>
  )
}
```