Not accessible: No option to change the focus to element at top of page, no way to keyboard select the div

[outdoorsman]

The problem

I'm working on a website that requires keyboard navigation and screen reader compatibility. The site must be accessible. But there are a few things I've found that I don't know if vanilla-back-to-top supports yet... or at least I couldn't find explanations of how to deal with yet.

1. Focus doesn't change: There's currently no way to choose and id or other element to change the focus to when clicking on the back to top button. That means that focus remains at the bottom of the page so when a user hits tab the next thing focus goes to is likely the tabs on your browser instead of the top of the webpage somewhere like a keyboard navigation user would expect. Here's one example, not a good one but at least an example.
2. Can't trigger with keyboard: I haven't found a way to select the back to top button with a keyboard yet. This is usually done with the enter or spacebar key.

My code

Here's the code I'm currently using to initialize this. Note I added aria-labelledby so screen readers will announce the text in title.

    addBackToTop({
        backgroundColor: 'rgba(101, 105, 80, 1)',
        cornerOffset: '15', // px
        diameter: '45', // px
        innerHTML: `
                    <div aria-labelledby="back-to-top-title" role="link" tabindex="0">
                        <svg viewBox="0 0 24 24">
                            <title id="back-to-top-title">Scroll to top of page</title>
                            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                        </svg>
                    </div>
                    `,
        textColor: '#fff'
    });