a11y: fix "select" confusion in FileSelector (#2591)

* fix minor issues in FileSelector * Update NotificationList.tsx * Update fileUtil.ts * Update NotificationPage.spec.ts
microsoft · Apr 9, 2020 · 9f2c161 · 9f2c161
1 parent 4f0790a
commit 9f2c161
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 33 deletions.
diff --git a/Composer/cypress/integration/NotificationPage.spec.ts b/Composer/cypress/integration/NotificationPage.spec.ts
@@ -43,7 +43,7 @@ context('Notification Page', () => {
       cy.findAllByText('__testtodobotwithluissample.en-us.lu')
         .should('exist')
         .first()
-        .click();
+        .dblclick();
     });
 
     cy.findAllByText('__TestToDoBotWithLuisSample.Main').should('exist');
@@ -77,7 +77,7 @@ context('Notification Page', () => {
       cy.findAllByText('__testtodobotwithluissample.dialog')
         .should('exist')
         .first()
-        .click();
+        .dblclick();
     });
 
     cy.findAllByText('WelcomeUser').should('exist');

diff --git a/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx b/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx
@@ -7,7 +7,6 @@ import path from 'path';
 import { jsx } from '@emotion/core';
 import { useMemo } from 'react';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { Selection } from 'office-ui-fabric-react/lib/DetailsList';
 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';
@@ -36,15 +35,15 @@ interface FileSelectorProps {
   };
   focusedStorageFolder: StorageFolder;
   onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
-  onSelectionChanged: (file: any) => void;
+  onFileChosen: (file: any) => void;
   checkShowItem: (file: File) => boolean;
 }
 
 export const FileSelector: React.FC<FileSelectorProps> = props => {
-  const { onSelectionChanged, focusedStorageFolder, checkShowItem, onCurrentPathUpdate, operationMode } = props;
+  const { onFileChosen, focusedStorageFolder, checkShowItem, onCurrentPathUpdate, operationMode } = props;
   // for detail file list in open panel
   const currentPath = path.join(focusedStorageFolder.parent, focusedStorageFolder.name);
-  const tableColums = [
+  const tableColumns = [
     {
       key: 'column1',
       name: formatMessage('File Type'),
@@ -76,7 +75,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
               iconName="Robot"
             />
           );
-        } else if (iconName === FileTypes.UNKNOW) {
+        } else if (iconName === FileTypes.UNKNOWN) {
           return (
             <Icon
               style={{
@@ -161,15 +160,6 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
     );
   }
 
-  const selection = new Selection({
-    onSelectionChanged: () => {
-      const file = selection.getSelection()[0];
-      // selected item will be cleaned when folder path changed file will be undefine
-      // when no item selected.
-      onSelectionChanged(file);
-    },
-  });
-
   function getNavItemPath(array, separator, start, end) {
     if (end === 0) return array[0];
     if (!start) start = 0;
@@ -228,12 +218,12 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
           <DetailsList
             items={storageFiles}
             compact={false}
-            columns={tableColums}
+            columns={tableColumns}
             getKey={item => item.name}
             layoutMode={DetailsListLayoutMode.justified}
             onRenderDetailsHeader={onRenderDetailsHeader}
             isHeaderVisible={true}
-            selection={selection}
+            onItemInvoked={onFileChosen}
             selectionMode={SelectionMode.single}
             checkboxVisibility={CheckboxVisibility.hidden}
           />

diff --git a/Composer/packages/client/src/CreationFlow/LocationBrowser/LocationSelectContent.tsx b/Composer/packages/client/src/CreationFlow/LocationBrowser/LocationSelectContent.tsx
@@ -27,7 +27,7 @@ export const LocationSelectContent: React.FC<LocationSelectContentProps> = props
   const { state } = useContext(StoreContext);
   const { storages, storageFileLoadingStatus, creationFlowStatus, focusedStorageFolder } = state;
   const currentStorageIndex = useRef(0);
-  const onSelectionChanged = item => {
+  const onFileChosen = item => {
     if (item) {
       const type = item.fileType;
       const storageId = storages[currentStorageIndex.current].id;
@@ -55,7 +55,7 @@ export const LocationSelectContent: React.FC<LocationSelectContentProps> = props
           checkShowItem={checkShowItem}
           focusedStorageFolder={focusedStorageFolder}
           onCurrentPathUpdate={onCurrentPathUpdate}
-          onSelectionChanged={onSelectionChanged}
+          onFileChosen={onFileChosen}
         />
       )}
       {storageFileLoadingStatus === 'pending' && (

diff --git a/Composer/packages/client/src/constants/index.ts b/Composer/packages/client/src/constants/index.ts
@@ -125,7 +125,7 @@ export const FileTypes = {
   FOLDER: 'folder',
   FILE: 'file',
   BOT: 'bot',
-  UNKNOW: 'unknow',
+  UNKNOWN: 'unknown',
 };
 
 export const OpenStatus = {

diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
@@ -12,7 +12,6 @@ import {
 } from 'office-ui-fabric-react/lib/DetailsList';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
-import { Selection } from 'office-ui-fabric-react/lib/DetailsList';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import { useMemo, useState } from 'react';
@@ -109,15 +108,6 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
     return Math.ceil(items.length / itemCount) || 1;
   }, [items]);
 
-  const selection = new Selection({
-    onSelectionChanged: () => {
-      const items = selection.getSelection();
-      if (items.length) {
-        onItemClick(items[0] as INotification);
-      }
-    },
-  });
-
   const showItems = items.slice((pageIndex - 1) * itemCount, pageIndex * itemCount);
 
   return (
@@ -128,7 +118,7 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
             css={detailList}
             items={showItems}
             columns={columns}
-            selection={selection}
+            onItemInvoked={onItemClick}
             selectionMode={SelectionMode.single}
             setKey="none"
             layoutMode={DetailsListLayoutMode.justified}

diff --git a/Composer/packages/client/src/utils/fileUtil.ts b/Composer/packages/client/src/utils/fileUtil.ts
@@ -45,7 +45,7 @@ export function getFileIconName(file: File) {
       return docType;
     }
 
-    return FileTypes.UNKNOW;
+    return FileTypes.UNKNOWN;
   }
 }