Link to home
Start Free TrialLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

Need to apply focus via keyboard to add to cart button for accessibility.

I've found a really good plugin for online ordering for restaurants. However, there is one major accessibility issue with it.

If you go to this page and only using the keyboard select any item, you'll see that once you get to the modal with add to cart button there is no way to focus it with keyboard.

https://orderdemo.wpwithheart.com/food-items/

Is there a workaround I can apply? Some javascript?

Accessibility is essential or else I can't use this plugin.

I've written to the devs, but just in case they are overwhelmed, I thought I'd see what I can do.
ASKER CERTIFIED SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Alicia St Rose

ASKER

This seems to be working!

I just notified the plugin developer. He'd responded to my post that it would take some time to implement properly.
I found the file and the line to swap.

I'm going to see if there is some collateral damage elsewhere in the plugin from the change. Once I hear back I'll return with points or more elaboration!
Perfect solution! The plugin dev is adding it to the next update!

Thank you!!
Perfect solution! The plugin dev is adding it to the next update!

Cool, glad to know that
Here's some follow up! The solution worked well for the button, focus and keyboard. Unfortunately, it broke the cart quantity editing. So, it turns out just adding href="#" did the trick.

I still think the points are rightfully rewarded based on my actual question. I just wanted to make sure all the details were here in the answer!

Hoppy Easter!!