AMP Issue when trying to validate AMP Settings

[Andrew de Lisle]

Describe the bug
I'm running Newspack plugin 1.109.0 and Newspack theme 1.69.2. Now i'm getting errors in the AMP settings when it tries to validate the site. I'm using Transitional as the template mode.

Error
Here is the error code that the AMP settings is giving. I've changed the domain name to example.com as i didn't want to add our domain to the issue. But you can see in the text where the error is:
[
{
"url": "https://example.com/",
"type": "is_front_page",
"label": "Homepage",
"amp_url": "https://example.com/?amp=1",
"validation_errors": [
{
"node_name": "script",
"parent_name": "body",
"code": "DISALLOWED_TAG",
"type": "js_error",
"node_attributes": {
"type": "text/javascript",
"id": "newspack-menu-accessibility-js-extra"
},
"text": "\n/* */\n",
"node_type": 1,
"sources": [
{
"type": "theme",
"name": "newspack-theme",
"file": "functions.php",
"line": 420,
"function": "newspack_scripts",
"hook": "wp_enqueue_scripts",
"priority": 10,
"dependency_type": "script",
"extra_key": "data",
"text": "var newspackScreenReaderText = {"open_search":"Open Search","close_search":"Close Search","expand_comments":"Expand Comments","collapse_comments":"Collapse Comments","show_order_details":"Show details","hide_order_details":"Hide details","open_dropdown_menu":"Open dropdown menu","close_dropdown_menu":"Close dropdown menu","is_amp":"1"};",
"handle": "newspack-menu-accessibility"
}
]
},
{
"node_name": "script",
"parent_name": "body",
"code": "DISALLOWED_TAG",
"type": "js_error",
"node_attributes": {
"type": "text/javascript",
"src": "https://example.com/wp-content/themes/newspack-theme/js/dist/menu-accessibility.js?ver=normalized",
"id": "newspack-menu-accessibility-js"
},
"node_type": 1,
"sources": [
{
"type": "theme",
"name": "newspack-theme",
"file": "functions.php",
"line": 420,
"function": "newspack_scripts",
"hook": "wp_enqueue_scripts",
"priority": 10,
"dependency_type": "script",
"handle": "newspack-menu-accessibility"
}
]
}
],
"stale": false,
"error": false,
"validated_url_post": {
"id": 21069,
"edit_link": "https://example.com/wp-admin/post.php?post=21069&action=edit"
}
},
]

[Laurel]

Hi @deLisle!

We did not hide that script behind an is_amp check like the other fallback JavaScript, because it's required to add IDs to the flyout menu to make it accessible, without causing duplication in the mobile menu. The way it's set up now means that you can 'allow' it under AMP's settings.

By default, though, the AMP plugin will still be stripping this JavaScript out on the front-end, so URLs should still be valid AMP (unless there's something else on the post or page that's causing them to be invalid!).

Here's the results for this temporary test site running the latest version of the Newspack theme, and with AMP set to 'Transitional'. I ran the test on https://search.google.com/test/amp, which scans the front-end of the site, so it's reviewing after the AMP plugin has removed the script:

I'm going to close this issue, as it's working as intended, though I get that it's annoying that the in-plugin scan is now reporting this script! As long as the site is set to "Remove" the scripts (which is what the AMP will do by default), they shouldn't be loaded on the front-end. Here's what they'll look like when validating a page's URL using the AMP plugin, with the two scripts coming from the theme marked with the orange paintbrush:

You can try https://search.google.com/test/amp to confirm as well!