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/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