fix: error page accesibility heading order issue

IQSS · Oct 17, 2024 · b0efbbc · b0efbbc
1 parent 28e652f
commit b0efbbc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/sections/error-page/ErrorPage.module.scss b/src/sections/error-page/ErrorPage.module.scss
@@ -31,4 +31,16 @@
   justify-content: center;
   width: 100%;
   padding-block: 2rem;
+
+  h1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+
+    span {
+      display: block;
+      font-size: 22px;
+    }
+  }
 }
diff --git a/src/sections/error-page/ErrorPage.tsx b/src/sections/error-page/ErrorPage.tsx
@@ -24,10 +24,10 @@ export function ErrorPage({ fullViewport = false }: AppLoaderProps) {
       <div className={styles['middle-errorMessage-wrapper']}>
         <div className={styles['icon-layout']}>
           <ExclamationCircle color={theme.color.dangerColor} size={62} />
-          <div aria-label="error-page">
-            <h1>{t('message.heading')}</h1>
-            <h4>{t('message.errorText')}</h4>
-          </div>
+          <h1>
+            {t('message.heading')}
+            <span>{t('message.errorText')}</span>
+          </h1>
         </div>
 
         <Link to="/" className="btn btn-secondary">