fixed button focus on step change

DTS-STN · Oct 16, 2024 · c3f820f · c3f820f
1 parent 08f0ebd
commit c3f820f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/components/Stepper/index.tsx b/components/Stepper/index.tsx
@@ -31,7 +31,7 @@ export function Stepper(props: StepperProps) {
           <div className="text-[22px] leading-[33px] text-[#666666] font-header-gc font-normal">
             {props.name}
           </div>
-          <div className="steps-title pb-2">{props.title}</div>
+          <h1 className="steps-title pb-2">{props.title}</h1>
         </h1>
         {props.children}
         <div className="flex justify-between sm:justify-start  pt-14 sm:pt-12">

diff --git a/components/StepperPage/index.tsx b/components/StepperPage/index.tsx
@@ -148,6 +148,11 @@ const StepperPage: React.FC = () => {
   }, [ageDate])
 
   useEffect(() => {
+    const focusedElement = document.activeElement
+    if (focusedElement instanceof HTMLButtonElement) {
+      focusedElement.blur()
+    }
+
     if (activeStep === totalSteps) {
       setIsLastStep(true)
     } else {
@@ -253,7 +258,7 @@ const StepperPage: React.FC = () => {
     return (
       <>
         {isPartnered && (
-          <h2 className="text-h2 font-header-gc mb-6 font-bold font-700">
+          <h2 className="text-[32px] leading-[36px] sm:text-h2 font-header-gc mb-6 font-bold font-700">
             {tsln.stepper.yourInfo}
           </h2>
         )}
@@ -298,7 +303,7 @@ const StepperPage: React.FC = () => {
         {isPartnered && (
           <>
             <div className="h-12 sm:h-16"></div>
-            <h2 className="text-h2 font-header-gc mb-6 font-bold font-700">
+            <h2 className="text-[32px] leading-[36px] sm:text-h2 font-header-gc mb-6 font-bold font-700">
               {tsln.stepper.partnerInfo}
             </h2>
           </>
@@ -366,6 +371,7 @@ const StepperPage: React.FC = () => {
       form.visibleFields,
       inputs
     )
+
     if (stepValid) {
       if (isLastStep) {
         submitForm()
@@ -393,7 +399,9 @@ const StepperPage: React.FC = () => {
         previousProps={{
           id: 'previous',
           text: tsln.stepper.previousStep,
-          onClick: () => setActiveStep(Math.max(activeStep - 1, 1)),
+          onClick: () => {
+            setActiveStep(Math.max(activeStep - 1, 1))
+          },
         }}
         nextProps={{
           id: 'next',

diff --git a/styles/globals.css b/styles/globals.css
@@ -117,7 +117,7 @@ html {
   }
 
   .steps-title {
-    @apply text-mobile sm:text-xs font-bold font-header-gc text-content pb-2;
+    @apply text-[32.44px] leading-[40px] sm:text-[40.55px] sm:leading-[48px] font-bold font-header-gc text-content pb-2;
     border-bottom: 0.18em solid #af3c43;
     border-image: linear-gradient(to right, #af3c43 71px, transparent 71px);
     border-image-slice: 1;