Custom tabindex needs to be clickable via enter key

Question:
How do I make sure a container is clickable via the keyboard?

Product:
WIX Studio

What are you trying to achieve:
I’ve created a series of containers that, via code, act like buttons. I’ve included them in the tab-index. BUT when I tab to them, I cannot use the ENTER key to click them.

What have you already tried:
I’m not sure where to begin.

Additional information:
Here’s a screenshot. The screenshot didn’t capture my cursor which is hovering over the first button. The 2nd button on the left has been tabbed to.

Hi, eglass !!

Wouldn’t it be useful to detect the Enter key input with this API? :upside_down_face:

I see. However, onKeyPress or onKeyDown don’t work on a box element.
Is there another way to make it a button like element? See image below.

NOTE: The item with the light blue boarder is how it appears onFocus, and the darker blue and rounded border is on hover.

Hi, @eglass !!

Sorry about that—I think I totally misunderstood things. :melting_face: I’m honestly not very familiar with accessibility, but when I saw eglass’s question, I thought it might be a good chance to learn something new.

Right now, I think I’ve understood that you can’t use keyboard input events on box elements, and that you can’t really set tabIndex on container elements. I was also wondering if the Accessibility Wizard might help somehow, but I ended up putting that idea on hold—it started to feel like maybe I could get things working without it.

So, based on what I tried out, here’s what I’d suggest:
Why not just try doing the same thing with a regular button element? :thinking:
I only tested this in Google Chrome, but it seems like button elements are automatically included in the tab order, even if you don’t do anything special. If that’s the case, then maybe it’s easier to just style the button so it looks like a container.

In Wix Studio, there’s this button element that has a light gray dashed border with a “+” symbol in the middle—you might’ve seen it. That one seems perfect for making a button that feels kind of like a container. You can control the icon size nicely, and you can even break the text into lines wherever you want.

Once you’ve added that kind of styled button, you can just write a little code like this. In my Chrome test, the .onClick() event fired when I pressed Enter. So you can tab to the button, press Enter, and it works.

$w("#button1").onClick(()=>{
	console.log("Enter!!")
});

Then, you can just put whatever you want inside the click handler. You could even use it to trigger a page transition or something like that. :innocent:

Of course, you can also change the button’s background color on hover and round the corners! :laughing: