adds focus states for file input and media lib uploader (#4729)

apostrophecms · Sep 18, 2024 · 4869e54 · 4869e54
1 parent f804b42
commit 4869e54
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Adds
 
+* Adds focus states for media library's Uploader tile
+* Adds focus states file attachment's input UI
 * Simplified importing rich text widgets via the REST API. If you  you have HTML that contains `img` tags pointing to existing images, you can now import them all quickly. When supplying the rich text widget object, include an `import` property with an `html` subproperty, rather than the usual `content` property. You can optionally provide a `baseUrl` subproperty as well. Any images present in `html` will be imported automatically and the correct `figure` tags will be added to the new rich text widget, along with any other markup acceptable to the widget's configuration.
 
 ### Changes

diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue
@@ -1,6 +1,7 @@
 <template>
   <label
-    :class="dropzoneClasses"
+    class="apos-media-manager-display__cell apos-media-uploader"
+    :class="{'apos-media-uploader--enabled': !disabled}"
     :disabled="disabled"
     @drop.prevent="uploadMedia"
     @dragover.prevent=""
@@ -9,6 +10,7 @@
   >
     <div
       class="apos-media-uploader__inner"
+      :class="{'apos-is-dragging': dragover}"
       tabindex="0"
       @keydown="onUploadDragAndDropKeyDown"
     >
@@ -70,15 +72,7 @@ export default {
     };
   },
   computed: {
-    dropzoneClasses () {
-      return [
-        'apos-media-manager-display__cell',
-        'apos-media-uploader',
-        {
-          'apos-is-dragging': this.dragover
-        }
-      ].concat(this.disabled ? [] : [ 'apos-media-uploader--enabled' ]);
-    }
+
   },
   mounted() {
     apos.bus.$on('command-menu-manager-create-new', this.create);
@@ -262,7 +256,7 @@ export default {
     }
   }
 
-  .apos-media-uploader--enabled {
+  .apos-media-uploader--enabled .apos-media-uploader__inner {
     &::after {
       @include apos-transition($duration: 0.3s);
 
@@ -290,7 +284,7 @@ export default {
     &:active,
     &:focus,
     &.apos-is-dragging {
-      border-width: 0;
+      outline: 2px dashed var(--a-primary);
 
       &::after {
         width: 102%;
@@ -302,11 +296,6 @@ export default {
         transform: translateY(-2px);
       }
     }
-
-    &:active,
-    &:focus {
-      outline: 1px solid var(--a-primary);
-    }
   }
 
   .apos-media-uploader__inner {

diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue b/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue
@@ -2,10 +2,12 @@
   <div>
     <label
       class="apos-input-wrapper apos-file-dropzone"
+      tabindex="0"
       :class="{
         'apos-file-dropzone--dragover': dragging,
         'apos-is-disabled': disabled || fileOrAttachment
       }"
+      @keydown="handleKeydown"
       @drop.prevent="uploadFile"
       @dragover="dragHandler"
       @dragleave="dragging = false"
@@ -29,6 +31,7 @@
         class="apos-sr-only"
         :disabled="disabled || fileOrAttachment"
         :accept="allowedExtensions"
+        tabindex="-1"
         @input="uploadFile"
       >
     </label>
@@ -101,6 +104,15 @@ export default {
     }
   },
   methods: {
+    handleKeydown(event) {
+      switch (event.key) {
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          this.$refs.uploadField.click();
+          break;
+      }
+    },
     async uploadFile ({ target, dataTransfer }) {
       this.dragging = false;
       const [ file ] = target.files ? target.files : (dataTransfer.files || []);
@@ -174,14 +186,12 @@ export default {
       transition: all 200ms ease;
     }
 
-    &:hover {
-      border-color: var(--a-primary);
-      background-color: var(--a-base-10);
-    }
-
+    &:hover,
     &:active,
     &:focus {
-      border: 2px solid var(--a-primary);
+      border-color: var(--a-primary);
+      background-color: var(--a-base-10);
+      outline: none;
     }
 
     &.apos-is-disabled {