Add "Skip to content" button

[andrico1234]

Description

I've added a button inside of Layout.tsx that only displays when the first action a user performs on a RA site is pressing the tab button.

This moves the focus into the main content of the website, avoiding having to tab through the top and side menus.

While the functionality is complete, I'm going to write Cypress tests for this functionality.

Notes:

Because navigating to anchors via the # didn't seem to work nicely with HashRouter, I had to install an node module that exports a custom link. Here's a link to the discussion

Fortunately the module has no dependencies, and it works out of the box.

I implementing this component similarly to how it's written inside of the Material-UI repo. You can view their implementation here

skip-navigation-smol.mov

[fzaninotto]

Awesome!

I'm a bit concerned by the fact that https://github.com/rafgraph/react-router-hash-link only works with BrowserRouter. And I think that, since you know the target element is not focusable (it's a div), you can replicate react-router-hash-link's focus management inside an onClick in the button without using a Link. This would a allow to remove the dependency.

[andrico1234]

@fzaninotto

Good shout, I managed to get rid of the hash-link package by mimicking their implementation. If no element is found from the getElementById function, then I just do nothing. I imagine this would only happen if someone passes through custom routes. What should the expected behaviour be in this scenario, a simple console.warn?

[djhi]

What should the expected behaviour be in this scenario, a simple console.warn?

Yes and only in development mode please.

[djhi]

Thanks!

[djhi]

What's missing? The PR title is still prefixed with [WIP]

[andrico1234]

I had trouble in the Cypress test. Specifically when it came to determining the focus position after clicking 'Skip to content' button. It seems that because divs don't have focus, I can't use the cy.focused() to check to see if #main-content has focus.

Other than that everything else is done. I'll leave it with you folks to determine whether enough's here to merge in, or whether you want a more comprehensive test included.

[fzaninotto]

Do you mind rebasing on the latest commit of the next branch?

[andrico1234]

I fudged the rebase a little! I'll try and revert

[andrico1234]

closing in favour of: #5804