Improved accessibility for many editor page components

Related to #1320

resources/assets/js/components/dropdown.js

@@ -118,8 +118,8 @@ class DropDown {
             }
         });
 
-        // Arrow navigation
-        this.container.addEventListener('keydown', event => {
+        // Keyboard navigation
+        const keyboardNavigation = event => {
             if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
                 this.focusNext();
                 event.preventDefault();
@@ -128,9 +128,14 @@ class DropDown {
                 event.preventDefault();
             } else if (event.key === 'Escape') {
                 this.hide();
+                this.toggle.focus();
                 event.stopPropagation();
             }
-        });
+        };
+        this.container.addEventListener('keydown', keyboardNavigation);
+        if (this.moveMenu) {
+            this.menu.addEventListener('keydown', keyboardNavigation);
+        }
 
         // Hide menu on enter press or escape
         this.menu.addEventListener('keydown ', event => {

resources/assets/js/components/editor-toolbox.js

@@ -23,6 +23,8 @@ class EditorToolbox {
 
     toggle() {
         this.elem.classList.toggle('open');
+        const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
+        this.toggleButton.setAttribute('aria-expanded', expanded);
     }
 
     setActiveTab(tabName, openToolbox = false) {

resources/assets/js/vues/components/dropzone.js

@@ -2,8 +2,8 @@ import DropZone from "dropzone";
 import { fadeOut } from "../../services/animations";
 
 const template = `
-    <div class="dropzone-container">
-        <div class="dz-message">{{placeholder}}</div>
+    <div class="dropzone-container text-center">
+        <button type="button" class="dz-message">{{placeholder}}</button>
     </div>
 `;