[EuiSkipLink] Better handling of dynamically rendered content

[cee-chen]

Summary

I spiked out adding an EuiSkipLink to Kibana in elastic/kibana@5267bc4, but unfortunately ran into multiple issues with the skip link not working as expected.

The problem arises with how Kibana progressively and dynamically renders its layout, and EuiSkipLink storing "valid" IDs/selectors in state. What happens is that the skip link renders on initial load when the header is rendered but the app/content isn't yet loaded. The destinationalEl is stored as null and clicks end up doing nothing even after the main content actually loads in.

The fix is to not store valid destination checks in state but instead run them on every click. This is potentially a very minor microperf hit, but not significant by any means (the number of clicks on this link will be relatively trivial/one-time) especially compared to ensuring the component works as intended.

QA

Regression testing

• https://eui.elastic.co/pr_6613/#/utilities/accessibility#skip-link still works as expected
• Actual EUI skip link still works as expected

General checklist

• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6613/

[1Copenut]

👍 Works well in local testing on Safari + Firefox. I think switching the useEffect out for a click handler is a worthwhile tradeoff for wider adoption and better fault tolerance.