Accessibility: Tour trigger cannot be activated from the keyboard

[joedolson]

Tour trigger cannot be activated in context using keyboard or screen reader. This is relatively insignificant for screen reader users, as long as the tour itself provides sufficient context, but for sighted keyboard users it may be very confusing, since there is a visible indicator that cannot be reached.

The ability to trigger tours by name from the admin bar is very helpful, and does mean that the content is accessible to some groups (see separate issue about the submenu access), but it means that the experience for screen reader users and mouse users is very different. One of the challenges is that communicating what somebody should look for is going to be different. If you were writing instructions, and wrote "click on the pulsing dot to the left of "Make WordPress.org", then that instruction is entirely useless to a screen reader user or keyboard user, since that is not the location of the control they need to use.

I will also note given the intention to publish this plugin to the plugin directory, not all sites will have the adminbar visible. When it isn't available, those tours will be completely inaccessible - so not making this control keyboard accessible means that you're providing an explicitly inaccessible service for users of the plugin.

[akirk]

We added a Gutenberg block and a shortcode so that site admins can add those to their site if they want to provide the tour for logged out users as well. The tour can then be triggered from those.

But I understand that what you are saying that the pulse should be focussable through keyboard navigation. The way we currently implemented this (we just wrap the tour element with a further one and don't add a new HTML element as the trigger) might make it hard. Thus I wondered if you believe there could be other ways to trigger the tour when on the specific element? I am thinking about a keyboard shortcut that might be explained through a title attribute:

You'd have the keyboard focus on the element that shows a pulse and if you press shift-enter, it would start the tour. And it would say this in the title attribute.

Otherwise, I think our only option would be to change how we add the pulse in the DOM by making it a dedicated element.

[akirk]

I have to backtrack, I was able to implement this here: #41

[joedolson]

I feel like this is over-engineered; is there a reason you can't just create a button instead of creating a div? Based on what I'm seeing, this code will make the div reachable and actionable - though it still needs some additional information to communicate to the screen reader. Detailed comments in review.