Field guide focus bug

[srallen]

Package

Feature or Issue Description
Comment from #637

Testing this out with the keyboard, there's a weird focus problem that might be a Grommet bug. Activate the field guide button from the keyboard. If you press Esc the field guide closes, as expected. Open it again, from the keyboard, and tab to a link. Activate the link with Enter. I'm finding that Esc doesn't do anything from the item page and I have to close the field guide with the mouse. Grommet might be losing the keyboard focus when the guide's content changes.

[eatyourgreens]

I've looked into this some more. It's not a Grommet bug. We're preventing default behaviour on a link, which means we need to then create the link behaviour ourselves, including the change in focus on click.

front-end-monorepo/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js

Lines 41 to 45 in 9e5e29e

	onClick (event, itemIndex) {
	const { setActiveItemIndex } = this.props
	event.preventDefault()
	setActiveItemIndex(itemIndex)
	}

When I click a link in the field guide item menu, the link retains focus after the content changes and I have to hit Tab before I can interact with the newly opened item content. This is easiest to see if you turn on VoiceOver (cmd-F5) so that the active element has a black border.

Here's some random thoughts I had about fixing this, and improving the markup of the field guide:

• Mark up the content pane of the field guide modal as a live region. When I click a link, the change in content would then be announced immediately by VoiceOver, without needing any further action on my part.
• Change the Back button on an item page into a Back link with href pointing to the field guide item menu.
• Mark up the list of item links as a <nav> element.
• Maybe autofocus the back button/link when an item opens. The a11y linter warns that autofocus should not be used so this one might need testing to see if it makes navigation more confusing, rather than less.

It also occurred to me that what we're trying to build here, in JavaScript, is a simple browser for a set of pages so maybe, longer term, the better solution is to open the field guide in a new browser window and let the browser do all this work for us, rather than trying to code it ourselves.

[srallen]

@eatyourgreens or could we revert back to using a button?

[eatyourgreens]

You'll still have to code that button to behave like a link, plus maybe add a role to it so that it's announced as a link.

[srallen]

I'll try a few things out here. I think we'll have to fake it regardless. The classifier is meant to be able to be dropped in into an app or be stand alone if necessary. I don't think the classifier should be doing actual browser navigation?

[eatyourgreens]

That's why I'm thinking the field guide should maybe be a document that opens in a new window, so we can just link to the project field guide from the classifier.

[eatyourgreens]

We could use fragment identifiers to navigate the Field Guide, similar to how we’re using them for the Sign In and Register modals. At the moment, they’re being ignored because of the event.preventDefault() in the code.

[srallen]

#637 is fairly large now, could that PR be merged and this issue be addressed in a refactor?

[goplayoutside3]

...Activate the link with Enter. I'm finding that Esc doesn't do anything from the item page

I can't replicate this bug anymore.