From c1e88a8ac0db4438752674def90fecb37b7050f7 Mon Sep 17 00:00:00 2001
From: VardanHakobyan <vardan_live@live.com>
Date: Tue, 15 Jun 2021 17:16:05 +0400
Subject: [PATCH] refactor: add hidden class and tabIndex for accessibility

---
 .../javascripts/components/AccountMenu/DataBackup.tsx       | 4 ++--
 app/assets/stylesheets/_sn.scss                             | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
index 29462bb5e..21e0e7ffb 100644
--- a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
+++ b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
@@ -132,11 +132,11 @@ const DataBackup: FunctionalComponent<Props> = ({
           <div className="sk-panel-row" />
           <div className="flex">
             <button className="sn-button small info" onClick={downloadDataArchive}>Download Backup</button>
-            <label className="sn-button small flex items-center info ml-2">
+            <label className="sn-button small flex items-center info ml-2" tabIndex={0}>
               <input
                 type="file"
                 onChange={importFileSelected}
-                style={{ display: 'none' }}
+                className="hidden"
               />
               Import Backup
             </label>
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 7120ea12d..cf4664b26 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -118,6 +118,10 @@
   outline: none;
 }
 
+.hidden {
+  display: none;
+}
+
 .color-foreground {
   color: var(--sn-stylekit-foreground-color);
 }
@@ -372,7 +376,7 @@
   &[data-state='collapsed'] {
     display: none;
   }
-  
+
   &.sn-dropdown--animated {
     @extend .transition-transform;
     @extend .duration-150;