refactor: add hidden class and tabIndex for accessibility

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>

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;