Images ROLE changed to “BUTTON” (after update)

Hi, @cdvwporg.

Thanks for reaching out to us. On my end, I’m unable to reproduce the issue. The images on my test site with link set to “none” do not result in a role of “button.” As such, I recommend trying the standard troubleshooting steps to rule out the possibility of a conflict somewhere that might be adding this attribute to your images:

• Deactivate all of your plugins except Elementor. If this solves the problem, gradually activate your plugins one by one, until you spot the plugin that is causing the issue.
• Switch your WordPress theme to Hello Elementor (or another default WordPress theme) temporarily and see if it solves your error.

Let me know if this helps.

Kind Regards,

Maybe I didn’t explain it well.

All this images were inserted long ago and they were being displayed perfectly fine (as simple [NOT clickable] images). After this latest Elementor Update, the role was automaticly changed to “BUTTON”, on all the images inserted via your IMAGE Element.

You visited my site, you can check that the images are now cliackable (but with no link), right?

I was hoeing for some help or at least that someone took a look into it because, for sure, I wasn’t the only one affected by this bug.

Thank you.

I think that others are feeling similar issues:
Toggle element has incorrect ARIA role | www.ads-software.com

Elementor really needs to help us fixing this,.

@cdvwporg this has not happened with any site I have elementor on. No images have been modified to have role=button. The issue I opened is for a different Elementor block — the toggle block.

There are a whole bunch of data properties showing up on your images that I don’t see on any of my sites. There is likely something else involved which is setting all of those.

• This reply was modified 4 months, 4 weeks ago by anphira.

Hi @anphira, thank you for clarifying that.

The weird thing is that it only happened to images inserted with the IMAGE Element.

@aracelil, I just discovered that if I change the resolution – on Elementor – from “FULL” to “CUSTOM”, it solves the problem.

If the ImageS I insert (and inseretd in the past) via your image ELEMENT haVE the resolution set to “FULL” – WITH LINK: NONE – the role changes to BUTTON, as turns the image to clickable.

Hi @cdvwporg,

I’m glad to hear that you found a workaround for the issue.

Upon further inspection, it appears that the image widget in question may not be an Elementor Image widget. Typically, an Elementor Image widget would display as .elementor img in the inspector, but the image widget on the page URL you provided is showing as .archive-content img. This suggests that the image might be coming from another source or plugin.

If you continue to experience issues, could you please provide us with a screen recording that shows how you add the Image widget in both the editor and the frontend? This will help us investigate the issue more thoroughly and identify any potential problems.

Thank you for your understanding and cooperation. If you have any other questions or need further assistance, please let us know.

Kind regards,

@ricav

So (right now), if I simply add a new image to my website via your IMAGE Element:
https://snipboard.io/8lAYzL.jpg
– WITH NO LINK (link:none) –
The role is set to BUTTON and the mouse cursor displays the clickable icon (though it doesn’t do anything, when the image is clicked).

My website was fine but after your latest update all the images that were previously inseretd via this Elementor Element got their code changed to this behaviour (button).
NOTE: If the images were inseretd via HTML box (within Elementor), they didn’t or won’t get affected.

As a work around, I discovered that if I change the Resolution of every affected image to CUSTOM (some were FULL, some others had fixed sizes: LARGE), the problem goes away:
https://snipboard.io/psKghi.jpg

I had already fixed all images but I reverted the first image “águia de Asa Redonda” – from the “page I need help with” LINK, so you can check the problem and inspect the code.
https://snipboard.io/i83R6n.jpg

Thank you

@ricav and @aracelil

Are you planning on replying?

Thank you.

Hello,

I have been trying to replicate the issue on my local host, but was unable to do so. I understand that you have found a solution by changing the image to custom. 

I understand that this is not the way you prefer. As you can see in my image, that tag does not come from Elementor, and reactivate. The basics might help you solve the issue. Something other than Elementor is adding that code to your images in the articles. 

Deactivate the cache plugins, or any server cache and see where the issue is coming from. 

It could be the theme, or some other plugin. Here are a few steps that we can start with to troubleshoot this issue:

1. Clear Caches: Although you mentioned that you have already deactivated your caching plugin, it might still be worth it to clear any remaining caches. This includes your browser cache, server cache (if applicable), and any other caching services you may be using.
2. Version Check: Please ensure you are running the latest versions of WordPress and Elementor. Outdated versions could cause compatibility issues.
3. Theme Switch: Try switching to a default WordPress theme like Twenty Twenty-One to see if the problem persists. This could help identify if there’s a conflict with your current theme.
4. Plugin Conflict Test: It’s great that you’ve already tried deactivating your plugins, but I would suggest reactivating them one by one and checking your site after each one. This could help identify if a specific plugin is causing the issue.

Please let me know if the problem persists after trying these steps, or if you’re unable to carry out any of them. It would also be helpful if you could provide any error messages you’ve seen, or describe in more detail what happens when you try to view your changes live.

Thank you for your patience and cooperation as we work through this. I’m confident we can get your Elementor builder back to normal functionality.

Best,

• This reply was modified 4 months, 2 weeks ago by Joel.

Dear @joelsm and @aracelil + @ricav

Please read my previous message.

That was NOT the problematic image I left, with that issue.
It is THIS IMAGE:
https://snipboard.io/i83R6n.jpg

If you really want to help, please read carefuly my last post.

Thank you.

Hello @cdvwporg ,

Thank you for getting back to us.

I was able to see the issue. But this does not seem to be added by Elementor as the issue cannot be replicated.

I noticed that your site is being loaded as a static cached content.

Please try clearing all the cache and deactivate the all the optimization plugins and see how it goes.

SS: https://imgur.com/YerkKrl

Best Regards

We shall be closing this topic due to inactivity. Please feel free to open a new topic if you have any other questions.

I was experiencing the same issue, which as @cdvwporg noted, only started happening recently.

Disabling Jetpack > Settings > Writing > Media > Display images in full-screen carousel (when available) resolved the issue for me. The image(s) affect were using the Single Image and Text Block blocks, so I don’t know why they were affected.

Something the Elementor team may want to investigate further?

Edit: I just realized the build I’m working on uses the WPBakery plugin (I use Elementor on some sites as well). Looks like this may be a Jetpack problem, not a website builder problem.

• This reply was modified 2 months, 3 weeks ago by Matt Rock.