♿ [open-formulieren/open-forms#4716] File upload template improvements

- Replaced clickable icons with buttons - Proper textual alternatives and translations - Changed naming conventions for element ids - Replaced <b> with css - All icons now have 'aria-hidden="true"'
open-formulieren · Oct 24, 2024 · f1a5752 · f1a5752
1 parent fec2d94
commit f1a5752
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs
@@ -6,10 +6,10 @@
         {% if (!ctx.disabled) { %}
           <div class="col-md-1"></div>
         {% } %}
-        <div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-name" class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><b>{{ctx.t('File Name')}}</b></div>
-        <div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-size" class="col-md-2"><b>{{ctx.t('Size')}}</b></div>
+        <div id="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filename" class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %} openforms-content openforms-content--bold">{{ctx.t('File Name')}}</div>
+        <div id="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filesize" class="col-md-2 openforms-content openforms-content--bold">{{ctx.t('Size')}}</div>
         {% if (ctx.self.hasTypes) { %}
-          <div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-type" class="col-md-2"><b>{{ctx.t('Type')}}</b></div>
+          <div id="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filetype" class="col-md-2 openforms-content openforms-content--bold">{{ctx.t('Type')}}</div>
         {% } %}
       </div>
     </li>
@@ -18,23 +18,24 @@
         <div class="row">
           {% if (!ctx.disabled) { %}
             <div class="col-md-1">
-              <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}} {{file.originalName || file.name}}">
+              <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
                 <i class="{{ctx.iconClass('trash-can')}}" aria-hidden="true"></i>
+                <span class="sr-only">{{ctx.t('removeFileMessage', {fileName: file.originalName || file.name})}}</span>
               </button>
             </div>
           {% } %}
-          <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-name">
+          <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filename">
             {% if (ctx.component.uploadOnly) { %}
               {{{file.originalName || file.name}}}
             {% } else { %}
               <a href="{{file.url || '#'}}" target="_blank" ref="fileLink" class="utrecht-link utrecht-link--openforms"> {{{file.originalName || file.name}}}</a>
             {% } %}
           </div>
-          <div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-size">
+          <div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filesize">
             {{ctx.fileSize(file.size)}}
           </div>
           {% if (ctx.self.hasTypes) { %}
-            <div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-type">
+            <div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}-file-list-header-filetype">
               {% if (!ctx.disabled) { %}
                 <select class="file-type" ref="fileType">
                   {% ctx.component.fileTypes.map(function(type) { %}
@@ -57,7 +58,10 @@
         <span>
           <img ref="fileImage" src="" alt="{{{file.originalName || file.name}}}" style="width:{{ctx.component.imageSize}}px">
           {% if (!ctx.disabled) { %}
-            <i class="{{ctx.iconClass('trash-can')}}" ref="removeLink"></i>
+            <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
+              <i class="{{ctx.iconClass('trash-can')}}" aria-hidden="true"></i>
+              <span class="sr-only">{{ctx.t('removeFileMessage', {fileName: file.originalName || file.name})}}</span>
+            </button>
           {% } %}
         </span>
       </div>
@@ -67,12 +71,12 @@
 {% if (!ctx.disabled && ((ctx.component.multiple && (!ctx.component.maxNumberOfFiles || ctx.files.length < ctx.component.maxNumberOfFiles)) || !ctx.files.length)) { %}
   {% if (ctx.self.useWebViewCamera) { %}
     <div class="fileSelector">
-      <button class="btn btn-primary {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('Gallery')}}</button>
-      <button class="btn btn-primary {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('Camera')}}</button>
+      <button class="btn btn-primary {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="galleryButton"><i class="fa fa-book" aria-hidden="true"></i> {{ctx.t('Gallery')}}</button>
+      <button class="btn btn-primary {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="cameraButton"><i class="fa fa-camera" aria-hidden="true"></i> {{ctx.t('Camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
     <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ? 'hidden' : ''}}>
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i>
+      <i class="{{ctx.iconClass('cloud-upload')}}" aria-hidden="true"></i>
 
         {% if (ctx.component.multiple) { %}
           {{ctx.t('Drop files,')}}
@@ -81,7 +85,7 @@
         {% } %}
 
         {% if (ctx.self.imageUpload) { %}
-          <a href="#" ref="toggleCameraMode" class="utrecht-link utrecht-link--openforms"><i class="fa fa-camera"></i> {{ctx.t('Use Camera,')}}</a>
+          <a href="#" ref="toggleCameraMode" class="utrecht-link utrecht-link--openforms"><i class="fa fa-camera" aria-hidden="true"></i> {{ctx.t('Use Camera,')}}</a>
         {% } %}
 
         {{ctx.t('or')}}
@@ -102,7 +106,7 @@
     <div>
       <video class="video" autoplay="true" ref="videoPlayer"></video>
     </div>
-    <button class="btn btn-primary {{ctx.ofPrefix}}-button {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('Take Picture')}}</button>
+    <button class="btn btn-primary {{ctx.ofPrefix}}-button {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="takePictureButton"><i class="fa fa-camera" aria-hidden="true"></i> {{ctx.t('Take Picture')}}</button>
     <button class="btn btn-primary {{ctx.ofPrefix}}-button {{ctx.ofPrefix}}-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
   {% } %}
 {% } %}
@@ -114,7 +118,10 @@
       </div>
     </div>
     <div class="row">
-			<i class="{{ctx.iconClass('trash-can')}}" ref="fileStatusRemove" title="{{ctx.t('remove')}}"></i>
+      <a role="button" ref="fileStatusRemove" title="{{ctx.t('Remove')}}" href="#">
+        <i class="{{ctx.iconClass('trash-can')}}" aria-hidden="true"></i>
+        <span class="sr-only">{{ctx.t('removeFileMessage', {fileName: status.originalName})}}</span>
+      </a>
       <div class="fileSize col-form-label col-sm-2 text-right">{{ctx.fileSize(status.size)}}</div>
     </div>
     {% if (status.status === 'progress') { %}

diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss
@@ -126,6 +126,7 @@ we don't have strict BEM naming here.
       margin-left: 0.4em;
       opacity: 0.6;
       transition: all 0.4s ease;
+      color: $color-black;
 
       &:hover {
         opacity: 1;

diff --git a/src/scss/components/_typography.scss b/src/scss/components/_typography.scss
@@ -20,6 +20,12 @@
   @include h2(auto);
 }
 
+.#{prefix('content')} {
+  @include bem.modifier('bold') {
+    font-weight: 700;
+  }
+}
+
 .#{prefix(body)} {
   @include body(auto);
   clear: both;