Gantry 5.5.11 and Joomla 4.1 - new accessibility validator does not work in RT theme and causes js error

[marktaylor46]

The new accessibility validator in Joomla 4.1 does not function with Gantry 5 and RT templates - it works fine in casseopia - JS errors shown in the browser console...

Uncaught (in promise) TypeError: this.$root is null findElements http://xxxxxxxxxx/j3/interstellar/media/plg_system_jooa11y/js/jooa11y.min.js?9931091da78ee75ad2889d3f1f1113f6327285d1:1 checkAll http://xxxxxxxxxxe/j3/interstellar/media/plg_system_jooa11y/js/jooa11y.min.js?9931091da78ee75ad2889d3f1f1113f6327285d1:1 doInitialCheck http://xxxxxxxxx/j3/interstellar/media/plg_system_jooa11y/js/jooa11y.min.js?9931091da78ee75ad2889d3f1f1113f6327285d1:1 http://xxxxxxxxxxxxx/j3/interstellar/media/plg_system_jooa11y/js/jooa11y.min.js?9931091da78ee75ad2889d3f1f1113f6327285d1:1 http://xxxxxxxxxxxxx/j3/interstellar/media/plg_system_jooa11y/js/jooa11y.min.js?9931091da78ee75ad2889d3f1f1113f6327285d1:1

[mariantanase]

Probably RT templates are different then Hydrogen, because on my test site with Hydrogen (Gantry 5.5.11), the accessibility validator is working fine, without errors.

[uGE70]

It works fine in Hydrogen, Fluent and Clarity, but I have issues with Callisto and Myriad.

[marktaylor46]

Ok I've spent a lot of time tracking this down...

1. the acessibility plugin has a setting to say what container it should look for which defaults to "main" - you can supposedly change it but I can't find anything else that works...
2. A lot of RT outline layout presets do not have a "main" container on them - that's even true of "fluent" which DOES Fail on the home page - the internal pages are fine because they mostly use the "default" layout preset which does have a main container.

So, in summary, the plugin is looking for

and when it doesn't find it it breaks - I think the plugin should be more robust than it is and this problem should be reported to Joomla.

In the meantime.... if you really want to work around this issue - just put a customhtml particle anywhere on the layout with <main></main> inside it and then the plugin does work.

I hope that helps others.

[uGE70]

Thanks for your help and time. I can confirm an empty main container put anywhere in the page does solve the issue. I didn't find any other selector working even "body".