Align new project skip link behaviour with new project button (#10382)

* Align new project skip link behaviour with new project button

* Rename method, convert to async await

Author: microbit-robert

localtypings/pxteditor.d.ts

@@ -926,6 +926,7 @@ declare namespace pxt.editor {
 
         newEmptyProject(name?: string, documentation?: string, preferredEditor?: string): void;
         newProject(options?: pxt.editor.ProjectCreationOptions): void;
+        newUserCreatedProject(firstProject: boolean): Promise<void>;
         createProjectAsync(options: pxt.editor.ProjectCreationOptions): Promise<void>;
         importExampleAsync(options: ExampleImportOptions): Promise<void>;
         showScriptManager(): void;

webapp/src/accessibility.tsx

@@ -104,9 +104,11 @@ export class HomeAccessibilityMenu extends data.Component<HomeAccessibilityMenuP
         this.toggleHighContrast = this.toggleHighContrast.bind(this);
     }
 
-    newProject() {
+    async newProject(): Promise<void> {
         pxt.tickEvent("accmenu.home.new", undefined, { interactiveConsent: true });
-        this.props.parent.newProject();
+        const headers = this.getData(`headers:`);
+        const firstProject = (!headers || headers?.length == 0);
+        return this.props.parent.newUserCreatedProject(firstProject)
     }
 
     importProjectDialog() {

webapp/src/app.tsx

@@ -2914,6 +2914,16 @@ export class ProjectView
             });
     }
 
+    async newUserCreatedProject(firstProject: boolean): Promise<void> {
+        if (pxt.appTarget.appTheme.nameProjectFirst || pxt.appTarget.appTheme.chooseLanguageRestrictionOnNewProject) {
+            const projectSettings = await this.askForProjectCreationOptionsAsync()
+            const { name, languageRestriction } = projectSettings
+            this.newProject({ name, languageRestriction, firstProject });
+        } else {
+            this.newProject({ firstProject });
+        }
+    }
+
     async createProjectAsync(options: ProjectCreationOptions): Promise<void> {
         pxt.perf.measureStart(Measurements.CreateProjectAsync)
         this.setSideDoc(undefined);

webapp/src/projects.tsx

@@ -625,19 +625,6 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
         return headers;
     }
 
-    newProject(firstProject?: boolean) {
-        pxt.tickEvent("projects.new", undefined, { interactiveConsent: true });
-        if (pxt.appTarget.appTheme.nameProjectFirst || pxt.appTarget.appTheme.chooseLanguageRestrictionOnNewProject) {
-            this.props.parent.askForProjectCreationOptionsAsync()
-                .then(projectSettings => {
-                    const { name, languageRestriction } = projectSettings
-                    this.props.parent.newProject({ name, languageRestriction, firstProject });
-                })
-        } else {
-            this.props.parent.newProject({ firstProject });
-        }
-    }
-
     showScriptManager() {
         pxt.tickEvent("projects.showscriptmanager", undefined, { interactiveConsent: true });
         this.props.parent.showScriptManager();
@@ -768,7 +755,7 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
             const isFirstProject = (!headers || headers?.length == 0);
             return <carousel.Carousel tickId="myprojects" bleedPercent={20}>
                 {showNewProject && <div role="button" className="ui card link buttoncard newprojectcard" title={lf("Creates a new empty project")}
-                    onClick={() => this.newProject(isFirstProject)} onKeyDown={fireClickOnEnter} >
+                    onClick={() => this.props.parent.newUserCreatedProject(isFirstProject)} onKeyDown={fireClickOnEnter} >
                     <div className="content">
                         <sui.Icon icon="huge add circle" />
                         <span className="header">{lf("New Project")}</span>