search

ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
https://sa11y.netlify.app
Other
280 stars 43 forks source link

TypeError: null is not an object (evaluating 'o.querySelectorAll') #50

Closed skerbis closed 1 year ago

skerbis commented 1 year ago

When trying Version 3.0 Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'o.querySelectorAll')

I'm initializing as simple as possible with: 

    <script>

      Sa11y.Lang.addI18n(Sa11yLangDe.strings);
  const sa11y = new Sa11y.Sa11y({
    checkRoot: "body",
  });
</script>

Full Error: 

caught (in promise) TypeError: Cannot read properties of null (reading 'querySelectorAll')
    at a (sa11y.umd.min.js:1:9537)
    at Object.initializeElements (sa11y.umd.min.js:1:13775)
    at e.Sa11y.checkAll (sa11y.umd.min.js:11:14359)
    at e (sa11y.umd.min.js:11:12806)
adamchaboryk commented 1 year ago

Hi @skerbis,

This isn't enough info to diagnose the problem. Can you share the HTML with me, or a URL?

Please note, if you are using the CDN version - the URL has changed. Since 3.0 uses ES6 modules, there's no need to include sa11y-custom-checks.js in the URL. So please confirm that you are inserting the correct javascript link. Please try the below:

<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@3.0.0/dist/css/sa11y.min.css"/>

<!-- Script -->
<script src="https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.0.0/dist/js/lang/de.umd.js,gh/ryersondmp/sa11y@3.0.0/dist/js/sa11y.umd.min.js"></script>

<!-- Instantiate-->
<script>
  Sa11y.Lang.addI18n(Sa11yLangDe.strings);
  const sa11y = new Sa11y.Sa11y({
    checkRoot: "body",
    // Add props here!
  });
</script>
skerbis commented 1 year ago

I think I've found the problem. When I load the script in <body> it works. The previous Version was able to run in <head>. I think it is not able to find body from head. Am I right?

adamchaboryk commented 1 year ago

Hmm... technically Sa11y only begins checking once the page is fully loaded. Generally, I do advise that the script is only included before the closing </body> tag. Only the CSS should be in the head.

Alternatively, you can try adding defer to the script, to ensure sa11y only runs once the page has fully loaded.

<script defer src="https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.0.0/dist/js/lang/de.umd.js,gh/ryersondmp/sa11y@3.0.0/dist/js/sa11y.umd.min.js"></script>

Let me know if this solves it.

skerbis commented 1 year ago

thanks

adamchaboryk commented 1 year ago

Hi @skerbis, were you able to resolve the issue?

skerbis commented 1 year ago

Yes. Your Idea with defer helped me. Thanks.