From 9c4cc289d247dfd9b605ae2fe8886d4384fa3a11 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Fri, 24 Nov 2023 11:43:31 +0100
Subject: [PATCH] ODC and confirm email refactor (#15739)

* use class name instead of id

* storybook rename

* refactor types

* linting

* prettier

* classname in react component

* lint error

* add classname in confirm-email success

* remove decorators

* allow focusing with the tab key to get information about the progress

* group form and radio chip elements

* single type assertion

---------

Co-authored-by: Rebeka <o.dekany@gmail.com>
GitOrigin-RevId: 58a64ebdde5c57619a81ae4b68cdb8a6b44dc295
---
 services/web/frontend/extracted-translations.json            | 1 +
 services/web/frontend/js/shared/components/stepper.tsx       | 4 ++++
 .../frontend/stylesheets/modules/overleaf-integration.less   | 5 +++--
 services/web/locales/en.json                                 | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index fcae84f04c..857b64f8c4 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -874,6 +874,7 @@
   "processing": "",
   "processing_uppercase": "",
   "professional": "",
+  "progress_bar_percentage": "",
   "project_approaching_file_limit": "",
   "project_figure_modal": "",
   "project_flagged_too_many_compiles": "",
diff --git a/services/web/frontend/js/shared/components/stepper.tsx b/services/web/frontend/js/shared/components/stepper.tsx
index 2013d7e30f..1c4311c1b7 100644
--- a/services/web/frontend/js/shared/components/stepper.tsx
+++ b/services/web/frontend/js/shared/components/stepper.tsx
@@ -1,12 +1,16 @@
 import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
 
 export function Stepper({ steps, active }: { steps: number; active: number }) {
+  const { t } = useTranslation()
   return (
     <div
       className="stepper"
       role="progressbar"
+      aria-label={t('progress_bar_percentage')}
       aria-valuenow={active + 1}
       aria-valuemax={steps}
+      tabIndex={0}
     >
       {Array.from({ length: steps }).map((_, i) => (
         <div
diff --git a/services/web/frontend/stylesheets/modules/overleaf-integration.less b/services/web/frontend/stylesheets/modules/overleaf-integration.less
index c328d272cb..dbd9dcb232 100644
--- a/services/web/frontend/stylesheets/modules/overleaf-integration.less
+++ b/services/web/frontend/stylesheets/modules/overleaf-integration.less
@@ -1,4 +1,4 @@
-#confirm-email {
+.onboarding-confirm-email {
   max-width: 400px;
   padding: 24px;
   margin: 0 auto;
@@ -31,7 +31,7 @@
   }
 }
 
-#onboarding-data-collection {
+.onboarding-data-collection-form {
   max-width: 720px;
   padding: 24px;
   margin: 0 auto;
@@ -58,6 +58,7 @@
 
   .onboarding-question-title {
     font-size: 20px;
+    border-bottom: none;
   }
 
   p {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 3983208736..75743cf69d 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1347,6 +1347,7 @@
   "processing_uppercase": "Processing",
   "processing_your_request": "Please wait while we process your request.",
   "professional": "Professional",
+  "progress_bar_percentage": "Progress bar from 0 to 100%",
   "project": "project",
   "project_approaching_file_limit": "This project is approaching the file limit",
   "project_figure_modal": "Project",