Skip to content

Commit 74f9351

Browse files
author
Mike Lumetta
committed
Add brief documentation on how React Router Hash Link handles programmatic focus
1 parent ec51f10 commit 74f9351

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,3 +104,9 @@ const MyComponent = () => (
104104
</div>
105105
);
106106
```
107+
108+
## Focus Management
109+
110+
`react-router-hash-link` attempts to recreate the native browser focusing behavior as closely as possible. For non-interactive elements, it calls `element.focus()` followed by `element.blur()` (using a temporary `tabindex` to ensure that the element can be focused programmatically) so that focus _moves_ to the target element but does not remain on it or trigger any style changes. For interactive elements, it calls `element.focus()` and leaves focus on the target element.
111+
112+
If you would like to leave focus on a non-interactive element - for example, to augment the navigation interaction with a visual focus indicator - you can optionally set a `tabindex` on the target element. `react-router-hash-link` will respect the `tabindex` and leave focus on the target in that case.

0 commit comments

Comments
 (0)