Add keyboard handlers to load more and refresh button

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -864,6 +864,26 @@ const DocumentsTabComponent: React.FunctionComponent<{
       });
   };
 
+  const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = event.target as HTMLElement;
+      refreshDocumentsGrid(false);
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = event.target as HTMLElement;
+      loadNextPage();
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
   const _loadNextPageInternal = (): Promise<DataModels.DocumentId[]> => {
     return documentsIterator.iterator.fetchNext().then((response) => response.resources);
   };
@@ -1623,7 +1643,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
                   color: StyleConstants.AccentMedium,
                 }}
                 onClick={() => refreshDocumentsGrid(false)}
-                onKeyDown={() => refreshDocumentsGrid(false)}
+                onKeyDown={onRefreshKeyInput}
               />
               <div
                 style={
@@ -1645,8 +1665,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                   <a
                     className="loadMore"
                     role="button"
+                    tabIndex={0}
                     onClick={() => loadNextPage(false)}
-                    onKeyDown={() => loadNextPage(false)}
+                    onKeyDown={onLoadMoreKeyInput}
                   >
                     Load more
                   </a>