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/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 {