Skip to content

Commit e6341a8

Browse files
committed
Update readme
1 parent ba413a5 commit e6341a8

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

README.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,14 @@ const MyComponent = () => (
107107
108108
## Focus Management
109109
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.
110+
`react-router-hash-link` attempts to recreate the native browser focusing behavior as closely as possible.
111111
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.
112+
The browser native behavior when clicking a hash link is:
113+
- If the target element is not focusable, then focus is _moved_ to the target element, but the target element is not focused.
114+
- If the target element is focusable (interactive elements and elements with a `tabindex`), then the target element is focused.
115+
116+
To recreate this `react-router-hash-link` does the following:
117+
- For non-focusable 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.
118+
- For focusable elements, it calls `element.focus()` and leaves focus on the target element.
119+
120+
Note that you may find it useful to leave focus on non-interactive elements (by adding a `tabindex`) to augment the navigation action with a visual focus indicator.

0 commit comments

Comments
 (0)