Browser: Any
OS: Windows
When there is at least one element inside a Popup, that contains the inert-attribute it breaks the focus trap of said Popup.
inert attribute:
Hi,
I’ve tested this by adding basic text and form elements to the popup. I’ve added the “inert” attribute to the basic text, but when I’m tabbing through, the focus is still trapped inside the popup.
What is you structure in the popup, can you replicate it with just this?
{"content":[{"id":"csmdah","name":"section","parent":0,"children":["heetmg"],"settings":{}},{"id":"heetmg","name":"container","parent":"csmdah","children":["qihlew","uhcdsg"],"settings":[]},{"id":"qihlew","name":"text-basic","parent":"heetmg","children":[],"settings":{"text":"basic popup<br>","_attributes":[{"id":"fphjjv","name":"inert"}]}},{"id":"uhcdsg","name":"form","parent":"heetmg","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"fea16e"},{"type":"email","label":"Email","placeholder":"Your Email","required":true,"id":"110ac7"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"e9eef3"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Bricks","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you."}}],"source":"bricksCopiedElements","sourceUrl":"https://bricks.local","version":"1.10.3","globalClasses":[],"globalElements":[]}
1 Like
Hi there,
I can replicate that it is working with your code. Try mine and you should see the problem.
{"content":[{"id":"eggkkc","name":"section","parent":0,"children":["yijcqa","ioaezo","dackpe"],"settings":{}},{"id":"yijcqa","name":"container","parent":"eggkkc","children":["yufdwj"],"settings":{}},{"id":"wcqppt","name":"text-basic","parent":"ioaezo","children":[],"settings":{"text":"basic popup","tag":"custom","customTag":"button"}},{"id":"yufdwj","name":"form","parent":"yijcqa","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"fea16e"},{"type":"email","label":"Email","placeholder":"Your Email","required":true,"id":"110ac7"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"e9eef3"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Bricks","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you."}},{"id":"ioaezo","name":"container","parent":"eggkkc","children":["wcqppt"],"settings":{"_attributes":[{"id":"tacowb","name":"inert"}]}},{"id":"dackpe","name":"button","parent":"eggkkc","children":[],"settings":{"text":"Close Popup","style":"primary","tag":"button"}}],"source":"bricksCopiedElements","sourceUrl":"https://wohlerseichen.local","version":"1.10.3","globalClasses":[],"globalElements":[]}
I put a text-element with the HTML-tag of “button” inside a container. This Container has the attribute of “inert”. Notice that you can tab up to the inert-Container. The “Close Popup”-button won’t get registered inside the focus-trap. If you put the inert-Container before the form-Container inside the structure panel, nothing will be focusable.
Also notice that the focus-trap doesn’t allow us to tab back to the start. Normally it’s a loop that focuses the first item, after the last one.
Hope this explanation helps.
Cheers,
Suat
Hi @UserfreundSuat,
you are right. I can reproduce the issue you discovered and I’ll add it to our internal bug tracker.
We will update this thread once we fix it.
Best regards,
M
Hi guys,
We’ve fixed this issue in Bricks 1.11 BETA, now available as a manual download (Bricks – Account)
Please let us know if you are still experiencing issues.
You can see the full changelog here: Bricks 1.11 Changelog – Bricks
As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.
Best regards,
Matej