a11y: add home page elements to tab index (microsoft#2665)

* a11y: add home page elements to tab index * Update home.test.js * Update home.test.js Co-authored-by: Corina <14900841+corinagum@users.noreply.github.com>
lei9444 · Apr 16, 2020 · 76e18c0 · 76e18c0
1 parent f351760
commit 76e18c0
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 28 deletions.
diff --git a/Composer/packages/client/__tests__/components/home.test.js b/Composer/packages/client/__tests__/components/home.test.js
@@ -13,15 +13,15 @@ describe('<Home/>', () => {
       { dataModified: 'Thu Nov 28 2019 17:22:19 GMT+0800 (GMT+08:00)', name: 'a', path: 'path1', storageId: 'default' },
       { dataModified: 'Thu Nov 28 2019 17:22:19 GMT+0800 (GMT+08:00)', name: 'b', path: 'path2', storageId: 'default' },
     ];
-    const onSelectionChanged = jest.fn(item => item.path);
+    const onItemChosen = jest.fn(item => item.path);
     const { container, queryByLabelText } = render(
-      <RecentBotList onSelectionChanged={onSelectionChanged} recentProjects={recentProjects} />
+      <RecentBotList onItemChosen={onItemChosen} recentProjects={recentProjects} />
     );
     expect(container).toHaveTextContent('a');
     expect(container).toHaveTextContent('b');
     const link = queryByLabelText('a');
-    fireEvent.click(link);
-    expect(onSelectionChanged.mock.results[0].value).toBe('path1');
+    fireEvent.dblClick(link);
+    expect(onItemChosen.mock.results[0].value).toBe('path1');
   });
 
   it('should dispatch onClick event when clicked on an ExampleList', () => {

diff --git a/Composer/packages/client/src/pages/home/ExampleList.tsx b/Composer/packages/client/src/pages/home/ExampleList.tsx
@@ -41,7 +41,19 @@ export const ExampleList: React.FC<ExampleListProps> = props => {
     }
 
     return (
-      <div css={exampleListCell} data-is-focusable={true} key={item.id} onClick={() => onClick(item.id)}>
+      <div
+        css={exampleListCell}
+        data-is-focusable={true}
+        key={item.id}
+        onClick={() => onClick(item.id)}
+        onKeyDown={ev => {
+          if (ev.key === 'Enter') {
+            onClick(item.id);
+          }
+        }}
+        tabIndex={0}
+        aria-label={item.name + '; ' + item.description}
+      >
         <img role="presentation" src={resolveIcon(item.id)} css={exampleListCellIcon} />
         <div css={exampleListCellContent}>
           <div css={exampleListCellName}>{item.name}</div>

diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx
@@ -39,6 +39,7 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
         }
       }}
       ref={forwardedRef}
+      tabIndex={0}
       {...rest}
     >
       <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>

diff --git a/Composer/packages/client/src/pages/home/RecentBotList.tsx b/Composer/packages/client/src/pages/home/RecentBotList.tsx
@@ -4,7 +4,6 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-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';
@@ -22,11 +21,11 @@ import { calculateTimeDiff } from '../../utils';
 import { detailListContainer } from './styles';
 
 interface RecentBotListProps {
-  onSelectionChanged: (file: IObjectWithKey) => void;
+  onItemChosen: (file: IObjectWithKey) => void;
   recentProjects: any;
 }
 export function RecentBotList(props: RecentBotListProps): JSX.Element {
-  const { onSelectionChanged, recentProjects } = props;
+  const { onItemChosen, recentProjects } = props;
   // for detail file list in open panel
   const tableColums = [
     {
@@ -73,15 +72,6 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
     );
   }
 
-  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);
-    },
-  });
-
   return (
     <div data-is-scrollable="true" css={detailListContainer}>
       <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
@@ -93,7 +83,7 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
           layoutMode={DetailsListLayoutMode.justified}
           onRenderDetailsHeader={onRenderDetailsHeader}
           isHeaderVisible={true}
-          selection={selection}
+          onItemInvoked={onItemChosen}
           selectionMode={SelectionMode.single}
           checkboxVisibility={CheckboxVisibility.hidden}
         />

diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
@@ -64,7 +64,7 @@ const Home: React.FC<RouteComponentProps> = () => {
     await openBotProject(path);
   };
 
-  const onSelectionChanged = async item => {
+  const onItemChosen = async item => {
     if (item && item.path) {
       await onClickRecentBotProject(item.path);
     }
@@ -174,17 +174,19 @@ const Home: React.FC<RouteComponentProps> = () => {
               <h2 css={home.subtitle}>{formatMessage(`Recent Bots`)}</h2>
               <RecentBotList
                 recentProjects={recentProjects}
-                onSelectionChanged={async item => {
-                  await onSelectionChanged(item);
+                onItemChosen={async item => {
+                  await onItemChosen(item);
                 }}
               />
             </div>
           )}
           <div css={home.leftContainer}>
             <h2 css={home.subtitle}>
               {formatMessage('Video tutorials:')}&nbsp;
-              <Link href={comingSoonLink.to} tabIndex={-1} key={comingSoonLink.text} target={'_blank'}>
-                <span css={comingSoonLink.css}>{comingSoonLink.text}</span>
+              <Link href={comingSoonLink.to} key={comingSoonLink.text} target={'_blank'}>
+                <span css={comingSoonLink.css} aria-label={'Video tutorials coming soon'}>
+                  {comingSoonLink.text}
+                </span>
               </Link>
             </h2>
             <div css={home.newBotContainer}>

diff --git a/Composer/packages/server/src/models/asset/assetManager.ts b/Composer/packages/server/src/models/asset/assetManager.ts
@@ -35,12 +35,12 @@ const templates: TemplateData = {
   },
   TodoSample: {
     name: 'Simple Todo',
-    description: 'A sample bot that allows you add, list, remove to do items.',
+    description: 'A sample bot that allows you to add, list, and remove to do items.',
     order: 3,
   },
   ToDoBotWithLuisSample: {
     name: 'Todo with LUIS',
-    description: 'A sample bot that allows you add, list, remove to do items and uses language Understanding',
+    description: 'A sample bot that allows you to add, list, and remove to do items using Language Understanding',
     order: 4,
   },
   RespondingWithCardsSample: {
@@ -49,11 +49,12 @@ const templates: TemplateData = {
   },
   AskingQuestionsSample: {
     name: 'Asking Questions',
-    description: 'A sample bot that shows how to ask question and capture user input.',
+    description: 'A sample bot that shows how to ask questions and capture user input.',
   },
   InterruptionSample: {
     name: 'Interruptions',
-    description: 'An advance sample bot that shows how to handle context switching and interruption in a conversation.',
+    description:
+      'An advanced sample bot that shows how to handle context switching and interruption in a conversation.',
   },
   RespondingWithTextSample: {
     name: 'Responding with Text',
@@ -65,7 +66,7 @@ const templates: TemplateData = {
   },
   ActionsSample: {
     name: 'Dialog Actions',
-    description: 'A sample bot that shows how to use Dialog actions.',
+    description: 'A sample bot that shows how to use Dialog Actions.',
   },
   QnAMakerLUISSample: {
     name: 'QnA Maker and LUIS',