How to add :focus to a group action?

Hello everybody!

I’m looking to improve the accessibility of my application, and I wanted to make keyboard navigation possible (I didn’t find this topic anywhere).

I believe that many of you use the Group element for action, and in this element there is no :focus property, as there is in the Button. Could anyone tell me how to add it?

Hey @kauesantosbr

What do you have in mind? Why you need to focus in a group? What behavior are you expecting?

@rpetribu I use Group element for many actions like Custom Checkbox, Radio Button, Button with SVG text and icon, etc.

Maybe this is the problem? Should I create everything with Bubble’s own components for :focus to work?

@rpetribu Did you understand my need?

Yes… I think so…
Don’t know how you can achive this in Bubble.
Maybe with JavaScript…

Take a look in this plugin:

It’s a start…

@rpetribu
I tried these plugins but none of them worked. I think it can only be solved with code.

Don’t be skeptical :sweat_smile:.
You just need a little touch of imagination and understanding of how Bubble works…
Look what I made for you :wink:

Editor here.

@rpetribu
This seems to me to have many conditionals and to be more complex. I was thinking about something more optimized, as I need to apply it to many elements and pages.

Thank you for your help

This topic was automatically closed after 70 days. New replies are no longer allowed.