Skip to content

Commit

Permalink
a11y: Accessibility in lg/lu page (#2265)
Browse files Browse the repository at this point in the history
* auto focus to editor

* auto focus to new one

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
  • Loading branch information
zhixzhan and cwhitten authored Mar 14, 2020
1 parent 057ae24 commit be87b34
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -69,7 +69,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
};

useEffect(() => {
if (lgEditor && line !== undefined) {
if (lgEditor) {
window.requestAnimationFrame(() => {
lgEditor.revealLine(line);
lgEditor.focus();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -87,6 +89,7 @@ const TableView: React.FC<TableViewProps> = props => {
toTemplateName: resolvedName,
};
copyLgTemplate(payload);
setFocusedIndex(templates.length);
},
[templates, file]
);
Expand Down Expand Up @@ -229,6 +232,7 @@ const TableView: React.FC<TableViewProps> = props => {
<DetailsList
componentRef={listRef}
items={templates}
initialFocusedIndex={focusedIndex}
styles={{
root: {
overflowX: 'hidden',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -66,7 +66,7 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
};

useEffect(() => {
if (luEditor && line !== undefined) {
if (luEditor) {
window.requestAnimationFrame(() => {
luEditor.revealLine(line);
luEditor.focus();
Expand Down

0 comments on commit be87b34

Please sign in to comment.