fix: import status window UX (#2075)

Co-authored-by: Rafael Ramalho <rafael.ramalho@olx.com>
ipfs · Jan 11, 2023 · 4104cc6 · 4104cc6
1 parent ad9e4ff
commit 4104cc6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/files/file-import-status/FileImportStatus.css b/src/files/file-import-status/FileImportStatus.css
@@ -5,25 +5,19 @@
 
 .fileImportStatusButton {
     max-height: 3rem;
+    padding-right: 0;
 }
 
 .fileImportStatusButton .fileImportStatusArrow {
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.15s ease-in-out;
 }
 
 .fileImportStatusButton[aria-expanded="false"] .fileImportStatusArrow {
     transform: rotate(180deg) translateY(-2px);
 }
 
-.fileImportStatusArrow {
-    margin-left: auto;
-    width: 1.5rem;
-}
-
-.fileImportStatusCancel {
-    width: 2.9rem;
-    margin-left: 0.5rem;
-    margin-right: -1.2rem;
+.fileImportStatusArrow svg, .fileImportStatusCancel svg {
+    width: 2rem;
 }
 
 .fileImportStatusRow {

diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
@@ -101,26 +101,41 @@ export const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doF
     return null
   }
 
+  const handleExpandByKeyboard = (ev) => {
+    const isTargetElementBeingClicked = ev.nativeEvent.target.tagName === 'BUTTON'
+    if (ev.nativeEvent?.code !== 'Space' || isTargetElementBeingClicked) return
+
+    setExpanded(!expanded)
+  }
+
   const numberOfImportedItems = !filesFinished.length ? 0 : filesFinished.reduce((prev, finishedFile) => prev + finishedFile.message.entries.length, 0)
   const numberOfPendingItems = filesPending.reduce((total, pending) => total + groupByPath(pending.message.entries).size, 0)
   const progress = Math.floor(filesPending.reduce((total, { message: { progress } }) => total + progress, 0) / filesPending.length)
 
   return (
     <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
       <div className="relative br1 dark-gray w-40 center ba b--light-gray bg-white" style={{ pointerEvents: 'auto' }}>
-        <div className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal w-100 justify-between" style={{ background: '#F0F6FA' }}>
+        <div
+          tabIndex="0"
+          onClick={() => setExpanded(!expanded)}
+          onKeyPress={handleExpandByKeyboard}
+          role="button"
+          className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal w-100 justify-between"
+          aria-expanded={expanded}
+          style={{ background: '#F0F6FA' }}
+        >
           <span>
             { filesPending.length
               ? `${t('filesImportStatus.importing', { count: numberOfPendingItems })} (${progress}%)`
               : t('filesImportStatus.imported', { count: numberOfImportedItems })
             }
           </span>
           <div className="flex items-center">
-            <button className='fileImportStatusArrow' onClick={() => setExpanded(!expanded)} aria-expanded={expanded} aria-label={ t('filesImportStatus.toggleDropdown') }>
-              <GlyphSmallArrows className='w-100' fill="currentColor" opacity="0.7" aria-hidden="true"/>
+            <button className='fileImportStatusArrow ph0 flex' onClick={() => setExpanded(!expanded)} aria-expanded={expanded} aria-label={ t('filesImportStatus.toggleDropdown') }>
+              <GlyphSmallArrows viewBox="10 10 80 80" fill="currentColor" opacity="0.7" aria-hidden="true"/>
             </button>
-            <button className='fileImportStatusCancel' onClick={ handleImportStatusClose } aria-label={ t('filesImportStatus.closeDropdown') }>
-              <GlyphSmallCancel className='w-100' fill="currentColor" opacity="0.7"/>
+            <button className='fileImportStatusCancel ph0 flex' onClick={handleImportStatusClose} aria-label={ t('filesImportStatus.closeDropdown') }>
+              <GlyphSmallCancel fill="currentColor" opacity="0.7"/>
             </button>
           </div>
         </div>

diff --git a/src/reset.css b/src/reset.css
@@ -11,7 +11,7 @@ button:not(.disabled) {
     cursor: pointer;
 }
 
-button:not(.default):focus {
+button:not(.default):focus-visible {
     outline: 1px solid #bbb;
     outline-offset: -1px;
 }