fix: modify skip button according to feedback comments (#264)

* fix: adjust skip button according to feedback * fix: undo typescript version change * fix:check collection id to see if it exists * fix: resolve comments * refactor: remove console Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>
microsoft · May 21, 2020 · 814276a · 814276a
1 parent 37aa859
commit 814276a
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -73,6 +73,7 @@ export default class App extends React.Component<IAppProps> {
                     onError={this.props.actions.showError}
                     onClearError={this.props.actions.clearError} />
                 {/* Don't render app contents during a render error */}
+                <SkipButton skipTo="skipToMainContent">{strings.common.skipToMainContent}</SkipButton>
                 {(!this.props.appError || this.props.appError.errorCode !== ErrorCode.GenericRenderError) &&
                     <KeyboardManager>
                         <BrowserRouter>
@@ -95,7 +96,6 @@ export default class App extends React.Component<IAppProps> {
                                 <ToastContainer className="frtt-toast-container" role="alert"/>
                             </div>
                         </BrowserRouter>
-                        <SkipButton skipTo="appSidebar">{strings.common.skipToSidebar}</SkipButton>
                     </KeyboardManager>
                 }
             </Fragment>

diff --git a/src/react/components/pages/appSettings/appSettingsPage.tsx b/src/react/components/pages/appSettings/appSettingsPage.tsx
@@ -65,12 +65,11 @@ export default class AppSettingsPage extends React.Component<IAppSettingsProps>
 
     public render() {
         return (
-            <div className="app-settings-page" id="pageAppSettings">
+            <div className="app-settings-page skipToMainContent" id="pageAppSettings">
                 <AppSettingsForm
                     appSettings={this.props.appSettings}
                     onSubmit={this.onFormSubmit}
                     onCancel={this.onFormCancel} />
-                <SkipButton skipTo="pageAppSettings">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/pages/connections/connectionsPage.tsx b/src/react/components/pages/connections/connectionsPage.tsx
@@ -94,7 +94,7 @@ export default class ConnectionPage extends React.Component<IConnectionPageProps
 
     public render() {
         return (
-            <div className="app-connections-page" id="pageConnections">
+            <div className="app-connections-page skipToMainContent" id="pageConnections">
                 <div className="app-connections-page-list bg-lighter-1">
                     <CondensedList
                         title={strings.connections.title}
@@ -124,8 +124,6 @@ export default class ConnectionPage extends React.Component<IConnectionPageProps
                         onSubmit={this.onFormSubmit}
                         onCancel={this.onFormCancel} />
                 } />
-
-                <SkipButton skipTo="pageConnections">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/pages/editorPage/editorPage.tsx b/src/react/components/pages/editorPage/editorPage.tsx
@@ -186,7 +186,7 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
         }
 
         return (
-            <div className="editor-page" id="pageEditor">
+            <div className="editor-page skipToMainContent" id="pageEditor">
                 {
                     tagIndexKeys.map((index) =>
                         (<KeyboardBinding
@@ -319,7 +319,6 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                     when={isRunningOCRs || isCanvasRunningOCR}
                     message={"An OCR operation is currently in progress, are you sure you want to leave?"}
                 />
-                <SkipButton skipTo = "pageEditor">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/pages/homepage/homePage.tsx b/src/react/components/pages/homepage/homePage.tsx
@@ -87,8 +87,8 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
                             {/* eslint-disable-next-line */}
                             <a ref={this.newProjectRef}
                                 id="home_newProject"
-                                href="#" onClick={this.createNewProject} className="p-5 new-project" role="button">
-                                <FontIcon iconName="AddTo" className="icon-9x" />
+                                href="#" onClick={this.createNewProject} className="p-5 new-project skipToMainContent" role="button">
+                                <FontIcon iconName="AddTo" className="icon-9x"  />
                                 <div>{strings.homePage.newProject}</div>
                             </a>
                         </li>
@@ -124,7 +124,6 @@ export default class HomePage extends React.Component<IHomePageProps, IHomePageS
                     message={(project: IProject) => `${strings.homePage.deleteProject.confirmation} ${project.name}?`}
                     confirmButtonTheme={getPrimaryRedTheme()}
                     onConfirm={this.deleteProject} />
-                <SkipButton skipTo="pageHome">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/pages/predict/predictPage.tsx b/src/react/components/pages/predict/predictPage.tsx
@@ -166,7 +166,7 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
         ];
 
         return (
-            <div className="predict" id="pagePredict">
+            <div className="predict skipToMainContent" id="pagePredict">
                 <div className="predict-main">
                     {this.state.file && this.state.imageUri && this.renderImageMap()}
                     {this.renderPrevPageButton()}
@@ -332,7 +332,6 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
                     when={this.state.isPredicting}
                     message={"A prediction operation is currently in progress, are you sure you want to leave?"}
                 />
-                <SkipButton skipTo="pagePredict">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/pages/projectSettings/projectSettingsPage.tsx b/src/react/components/pages/projectSettings/projectSettingsPage.tsx
@@ -111,7 +111,7 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
     // Hide ProjectMetrics for private-preview
     public render() {
         return (
-            <div className="project-settings-page" id="pageProjectSettings">
+            <div className="project-settings-page skipToMainContent" id="pageProjectSettings">
                 <div className="project-settings-page-settings m-3">
                     <h3 className="flex-center">
                         <FontIcon iconName="DocumentManagement" />
@@ -130,7 +130,6 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
                             action={this.state.action} />
                     </div>
                 </div>
-                <SkipButton skipTo="pageProjectSettings">{strings.common.skipToMainContent}</SkipButton>
                 {this.state.isError &&
                     <Redirect to="/" />
                 }

diff --git a/src/react/components/pages/train/trainPage.tsx b/src/react/components/pages/train/trainPage.tsx
@@ -106,7 +106,7 @@ export default class TrainPage extends React.Component<ITrainPageProps, ITrainPa
         const currTrainRecord = this.state.currTrainRecord;
 
         return (
-            <div className="train-page" id="pageTrain">
+            <div className="train-page skipToMainContent" id="pageTrain">
                 <main className="train-page-main">
                     {currTrainRecord &&
                         <div>
@@ -182,7 +182,6 @@ export default class TrainPage extends React.Component<ITrainPageProps, ITrainPa
                     when={this.state.isTraining}
                     message={"A training operation is currently in progress, are you sure you want to leave?"}
                 />
-                <SkipButton skipTo="pageTrain">{strings.common.skipToMainContent}</SkipButton>
             </div>
         );
     }

diff --git a/src/react/components/shell/skipButton.tsx b/src/react/components/shell/skipButton.tsx
@@ -11,14 +11,17 @@ export class SkipButton extends React.Component<ISkipButtonProps> {
 
     public render() {
         return (
-            <div className="skip-button">
+            <div className="skip-button" tabIndex={1}>
                 <a href="#" onClick={this.skipToId}>{this.props.children}</a>
             </div>);
     }
 
     private skipToId = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
-        const element = document.getElementById(this.props.skipTo);
+
+        const collection = document.getElementsByClassName(this.props.skipTo);
+        const element = collection.length > 0 ? collection[0] as HTMLElement : null;
+
         if (!element) {
             return;
         }