WIP: Elements with click Interactions are not accessible

Feature Requests / Improvements
1

URL: Link to a page that illustrates this issue

  1. They are not focusable without manually adding tabindex=0. This obviously should be handled by the builder automatically.
  2. Pressing the Enter key while the element has focus does not trigger the action!!!

Bonus problem #3: You do not offer Focus or Keypress as interaction events.

2

This is my workaround:

/* Make elements with click Interactions accessible */

const clickable_elements = document.querySelectorAll( '[data-interactions*=\'"trigger":"click"\']' );
clickable_elements.forEach( clickable => {
	if ( null === clickable.getAttribute( 'tabindex' ) ) {
		clickable.setAttribute( 'tabindex', 0 );
	}
	clickable.addEventListener( 'keypress', ( event ) => {
		const keys = [ 13, 32 ]; // enter, space
		if ( keys.includes( event.which ) ) {
			event.preventDefault(); // needed for space bar
			clickable.click();
		}
	} );
} );

Update: It is probably better to manually set the HTML Tag to “button” in the case of Bricks’s Button element, but the JavaScript makes allowance for when authors forget that step, and it is still necessary in order to make Icons and other clickable elements accessible via keyboard.

3

Hi @glp,

Thank you for the suggestion. I’ve moved the topic to the Feature Requests / Improvements category, just because it is not a bug - just something that we don’t have implemented. However, seems like a good idea, so I’ve created an improvement task in our task tracker.

As for your bonus question, this would be new implementation - can you add it to the idea board here: Idea board – Bricks

Thank you,
Matej

4

If your feature is not usable in any way by a keyboard user, it is broken. Fixing that is not a “feature request.”

5

Hi @glp,

I understand your reasoning, as sometimes the line between bug and improvement is really thin; however, this is an improvement. A bug would be if the interaction would not fire properly on a mouse click. Something that is not yet implemented (the code for this logic does not exist), cannot be a bug.

Anyway, the task is now in our internal task tracker, and it will be implemented. So overall, it is not that important anymore if the topic is in the Bugs or Feature Requests / Improvements category, it will be handled. And once we implement it, we will update this topic.

Thank you for understanding,
Matej

6

I think it should be obvious that website building tools should not provide default settings and behaviors that do not work without a mouse click or finger tap. There are millions of people who cannot use a mouse to navigate websites. This is the most basic requirement of accessibility.

I am glad the issue will be addressed. I think the most robust solution for the Button element would be that it should use <button> if no HTML tag is manually set, and no Link Type is set or Link Type is “Lightbox Image” or “Lightbox Video”. Ideally, clickable icons would also be <button>, and authors would be encouraged to add an aria label. Cheers.

1 Like