Revert "Improve checkbox for screenreaders (#2930)" (#2979)

This reverts commit a2527c6ab574d3139f5108a17c94297910cb3184.

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

@@ -74,7 +74,8 @@ class Uppy {
           0: 'Select %{smart_count}',
           1: 'Select %{smart_count}',
         },
-        allFilesFromFolderNamed: 'All files from folder %{name}',
+        selectAllFilesFromFolderNamed: 'Select all files from folder %{name}',
+        unselectAllFilesFromFolderNamed: 'Unselect 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,7 +8,6 @@ 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)',
@@ -115,6 +114,7 @@ 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,6 +131,7 @@ 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,7 +8,6 @@ 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}',
@@ -94,6 +93,7 @@ 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,6 +108,7 @@ 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,7 +125,8 @@ nl_NL.strings = {
     '0': 'Je moet minstens %{smart_count} bestand selecteren',
     '1': 'Je moet minstens %{smart_count} bestanden selecteren',
   },
-  allFilesFromFolderNamed: 'Alle bestanden uit de map %{name}',
+  selectAllFilesFromFolderNamed: 'Selecteer alle bestanden uit de map %{name}',
+  unselectAllFilesFromFolderNamed: 'Deselecteer 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,76 +1,65 @@
 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)
-
-function ListItem (props) {
-  const {
-    className,
-    isDisabled,
-    restrictionReason,
-    isCheckboxDisabled,
-    isChecked,
-    toggleCheckbox,
-    type,
-    id,
-    itemIconEl,
-    title,
-    handleFolderClick,
-    showTitles,
-    i18n,
-  } = props
-
+module.exports = (props) => {
   return (
-    <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}
+    <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}
           // for the <label/>
-          name="listitem"
-          id={id}
-          checked={isChecked}
-          aria-label={type === 'file' ? null : i18n('allFilesFromFolderNamed', { name: title })}
-          disabled={isDisabled}
+          id={props.id}
+          role="option"
+          aria-label={getAriaLabelOfCheckbox(props)}
+          aria-selected={props.isChecked}
+          aria-disabled={props.isDisabled}
+          disabled={props.isDisabled}
           data-uppy-super-focusable
         />
       ) : null}
 
-      {type === 'file' ? (
+      {props.type === 'file' ? (
         // label for a checkbox
-        <label
-          htmlFor={id}
-          className="uppy-u-reset uppy-ProviderBrowserItem-inner"
-        >
+        <label htmlFor={props.id} className="uppy-u-reset uppy-ProviderBrowserItem-inner">
           <div className="uppy-ProviderBrowserItem-iconWrap">
-            {itemIconEl}
+            {props.itemIconEl}
           </div>
-          {showTitles && title}
+          {props.showTitles && props.title}
         </label>
       ) : (
         // button to open a folder
         <button
           type="button"
           className="uppy-u-reset uppy-ProviderBrowserItem-inner"
-          onClick={handleFolderClick}
-          aria-label={i18n('openFolderNamed', { name: title })}
+          onClick={props.handleFolderClick}
+          aria-label={props.i18n('openFolderNamed', { name: props.title })}
         >
           <div className="uppy-ProviderBrowserItem-iconWrap">
-            {itemIconEl}
+            {props.itemIconEl}
           </div>
-          {showTitles && <span>{title}</span>}
+          {props.showTitles && <span>{props.title}</span>}
         </button>
       )}
     </li>
   )
 }
-
-module.exports = ListItem