fix: add single-click-to-open links (microsoft#2847)

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
lei9444 · Apr 30, 2020 · a414fca · a414fca
1 parent 9a540ac
commit a414fca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx b/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx
@@ -7,6 +7,7 @@ import path from 'path';
 import { jsx } from '@emotion/core';
 import { useMemo, useState } from 'react';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
@@ -58,13 +59,23 @@ const _renderIcon = (file: File) => {
   return <img src={url} className={detailListClass.fileIconImg} alt={`${iconName} file icon`} />;
 };
 
-const _renderNameColumn = (file: File) => {
+const _renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
   const iconName = getFileIconName(file);
   return (
     <div data-is-focusable={true} css={tableCell}>
-      <div tabIndex={-1} css={content} aria-label={`${iconName} Name is ${file.name}`}>
+      <Link
+        aria-label={
+          file.name === '..'
+            ? formatMessage('previous folder')
+            : formatMessage('{icon} name is {file}', {
+                icon: iconName,
+                file: file.name,
+              })
+        }
+        onClick={() => onFileChosen(file)}
+      >
         {file.name}
-      </div>
+      </Link>
     </div>
   );
 };
@@ -99,7 +110,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
       sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
       sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
-      onRender: _renderNameColumn,
+      onRender: _renderNameColumn(onFileChosen),
       isPadded: true,
     },
     {

diff --git a/Composer/packages/client/src/pages/home/RecentBotList.tsx b/Composer/packages/client/src/pages/home/RecentBotList.tsx
@@ -5,6 +5,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { IObjectWithKey } from 'office-ui-fabric-react/lib/MarqueeSelection';
@@ -44,13 +45,12 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       onRender: item => {
         return (
           <div css={tableCell} data-is-focusable={true}>
-            <div
-              tabIndex={-1}
-              css={content}
+            <Link
               aria-label={formatMessage(`Bot name is {botName}`, { botName: item.name })}
+              onClick={() => onItemChosen(item)}
             >
               {item.name}
-            </div>
+            </Link>
           </div>
         );
       },