fix(file-upload): Fix focus styles for the browse button - FRONT-3689 (…

…#2591)

Co-authored-by: Romain Emery <emery.romain@gmail.com>

src/implementations/twig/components/file-upload/__snapshots__/file-upload.test.js.snap

@@ -37,6 +37,15 @@ exports[`File Upload  Default renders correctly 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -50,15 +59,6 @@ exports[`File Upload  Default renders correctly 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -104,6 +104,16 @@ exports[`File Upload  Default renders correctly when disabled 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      disabled=""
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -118,16 +128,6 @@ exports[`File Upload  Default renders correctly when disabled 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      disabled=""
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -187,6 +187,15 @@ exports[`File Upload  Default renders correctly when invalid 1`] = `
       </svg>
           Invalid text
     </div>
+    <input
+      class="ecl-file-upload ecl-file-upload--invalid"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -200,15 +209,6 @@ exports[`File Upload  Default renders correctly when invalid 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload ecl-file-upload--invalid"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -254,6 +254,15 @@ exports[`File Upload  Default renders correctly when required 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -267,15 +276,6 @@ exports[`File Upload  Default renders correctly when required 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -321,6 +321,17 @@ exports[`File Upload  Default renders correctly with extra attributes 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      data-test="data-test-value"
+      data-test-1="data-test-value-1"
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -334,17 +345,6 @@ exports[`File Upload  Default renders correctly with extra attributes 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      data-test="data-test-value"
-      data-test-1="data-test-value-1"
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -390,6 +390,15 @@ exports[`File Upload  Default renders correctly with extra class names 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      id="example-input-id-1"
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-input-id-1"
@@ -403,15 +412,6 @@ exports[`File Upload  Default renders correctly with extra class names 1`] = `
         Choose file
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      id="example-input-id-1"
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""
@@ -457,6 +457,16 @@ exports[`File Upload  Multiple renders correctly 1`] = `
         Encrypted documents and those containing macros are not accepted.
       </div>
     </div>
+    <input
+      class="ecl-file-upload"
+      data-ecl-auto-init="FileUpload"
+      data-ecl-file-upload-input=""
+      id="example-file-upload-multiple"
+      multiple=""
+      name="file-upload-name"
+      required=""
+      type="file"
+    />
     <label
       class="ecl-file-upload__button-container"
       for="example-file-upload-multiple"
@@ -470,16 +480,6 @@ exports[`File Upload  Multiple renders correctly 1`] = `
         Choose files
       </span>
     </label>
-    <input
-      class="ecl-file-upload"
-      data-ecl-auto-init="FileUpload"
-      data-ecl-file-upload-input=""
-      id="example-file-upload-multiple"
-      multiple=""
-      name="file-upload-name"
-      required=""
-      type="file"
-    />
     <ul
       class="ecl-file-upload__list"
       data-ecl-file-upload-list=""

src/implementations/twig/components/file-upload/file-upload.html.twig

@@ -146,6 +146,15 @@
   </div>
 {% endif %}
 
+  <input
+    type="file"
+    class="{{ _component_class }}"
+    {{- _main_attributes -}}
+  {% if _extra_attributes is not empty %}
+    {{- _extra_attributes -}}
+  {% endif %}
+  />
+
   <label
     class="ecl-file-upload__button-container"
   {% if _id is not empty %}
@@ -169,15 +178,6 @@
     </span>
   </label>
 
-  <input
-    type="file"
-    class="{{ _component_class }}"
-    {{- _main_attributes -}}
-  {% if _extra_attributes is not empty %}
-    {{- _extra_attributes -}}
-  {% endif %}
-  />
-
   <ul
     class="ecl-file-upload__list"
     data-ecl-file-upload-list

src/implementations/vanilla/components/file-upload/file-upload.scss → src/implementations/vanilla/components/file-upload/_file-upload.scss

@@ -6,35 +6,41 @@
 @use 'sass:map';
 @use '@ecl/theme-dev/theme';
 
+$_border-radius: null !default;
+$_border-width: 2px !default;
+$_font-weight: null !default;
+$_outline-color: null !default;
+$_outline-width: null !default;
+$_padding-horizontal: map.get(theme.$spacing, 'm') !default;
+$_padding-vertical: map.get(theme.$spacing, 's') !default;
+$_shadow-hover: null !default;
+
 @mixin browse-button() {
   appearance: none;
   background: none;
-  background-color: map.get(theme.$color, 'blue-100');
-  border-radius: 0;
+  border-radius: $_border-radius;
   border-width: 0;
-  box-shadow: 0;
   box-sizing: border-box;
-  color: map.get(theme.$color, 'white-100');
   display: inline-block;
   font: map.get(theme.$font, 'm');
-  font-weight: map.get(theme.$font-weight, 'bold');
+  font-weight: $_font-weight;
   margin: 0;
-  padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm');
+  padding: $_padding-vertical $_padding-horizontal;
   text-decoration: none;
 
-  // stylelint-disable plugin/selector-bem-pattern
   &:hover,
   &:active {
-    background-color: map.get(theme.$color, 'blue-130');
+    box-shadow: $_shadow-hover;
     text-decoration: none;
   }
 
   &:focus {
-    outline: 3px solid map.get(theme.$color, 'yellow');
-    outline-offset: -(3px);
+    border: $_outline-width solid $_outline-color;
+    outline: none;
+    padding: calc(#{$_padding-vertical} - #{$_outline-width})
+      calc(#{$_padding-horizontal} - #{$_outline-width});
     text-decoration: none;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 @mixin browse-button-disabled() {
@@ -45,23 +51,36 @@
 }
 
 .ecl-file-upload {
-  display: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
   margin: 0;
 
   .no-js & {
+    clip: initial;
     color: map.get(theme.$color, 'grey');
-    display: block;
     font: map.get(theme.$font, 'm');
+    height: auto;
+    overflow: initial;
+    position: initial;
+    width: auto;
     margin: 0;
+  }
 
-    // stylelint-disable max-nesting-depth
-    &:active,
-    &:focus {
-      outline: 3px solid map.get(theme.$color, 'yellow');
-      outline-offset: -3px;
+  // stylelint-disable max-nesting-depth
+  &:active,
+  &:focus {
+    + .ecl-file-upload__button-container .ecl-file-upload__button {
+      border: $_outline-width solid $_outline-color;
+      outline: none;
+      padding: calc(#{$_padding-vertical} - #{$_outline-width})
+        calc(#{$_padding-horizontal} - #{$_outline-width});
+      text-decoration: none;
     }
-    // stylelint-enable max-nesting-depth
   }
+  // stylelint-enable max-nesting-depth
 }
 
 /*

src/implementations/vanilla/components/file-upload/file-upload-ec.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '@ecl/theme-dev/theme';
+@use 'file-upload' with (
+  $_border-radius: 0,
+  $_font-weight: map.get(theme.$font-weight, 'bold'),
+  $_outline-color: map.get(theme.$color, 'yellow-100'),
+  $_outline-width: 3px,
+  $_shadow-hover: none
+);

src/implementations/vanilla/components/file-upload/file-upload-eu.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '@ecl/theme-dev/theme';
+@use 'file-upload' with (
+  $_border-radius: 4px,
+  $_font-weight: map.get(theme.$font-weight, 'regular'),
+  $_outline-color: map.get(theme.$color, 'accent-blue-100'),
+  $_outline-width: 2px,
+  $_shadow-hover: 0 0 4px rgba(9, 49, 142, 0.5)
+);

src/presets/ec/src/ec.scss

@@ -10,7 +10,7 @@
 @use '@ecl/vanilla-component-form/form-ec';
 @use '@ecl/vanilla-component-checkbox/checkbox-ec';
 @use '@ecl/vanilla-component-datepicker/datepicker-ec';
-@use '@ecl/vanilla-component-file-upload/file-upload';
+@use '@ecl/vanilla-component-file-upload/file-upload-ec';
 @use '@ecl/vanilla-component-radio/radio-ec';
 @use '@ecl/vanilla-component-select/select-ec';
 @use '@ecl/vanilla-component-text-area/text-area-ec';

src/presets/eu/src/eu.scss

@@ -10,7 +10,7 @@
 @use '@ecl/vanilla-component-form/form-eu';
 @use '@ecl/vanilla-component-checkbox/checkbox-eu';
 @use '@ecl/vanilla-component-datepicker/datepicker-eu';
-@use '@ecl/vanilla-component-file-upload/file-upload';
+@use '@ecl/vanilla-component-file-upload/file-upload-eu';
 @use '@ecl/vanilla-component-radio/radio-eu';
 @use '@ecl/vanilla-component-select/select-eu';
 @use '@ecl/vanilla-component-text-area/text-area-eu';