Made another mass of accessibility improvements

- Set proper semantic tags for main parts of content.
- Removed focus-trap from tag manager/autosuggest.
- Set better accessibility labelling on tag manager.
- Updated collapsible sections to be keyboard navigatable.
- Improved input focus styling to better fit theme.
- Updated custom styled file picker to be accessible via keyboard.

Related to #1320

resources/assets/js/components/collapsible.js

@@ -18,11 +18,13 @@ class Collapsible {
 
     open() {
         this.elem.classList.add('open');
+        this.trigger.setAttribute('aria-expanded', 'true');
         slideDown(this.content, 300);
     }
 
     close() {
         this.elem.classList.remove('open');
+        this.trigger.setAttribute('aria-expanded', 'false');
         slideUp(this.content, 300);
     }
 

resources/assets/js/vues/components/autosuggest.js

@@ -6,6 +6,7 @@ const template = `
             @input="inputUpdate($event.target.value)" @focus="inputUpdate($event.target.value)"
             @blur="inputBlur"
             @keydown="inputKeydown"
+            :aria-label="placeholder"
         />
         <ul class="suggestion-box" v-if="showSuggestions">
             <li v-for="(suggestion, i) in suggestions"
@@ -66,23 +67,23 @@ const methods = {
     },
 
     inputKeydown(event) {
-        if (event.keyCode === 13) event.preventDefault();
+        if (event.key === 'Enter') event.preventDefault();
         if (!this.showSuggestions) return;
 
         // Down arrow
-        if (event.keyCode === 40) {
+        if (event.key === 'ArrowDown') {
             this.active = (this.active === this.suggestions.length - 1) ? 0 : this.active+1;
         }
         // Up Arrow
-        else if (event.keyCode === 38) {
+        else if (event.key === 'ArrowUp') {
             this.active = (this.active === 0) ? this.suggestions.length - 1 : this.active-1;
         }
-        // Enter or tab keys
-        else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) {
+        // Enter key
+        else if ((event.key === 'Enter') && !event.shiftKey) {
             this.selectSuggestion(this.suggestions[this.active]);
         }
         // Escape key
-        else if (event.keyCode === 27) {
+        else if (event.key === 'Escape') {
             this.showSuggestions = false;
         }
     },

resources/assets/js/vues/tag-manager.js

@@ -1,7 +1,7 @@
 import draggable from 'vuedraggable';
 import autosuggest from './components/autosuggest';
 
-let data = {
+const data = {
     entityId: false,
     entityType: null,
     tags: [],
@@ -10,7 +10,7 @@ let data = {
 const components = {draggable, autosuggest};
 const directives = {};
 
-let methods = {
+const methods = {
 
     addEmptyTag() {
         this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)});

resources/assets/sass/_forms.scss

@@ -19,6 +19,10 @@
   &.disabled, &[disabled] {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
   }
+  &:focus {
+    border-color: var(--color-primary);
+    outline: 1px solid var(--color-primary);
+  }
 }
 
 .fake-input {
@@ -266,6 +270,9 @@ input[type=color] {
     margin-left: -$-m;
     margin-right: -$-m;
     padding: $-s $-m;
+    display: block;
+    width: calc(100% + 32px);
+    text-align: left;
   }
   .collapse-title, .collapse-title label {
     cursor: pointer;
@@ -377,3 +384,18 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   background-color: #BBB;
   max-width: 100%;
 }
+
+.custom-file-input {
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+.custom-file-input:focus + label {
+  border-color: var(--color-primary);
+  outline: 1px solid var(--color-primary);
+}

resources/assets/sass/_layout.scss

@@ -301,7 +301,7 @@ body.flexbox {
   .tri-layout-mobile-tabs {
     display: none;
   }
-  .tri-layout-left-contents > div, .tri-layout-right-contents > div {
+  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
     opacity: 0.6;
     transition: opacity ease-in-out 120ms;
     &:hover {