Remove JS compatibility code for IE11

client/src/components/Sidebar/modules/MainMenu.tsx

@@ -129,8 +129,7 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
   React.useEffect(() => {
     // Close submenus when user presses escape
     const onKeydown = (e: KeyboardEvent) => {
-      // IE11 uses "Esc" instead of "Escape"
-      if (e.key === 'Escape' || e.key === 'Esc') {
+      if (e.key === 'Escape') {
         dispatch({
           type: 'set-navigation-path',
           path: '',

client/src/entrypoints/admin/comments.js

@@ -94,12 +94,7 @@ window.comments = (() => {
       this.setOnClickHandler(localId);
     }
     onDelete() {
-      // IE11
-      if (!this.node.remove) {
-        this.node.parentNode.removeChild(this.node);
-      } else {
-        this.node.remove();
-      }
+      this.node.remove();
       if (this.unsubscribe) {
         this.unsubscribe();
       }
@@ -275,9 +270,9 @@ window.comments = (() => {
       STRINGS,
     );
 
-    Array.from(
-      formElement.querySelectorAll('[data-component="add-comment-button"]'),
-    ).forEach(initAddCommentButton);
+    formElement
+      .querySelectorAll('[data-component="add-comment-button"]')
+      .forEach(initAddCommentButton);
 
     // Attach the commenting app to the tab navigation, if it exists
     const tabNavElement = formElement.querySelector('[data-tab-nav]');

client/src/entrypoints/admin/core.js

@@ -718,31 +718,29 @@ $(document).ready(initDropDowns);
 wagtail.ui.initDropDowns = initDropDowns;
 wagtail.ui.DropDownController = DropDownController;
 
-// provide a workaround for NodeList#forEach not being available in IE 11
-function qsa(element, selector) {
-  return [].slice.call(element.querySelectorAll(selector));
-}
-
 // Initialise button selectors
 function initButtonSelects() {
-  qsa(document, '.button-select').forEach((element) => {
+  document.querySelectorAll('.button-select').forEach((element) => {
     const inputElement = element.querySelector('input[type="hidden"]');
-    qsa(element, '.button-select__option').forEach((buttonElement) => {
-      buttonElement.addEventListener('click', (e) => {
-        e.preventDefault();
-        inputElement.value = buttonElement.value;
 
-        qsa(element, '.button-select__option--selected').forEach(
-          (selectedButtonElement) => {
-            selectedButtonElement.classList.remove(
-              'button-select__option--selected',
-            );
-          },
-        );
+    element
+      .querySelectorAll('.button-select__option')
+      .forEach((buttonElement) => {
+        buttonElement.addEventListener('click', (e) => {
+          e.preventDefault();
+          inputElement.value = buttonElement.value;
 
-        buttonElement.classList.add('button-select__option--selected');
+          element
+            .querySelectorAll('.button-select__option--selected')
+            .forEach((selectedButtonElement) => {
+              selectedButtonElement.classList.remove(
+                'button-select__option--selected',
+              );
+            });
+
+          buttonElement.classList.add('button-select__option--selected');
+        });
       });
-    });
   });
 }
 

client/src/entrypoints/admin/lock-unlock-action.js

@@ -2,7 +2,7 @@
 
 function LockUnlockAction(csrfToken, next) {
   const actionElements = document.querySelectorAll('[data-locking-action]');
-  [...actionElements].forEach((buttonElement) => {
+  actionElements.forEach((buttonElement) => {
     buttonElement.addEventListener(
       'click',
       (e) => {

client/src/entrypoints/admin/workflow-action.js

@@ -15,7 +15,8 @@ function ActivateWorkflowActionsForDashboard(csrfToken) {
   const workflowActionElements = document.querySelectorAll(
     '[data-workflow-action-url]',
   );
-  [...workflowActionElements].forEach((buttonElement) => {
+
+  workflowActionElements.forEach((buttonElement) => {
     buttonElement.addEventListener(
       'click',
       (e) => {
@@ -68,7 +69,8 @@ function ActivateWorkflowActionsForEditView(formSelector) {
   const workflowActionElements = document.querySelectorAll(
     '[data-workflow-action-name]',
   );
-  [...workflowActionElements].forEach((buttonElement) => {
+
+  workflowActionElements.forEach((buttonElement) => {
     buttonElement.addEventListener(
       'click',
       (e) => {

client/src/includes/initSubmenus.js

@@ -14,12 +14,12 @@ const initSubmenus = () => {
   );
   const activeClass = 'submenu-active';
 
-  [...subMenuTriggers].forEach((subMenuTrigger) => {
+  subMenuTriggers.forEach((subMenuTrigger) => {
     subMenuTrigger.addEventListener('click', (clickEvent) => {
       const submenuContainer = subMenuTrigger.parentNode;
 
       primaryNavContainer.classList.remove(activeClass);
-      [...subMenuTriggers].forEach((sm) => sm.classList.remove(activeClass));
+      subMenuTriggers.forEach((sm) => sm.classList.remove(activeClass));
 
       primaryNavContainer.classList.toggle(activeClass);
       submenuContainer.classList.toggle(activeClass);
@@ -35,8 +35,7 @@ const initSubmenus = () => {
       });
 
       document.addEventListener('keydown', (e) => {
-        // IE11 uses "Esc" instead of "Escape"
-        if (e.key === 'Escape' || e.key === 'Esc') {
+        if (e.key === 'Escape') {
           primaryNavContainer.classList.remove(activeClass);
           submenuContainer.classList.remove(activeClass);
         }

docs/extending/extending_draftail.rst

@@ -315,7 +315,7 @@ To fully complete the demo, we can add a bit of JavaScript to the front-end in o
 
 .. code-block:: javascript
 
-    [].slice.call(document.querySelectorAll('[data-stock]')).forEach((elt) => {
+    document.querySelectorAll('[data-stock]').forEach((elt) => {
         const link = document.createElement('a');
         link.href = `https://finance.yahoo.com/quote/${elt.dataset.stock}`;
         link.innerHTML = `${elt.innerHTML}<svg width="50" height="20" stroke-width="2" stroke="blue" fill="rgba(0, 0, 255, .2)"><path d="M4 14.19 L 4 14.19 L 13.2 14.21 L 22.4 13.77 L 31.59 13.99 L 40.8 13.46 L 50 11.68 L 59.19 11.35 L 68.39 10.68 L 77.6 7.11 L 86.8 7.85 L 96 4" fill="none"></path><path d="M4 14.19 L 4 14.19 L 13.2 14.21 L 22.4 13.77 L 31.59 13.99 L 40.8 13.46 L 50 11.68 L 59.19 11.35 L 68.39 10.68 L 77.6 7.11 L 86.8 7.85 L 96 4 V 20 L 4 20 Z" stroke="none"></path></svg>`;