YKI(Frontend): Improve heading structure on exam listing, especially …

…for mobile screen reader users [deploy]
Opetushallitus · Oct 26, 2023 · ebd55db · ebd55db
1 parent e8f9c50
commit ebd55db
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx
@@ -1,3 +1,4 @@
+import { Typography } from '@mui/material';
 import { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 import { Box } from '@mui/system';
 import { TFunction } from 'i18next';
@@ -123,7 +124,9 @@ export const PublicExamSessionListing = ({
       return (
         <>
           <div ref={listingHeaderRef}>
-            <H3
+            <Typography
+              variant="h2"
+              component="h3"
               aria-label={translateCommon(
                 'component.table.header.searchResultsAriaLabel',
                 {
@@ -134,7 +137,7 @@ export const PublicExamSessionListing = ({
               {translateCommon('component.table.header.searchResults', {
                 count: examSessions.length,
               })}
-            </H3>
+            </Typography>
           </div>
           <PublicExamSessionsTable
             examSessions={examSessions}

diff --git a/...tend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/...tend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx
@@ -165,11 +165,10 @@ const TableCellForPhone = ({
   children: ReactNode;
 }) => (
   <TableCell>
-    <Text>
-      <b>{columnName}</b>
-      <br aria-hidden={true} />
-      {children}
-    </Text>
+    <Typography variant="h3" component="h5">
+      {columnName}
+    </Typography>
+    <Text>{children}</Text>
   </TableCell>
 );
 
@@ -189,7 +188,7 @@ const PublicExamSessionListingCellsForPhone = ({
   return (
     <>
       <TableCell>
-        <Typography variant="h2" component="p">
+        <Typography variant="h2" component="h4">
           {ExamSessionUtils.languageAndLevelText(examSession)}
         </Typography>
       </TableCell>
@@ -214,9 +213,14 @@ const PublicExamSessionListingCellsForPhone = ({
         {registerActionAvailable ? (
           <RegisterToExamButton examSession={examSession} />
         ) : (
-          <Text className="centered uppercase">
-            <RegistrationUnavailableText examSession={examSession} />
-          </Text>
+          <>
+            <Typography variant="h3" component="h5" className="display-none">
+              {translateCommon('actions')}
+            </Typography>
+            <Text className="centered uppercase">
+              <RegistrationUnavailableText examSession={examSession} />
+            </Text>
+          </>
         )}
       </TableCell>
     </>