a11y: Accessibility in lg/lu page (#2265)

* auto focus to editor * auto focus to new one Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Mar 14, 2020 · be87b34 · be87b34
1 parent 057ae24
commit be87b34
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/Composer/packages/client/src/pages/language-generation/code-editor.tsx b/Composer/packages/client/src/pages/language-generation/code-editor.tsx
@@ -44,7 +44,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   const hash = props.location?.hash ?? '';
   const hashLine = querystring.parse(hash).L;
-  const line = Array.isArray(hashLine) ? +hashLine[0] : typeof hashLine === 'string' ? +hashLine : undefined;
+  const line = Array.isArray(hashLine) ? +hashLine[0] : typeof hashLine === 'string' ? +hashLine : 0;
 
   const inlineMode = !!template;
   const [content, setContent] = useState(template?.body || file?.content);
@@ -69,7 +69,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
   };
 
   useEffect(() => {
-    if (lgEditor && line !== undefined) {
+    if (lgEditor) {
       window.requestAnimationFrame(() => {
         lgEditor.revealLine(line);
         lgEditor.focus();

diff --git a/Composer/packages/client/src/pages/language-generation/table-view.tsx b/Composer/packages/client/src/pages/language-generation/table-view.tsx
@@ -39,6 +39,8 @@ const TableView: React.FC<TableViewProps> = props => {
 
   const activeDialog = dialogs.find(({ id }) => id === fileId);
 
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
   useEffect(() => {
     if (!file || isEmpty(file)) return;
 
@@ -87,6 +89,7 @@ const TableView: React.FC<TableViewProps> = props => {
         toTemplateName: resolvedName,
       };
       copyLgTemplate(payload);
+      setFocusedIndex(templates.length);
     },
     [templates, file]
   );
@@ -229,6 +232,7 @@ const TableView: React.FC<TableViewProps> = props => {
         <DetailsList
           componentRef={listRef}
           items={templates}
+          initialFocusedIndex={focusedIndex}
           styles={{
             root: {
               overflowX: 'hidden',

diff --git a/Composer/packages/client/src/pages/language-understanding/code-editor.tsx b/Composer/packages/client/src/pages/language-understanding/code-editor.tsx
@@ -43,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   const hash = props.location?.hash ?? '';
   const hashLine = querystring.parse(hash).L;
-  const line = Array.isArray(hashLine) ? +hashLine[0] : typeof hashLine === 'string' ? +hashLine : undefined;
+  const line = Array.isArray(hashLine) ? +hashLine[0] : typeof hashLine === 'string' ? +hashLine : 0;
 
   const inlineMode = !!intent;
   const [content, setContent] = useState(intent?.Body || file?.content);
@@ -66,7 +66,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
   };
 
   useEffect(() => {
-    if (luEditor && line !== undefined) {
+    if (luEditor) {
       window.requestAnimationFrame(() => {
         luEditor.revealLine(line);
         luEditor.focus();