Improve checkbox for screenreaders (#2930)

* Improve checkbox for screenreaders

* Remove redundant aria attributes

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update French locale

* Fix order in English locale

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

packages/@uppy/core/src/index.js

@@ -74,8 +74,7 @@ class Uppy {
           0: 'Select %{smart_count}',
           1: 'Select %{smart_count}',
         },
-        selectAllFilesFromFolderNamed: 'Select all files from folder %{name}',
-        unselectAllFilesFromFolderNamed: 'Unselect all files from folder %{name}',
+        allFilesFromFolderNamed: 'All files from folder %{name}',
         selectFileNamed: 'Select file %{name}',
         unselectFileNamed: 'Unselect file %{name}',
         openFolderNamed: 'Open folder %{name}',

packages/@uppy/locales/src/en_US.js

@@ -8,6 +8,7 @@ en_US.strings = {
   addMore: 'Add more',
   addMoreFiles: 'Add more files',
   addingMoreFiles: 'Adding more files',
+  allFilesFromFolderNamed: 'All files from folder %{name}',
   allowAccessDescription: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
   allowAccessTitle: 'Please allow access to your camera',
   aspectRatioLandscape: 'Crop landscape (16:9)',
@@ -114,7 +115,6 @@ en_US.strings = {
   save: 'Save',
   saveChanges: 'Save changes',
   searchImages: 'Search for images',
-  selectAllFilesFromFolderNamed: 'Select all files from folder %{name}',
   selectFileNamed: 'Select file %{name}',
   selectX: {
     '0': 'Select %{smart_count}',
@@ -131,7 +131,6 @@ en_US.strings = {
   submitRecordedFile: 'Submit recorded file',
   takePicture: 'Take a picture',
   timedOut: 'Upload stalled for %{seconds} seconds, aborting.',
-  unselectAllFilesFromFolderNamed: 'Unselect all files from folder %{name}',
   unselectFileNamed: 'Unselect file %{name}',
   upload: 'Upload',
   uploadComplete: 'Upload complete',

packages/@uppy/locales/src/fr_FR.js

@@ -8,6 +8,7 @@ fr_FR.strings = {
   addMore: 'Ajouter d\'autres',
   addMoreFiles: 'Ajouter d\'autres fichiers',
   addingMoreFiles: 'En train d\'ajouter des fichiers',
+  allFilesFromFolderNamed: 'Tous les fichiers du dossier %{name}',
   allowAccessDescription: 'Pour prendre des photos ou enregistrer une vidéo avec votre caméra, veuillez autoriser l\'accès à votre caméra pour ce site.',
   allowAccessTitle: 'Veuillez autoriser l\'accès à votre caméra',
   authenticateWith: 'Se connecter à %{pluginName}',
@@ -93,7 +94,6 @@ fr_FR.strings = {
   retry: 'Réessayer',
   retryUpload: 'Réessayer le téléchargement',
   saveChanges: 'Sauvegarder les modifications',
-  selectAllFilesFromFolderNamed: 'Sélectionner tous les fichiers du dossier %{name}',
   selectFileNamed: 'Sélectionner le fichier %{name}',
   selectX: {
     '0': 'Sélectionner %{smart_count}',
@@ -108,7 +108,6 @@ fr_FR.strings = {
   submitRecordedFile: 'Envoyer la vidéo enregistrée',
   takePicture: 'Prendre une photo',
   timedOut: 'Téléchargement bloqué durant %{seconds} secondes, annulation.',
-  unselectAllFilesFromFolderNamed: 'Désélectionner tous les fichiers du dossier %{name}',
   unselectFileNamed: 'Désélectionner le fichier %{name}',
   upload: 'Télécharger',
   uploadComplete: 'Téléchargement terminé',

packages/@uppy/locales/src/nl_NL.js

@@ -125,8 +125,7 @@ nl_NL.strings = {
     '0': 'Je moet minstens %{smart_count} bestand selecteren',
     '1': 'Je moet minstens %{smart_count} bestanden selecteren',
   },
-  selectAllFilesFromFolderNamed: 'Selecteer alle bestanden uit de map %{name}',
-  unselectAllFilesFromFolderNamed: 'Deselecteer alle bestanden uit de map %{name}',
+  allFilesFromFolderNamed: 'Alle bestanden uit de map %{name}',
   selectFileNamed: 'Selecteer bestand %{name}',
   unselectFileNamed: 'Deselecteer bestand %{name}',
   openFolderNamed: 'Open map %{name}',

packages/@uppy/provider-views/src/Item/components/ListLi.js

@@ -1,65 +1,76 @@
 const { h } = require('preact')
 
-const getAriaLabelOfCheckbox = (props) => {
-  if (props.type === 'folder') {
-    if (props.isChecked) {
-      return props.i18n('unselectAllFilesFromFolderNamed', { name: props.title })
-    }
-    return props.i18n('selectAllFilesFromFolderNamed', { name: props.title })
-  }
-  if (props.isChecked) {
-    return props.i18n('unselectFileNamed', { name: props.title })
-  }
-  return props.i18n('selectFileNamed', { name: props.title })
-}
-
 // if folder:
 //   + checkbox (selects all files from folder)
 //   + folder name (opens folder)
 // if file:
 //   + checkbox (selects file)
 //   + file name (selects file)
-module.exports = (props) => {
+
+function ListItem (props) {
+  const {
+    className,
+    isDisabled,
+    restrictionReason,
+    isCheckboxDisabled,
+    isChecked,
+    toggleCheckbox,
+    type,
+    id,
+    itemIconEl,
+    title,
+    handleFolderClick,
+    showTitles,
+    i18n,
+  } = props
+
   return (
-    <li className={props.className} title={props.isDisabled ? props.restrictionReason : null}>
-      {!props.isCheckboxDisabled ? (
-        <button
-          type="button"
-          className={`uppy-u-reset uppy-ProviderBrowserItem-fakeCheckbox ${props.isChecked ? 'uppy-ProviderBrowserItem-fakeCheckbox--is-checked' : ''}`}
-          onClick={props.toggleCheckbox}
+    <li
+      className={className}
+      title={isDisabled ? restrictionReason : null}
+    >
+      {!isCheckboxDisabled ? (
+        <input
+          type="checkbox"
+          className={`uppy-u-reset uppy-ProviderBrowserItem-fakeCheckbox ${isChecked ? 'uppy-ProviderBrowserItem-fakeCheckbox--is-checked' : ''}`}
+          onChange={toggleCheckbox}
           // for the <label/>
-          id={props.id}
-          role="option"
-          aria-label={getAriaLabelOfCheckbox(props)}
-          aria-selected={props.isChecked}
-          aria-disabled={props.isDisabled}
-          disabled={props.isDisabled}
+          name="listitem"
+          id={id}
+          checked={isChecked}
+          aria-label={type === 'file' ? null : i18n('allFilesFromFolderNamed', { name: title })}
+          disabled={isDisabled}
           data-uppy-super-focusable
         />
       ) : null}
 
-      {props.type === 'file' ? (
+      {type === 'file' ? (
         // label for a checkbox
-        <label htmlFor={props.id} className="uppy-u-reset uppy-ProviderBrowserItem-inner">
+        <label
+          htmlFor={id}
+          className="uppy-u-reset uppy-ProviderBrowserItem-inner"
+        >
           <div className="uppy-ProviderBrowserItem-iconWrap">
-            {props.itemIconEl}
+            {itemIconEl}
           </div>
-          {props.showTitles && props.title}
+          {showTitles && title}
         </label>
       ) : (
         // button to open a folder
         <button
           type="button"
           className="uppy-u-reset uppy-ProviderBrowserItem-inner"
-          onClick={props.handleFolderClick}
-          aria-label={props.i18n('openFolderNamed', { name: props.title })}
+          onClick={handleFolderClick}
+          aria-label={i18n('openFolderNamed', { name: title })}
         >
           <div className="uppy-ProviderBrowserItem-iconWrap">
-            {props.itemIconEl}
+            {itemIconEl}
           </div>
-          {props.showTitles && <span>{props.title}</span>}
+          {showTitles && <span>{title}</span>}
         </button>
       )}
     </li>
   )
 }
+
+module.exports = ListItem