EBR-42: add keyboard key event for downloading files

the-virtual-brain · Apr 5, 2024 · 6836b12 · 6836b12
1 parent 05eaebc
commit 6836b12
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/JobOutputFiles.tsx b/src/components/JobOutputFiles.tsx
@@ -253,6 +253,12 @@ export const JobOutput = (props: Types.JobOutputProps): JSX.Element => {
               data-testid={'download-file'}
               className={'fa fa-download clickableIcon'}
               onClick={() => downloadToCurrentPath(output)}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  downloadToCurrentPath(output);
+                }
+              }}
+              tabIndex={0}
             />
           )}
         </>

diff --git a/style/base.css b/style/base.css
@@ -307,6 +307,11 @@ button[disabled]:hover {
     cursor: pointer;
 }
 
+.clickableIcon:focus {
+    outline: #2b2b2c solid 2px;
+    outline-offset: 2px;
+}
+
 i {
     color: var(--jp-content-font-color2);
 }