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

@@ -874,6 +874,7 @@
   "processing": "",
   "processing_uppercase": "",
   "professional": "",
+  "progress_bar_percentage": "",
   "project_approaching_file_limit": "",
   "project_figure_modal": "",
   "project_flagged_too_many_compiles": "",

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

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 {

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",