a11y: add arialabel and make lg/lu nav operable by keyboard

Composer/packages/client/src/components/NavLinks/index.tsx

@@ -5,9 +5,10 @@
 
 import { jsx } from '@emotion/core';
 import React, { Fragment } from 'react';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import formatMessage from 'format-message';
 
-import { dialogItem } from '../../pages/language-understanding/styles';
-
+import { dialogItemSelected, dialogItemNotSelected } from './styles';
 interface NavLinksProps {
   navLinks: any[];
   fileId: string;
@@ -21,15 +22,16 @@ export const NavLinks: React.FC<NavLinksProps> = props => {
     <Fragment>
       {navLinks.map(dialog => {
         return (
-          <div
-            css={dialogItem(fileId === dialog.id)}
+          <DefaultButton
             key={dialog.id}
             onClick={() => {
               onSelect(dialog.id);
             }}
-          >
-            {dialog.name}
-          </div>
+            styles={fileId === dialog.id ? dialogItemSelected : dialogItemNotSelected}
+            text={dialog.name}
+            ariaLabel={formatMessage('language understanding file')}
+            ariaHidden={false}
+          />
         );
       })}
     </Fragment>

Composer/packages/client/src/components/NavLinks/styles.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+
+export const dialogItemNotSelected: IButtonStyles = {
+  root: {
+    background: NeutralColors.white,
+    fontWeight: FontWeights.semilight,
+    height: '32px',
+    fontSize: FontSizes.small,
+    paddingLeft: '16px',
+    paddingRight: 0,
+    border: 0,
+    textAlign: 'left',
+    marginLeft: 0,
+    marginRight: 0,
+  },
+};
+export const dialogItemSelected: IButtonStyles = {
+  root: {
+    background: NeutralColors.gray20,
+    fontWeight: FontWeights.semibold,
+    height: '32px',
+    fontSize: FontSizes.small,
+    paddingLeft: '16px',
+    paddingRight: 0,
+    border: 0,
+    textAlign: 'left',
+    marginLeft: 0,
+    marginRight: 0,
+  },
+};

Composer/packages/client/src/pages/language-understanding/index.tsx

@@ -6,6 +6,7 @@ import React, { useContext, Fragment, useMemo, Suspense, useCallback, useEffect
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { RouteComponentProps, Router } from '@reach/router';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
 import { StoreContext } from '../../store';
 import { projectContainer } from '../design/styles';
@@ -14,17 +15,10 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { ToolBar } from '../../components/ToolBar/index';
 import { TestController } from '../../TestController';
 import { NavLinks } from '../../components/NavLinks';
+import { dialogItemSelected, dialogItemNotSelected } from '../../components/NavLinks/styles';
 
 import TableView from './table-view';
-import {
-  ContentHeaderStyle,
-  ContentStyle,
-  flexContent,
-  actionButton,
-  contentEditor,
-  dialogItem,
-  HeaderText,
-} from './styles';
+import { ContentHeaderStyle, ContentStyle, flexContent, actionButton, contentEditor, HeaderText } from './styles';
 const CodeEditor = React.lazy(() => import('./code-editor'));
 
 interface LUPageProps extends RouteComponentProps<{}> {
@@ -106,15 +100,16 @@ const LUPage: React.FC<LUPageProps> = props => {
       </div>
       <div css={ContentStyle} data-testid="LUEditor">
         <div css={projectContainer}>
-          <div
-            css={dialogItem(isRoot)}
+          <DefaultButton
             key={'_all'}
             onClick={() => {
               onSelect('all');
             }}
-          >
-            {'All'}
-          </div>
+            styles={isRoot ? dialogItemSelected : dialogItemNotSelected}
+            text={formatMessage('All')}
+            ariaLabel={formatMessage('all language understanding files')}
+            ariaHidden={false}
+          />
           <NavLinks navLinks={navLinks} onSelect={onSelect} fileId={dialogId} />
         </div>
         <div css={contentEditor}>

Composer/packages/client/src/pages/language-understanding/styles.ts

@@ -3,7 +3,7 @@
 
 import { css } from '@emotion/core';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
-import { NeutralColors } from '@uifabric/fluent-theme';
+
 export const actionButton = css`
   font-size: 16px;
   margin: 0;
@@ -130,15 +130,3 @@ export const consoleStyle = css`
   padding: 15px;
   margin-bottom: 20px;
 `;
-
-export const dialogItem = selected => css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background: ${selected ? NeutralColors.gray20 : NeutralColors.white};
-  font-weight: ${selected ? FontWeights.semibold : FontWeights.semilight};
-  height: 32px;
-  font-size: ${FontSizes.small};
-  padding-left: 18px;
-  cursor: pointer;
-`;