SkipLink does not work if intended target header is rerendered

[jacknewberry]

We are trying to use SkipLink with its default behaviour, but it does not seem to work unless it is rendered after the target is rendered.

The intention is to include SkipLink in a layout that will wrap every page. We want the 'select the first h1' behaviour rather than customising the target.

This does not seem to work:

function SomeComponent() {
  // does something that causes this component to re-render
  
  return <h1>Get selected</h1>
}

function App() {
  return (<div>
    <SkipLink disableDefaultBehaviour />
    <SomeComponent/>
  </div>)
}

I believe that this does not work because SkipLink only searches for a target when it renders; rather than searching in the onClick handler.

I am suggesting moving the call to getFirstHeadingElement(); inside focusTarget.

I am unsure if this is related this minimalist issue: #242.

It might also be possible to simplify focusing the target by using element.focus() rather than adding tabIndex. This would make it easier to remove the useEffect.

Does this seem like a bug to you? We could consider drafting a PR.

[jacknewberry]

fyi @jonnyroutley