SONAR-9815 Add focus to the close button of the project creation confirmation dialog

3 files changed, 48 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
index c32b99adfcb..26c90c857b2 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import Modal from 'react-modal';
 import { Link } from 'react-router';
+import { FormattedMessage } from 'react-intl';
 import { Organization } from '../../app/types';
 import UpgradeOrganizationBox from '../../components/common/UpgradeOrganizationBox';
 import VisibilitySelector from '../../components/common/VisibilitySelector';
@@ -46,6 +47,7 @@ interface State {
 }
 
 export default class CreateProjectForm extends React.PureComponent<Props, State> {
+  closeButton: HTMLElement | null;
   mounted: boolean;
 
   constructor(props: Props) {
@@ -64,6 +66,15 @@ export default class CreateProjectForm extends React.PureComponent<Props, State>
     this.mounted = true;
   }
 
+  componentDidUpdate() {
+    // wrap with `setImmediate` because of https://github.com/reactjs/react-modal/issues/338
+    setImmediate(() => {
+      if (this.closeButton) {
+        this.closeButton.focus();
+      }
+    });
+  }
+
   componentWillUnmount() {
     this.mounted = false;
   }
@@ -134,15 +145,26 @@ export default class CreateProjectForm extends React.PureComponent<Props, State>
 
             <div className="modal-body">
               <div className="alert alert-success">
-                Project <Link to={getProjectUrl(createdProject.key)}>
-                  {createdProject.name}
-                </Link>{' '}
-                has been successfully created.
+                <FormattedMessage
+                  defaultMessage={translate(
+                    'projects_management.project_has_been_successfully_created'
+                  )}
+                  id="projects_management.project_has_been_successfully_created"
+                  values={{
+                    project: (
+                      <Link to={getProjectUrl(createdProject.key)}>{createdProject.name}</Link>
+                    )
+                  }}
+                />
               </div>
             </div>
 
             <footer className="modal-foot">
-              <a href="#" id="create-project-close" onClick={this.handleCancelClick}>
+              <a
+                href="#"
+                id="create-project-close"
+                onClick={this.handleCancelClick}
+                ref={node => (this.closeButton = node)}>
                 {translate('close')}
               </a>
             </footer>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
index 332863ffafe..7a9c5c62141 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
@@ -415,24 +415,29 @@ exports[`creates project 4`] = `
       <div
         className="alert alert-success"
       >
-        Project 
-        <Link
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          to={
+        <FormattedMessage
+          defaultMessage="projects_management.project_has_been_successfully_created"
+          id="projects_management.project_has_been_successfully_created"
+          values={
             Object {
-              "pathname": "/dashboard",
-              "query": Object {
-                "branch": undefined,
-                "id": "name",
-              },
+              "project": <Link
+                onlyActiveOnIndex={false}
+                style={Object {}}
+                to={
+                    Object {
+                        "pathname": "/dashboard",
+                        "query": Object {
+                          "branch": undefined,
+                          "id": "name",
+                        },
+                      }
+                }
+            >
+                name
+            </Link>,
             }
           }
-        >
-          name
-        </Link>
-         
-        has been successfully created.
+        />
       </div>
     </div>
     <footer
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 8f93ac535a5..bfb596a76c9 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1002,6 +1002,7 @@ project_deletion.delete_resource_confirmation=Are you sure you want to delete "{
 projects_management.delete_resource_confirmation=Are you sure you want to delete "{0}"?
 projects_management.delete_selected_warning=You're about to delete {0} selected items.
 projects_management.delete_all_warning=You're about to delete all {0} items.
+projects_management.project_has_been_successfully_created=Project {project} has been successfully created.
 
 
 #------------------------------------------------------------------------------