Make getFeed work in IE11 and Edge

[afercia]

Summary

This PR can be summarized in the following changelog entry:

• Fixes parsing of feeds in Internet Explorer 11

Relevant technical choices:

• uses Wicked Good XPath for browsers that don't support XPath evaluation (IE11), for more details see their documentation. I'm not an expert in XPath parsing in JS, but it works. /Cc @atimmer @herregroen
• adds a real dashboard widget working example in the demos

Test instructions

Updated instructions:

• at the moment, this PR can't be tested in the standalone app because of https://github.com/Yoast/YoastSEO.js/issues/2086
• if you want to test it there, you need to downgrade yoastseo to v1.43.0 in the package.json

Test in the plugin

• first, test on release-yoast-seo/9.5
• go to the WP dashboard and observe in IE11 the Yoast dashboard widget doesn't show the posts from the feed
• go in the Courses page and observe in IE11 the page is blank
• in Edge, the Courses page shows the cards with missing content
• see in the IE11 console the error [object Error] and expand it for more details: TypeError: Object doesn't support property or method 'createNSResolver'

Switch the plugin to the 11935-get-feed-ie11-edge branch (see https://github.com/Yoast/wordpress-seo/pull/11968) and yarn link this yoast-component PR to the plugin:

• build the JS: grunt build:js && grunt webpack:buildProd

• verify the dashboard widget shows the content parsed from the feed

• verify the "Read more like this ..." link at the bottom has a link to yoast.com with tracking code

• you may need to flush the transients, if you're using VVV:

  vagrant ssh
  cd /srv/www/wordpress-develop/public_html/
  wp transient delete-all

• verify the Courses page shows the content parsed from the feed in IE11 and Edge

• in both the dashboard widget and the Courses page, verify all the links that have target="_blank" don't have a rel="noopener noreferrer" attribute and do have the a11y message "Opens in a new. browser tab"

Note: the Courses page layout is broken in IE11 because the current CSS grid implementation doesn't work in this browser. Will be addressed separately.

Screenshots from IE11:

(as said, the broken layout will be addressed in https://github.com/Yoast/wordpress-seo/issues/11953 )

Fixes https://github.com/Yoast/wordpress-seo/issues/11935 Fixes https://github.com/Yoast/wordpress-seo/issues/11073

[andizer]

CR Done 👍

[afercia]

Seems there are additional issues with Edge, where each feed item get parsed but many of the item elements are undefined (which can also explain why the cars 🚗 cards look "empty" in Edge, see https://github.com/Yoast/wordpress-seo/issues/11953#issuecomment-450953569):

At the moment, I have no idea what's going on.

[afercia]

Moving back to development as the Edge issue needs more investigation, and some help 🙂

[afercia]

Re: the Edge problem: after an insane amount of time spent investigating on this, turns out in Edge getElementsByTagName doesn't recognize namespaces, at least in some cases. It was introduced here to check for the existence of an element: https://github.com/Yoast/yoast-components/commit/aa87a129c6f0bfc2aff9c4a542f1693636bc11e6

What's happening is:

• in the Courses feed, Edge doesn't recognize all the elements with a colon (namespace) in their name, for example: <content:encoded>
• removing the getElementsByTagName check makes things work again
• what is very weird though, is that in the dashboard widget feed, Edge is perfectly able to get <content:encoded>
• I've verified this by just replacing the feed URL in the courses overview
• my guess is there's a difference in the two feeds that triggers something in Edge, suspect: the declared xml namespaces at the top of the feed are different

[afercia]

Additionally, in the WordPress dashboard widget the last link has no href as seems getFeedMeta() is not able to parse /rss/channel/link (not even /rss/channel/title and /rss/channel/description):

[Edit]: turns out the cause for this is simple: getElementsByTagName() can't recognize an element with a passed tagname of /rss/channel/link ...

[afercia]

Last commit re-implements the check for element existence but this time using XPath count().

However, worth noting a few things:

This works if the element doesn't exist or the XPath expression is malformed in the part that represents the element for example: getXPathText( "child::content:XYZencoded", parsed, snapshot, nsResolver );

It doesn't work if the malformed part is the namespace part: it will throw a DOMException, for example: getXPathText( "child::XYZcontent:encoded", parsed, snapshot, nsResolver );

Regardless, I'm not sure why we want to check for the elements existence in the first place. We're passing these elements to React (unless we're using this in other places too): if the element doesn't exist this method was already returning undefined (note: I've changed it to null) so React won't render anything.

Worth also noting some of the components that use this, have required properties: if the element is missing, React will throw a warning. /Cc @herregroen

[afercia]

Changed console.log to console.error for both the Dashboard widget and Courses getFeed examples.

Worth noting these examples just re-use the code that's used in wordpress-seo, where console.log is still used. Discussed a bit with @IreneStr and maybe it would be better to display some useful message to users when the feeds can't be parsed. This should be addressed separately though.

[IreneStr]

2nd CR 👍

[Dieterrr]

Acceptance done 👍 Everything works as advertised :) Styling indeed still broken in IE, in Edge is fine.

@afercia Thanks for the very clear PR and instructions!