From b4141dc171b4a6b36d0b8de7f5d11d4f2cc5620e Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Tue, 10 Oct 2023 13:36:58 +0300 Subject: [PATCH 1/8] SHARED(Frontend): Add new .uppercase and .display-none utility classes --- frontend/packages/shared/CHANGELOG.MD | 6 ++++++ frontend/packages/shared/package.json | 2 +- .../shared/src/styles/abstracts/common/_layout.scss | 6 +++++- .../shared/src/styles/abstracts/common/_typography.scss | 6 ++++++ frontend/yarn.lock | 9 ++++++++- 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD index 05cc75a30..eda01527d 100644 --- a/frontend/packages/shared/CHANGELOG.MD +++ b/frontend/packages/shared/CHANGELOG.MD @@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Released] +## [1.9.30] - 2023-10-24 + +### Added + +- New utility classes `.uppercase` and `.display-none` + ## [1.9.29] - 2023-10-20 ### Changed diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index 68b689422..ad5034c17 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared", - "version": "1.9.29", + "version": "1.9.30", "description": "Shared Frontend Package", "exports": { "./components": "./src/components/index.tsx", diff --git a/frontend/packages/shared/src/styles/abstracts/common/_layout.scss b/frontend/packages/shared/src/styles/abstracts/common/_layout.scss index 8250c9c00..d9a31b0b4 100644 --- a/frontend/packages/shared/src/styles/abstracts/common/_layout.scss +++ b/frontend/packages/shared/src/styles/abstracts/common/_layout.scss @@ -1,3 +1,7 @@ +.display-none { + display: none; +} + /* FLEX */ .rows { display: flex; @@ -75,4 +79,4 @@ &#{&} { table-layout: auto; } -} +} \ No newline at end of file diff --git a/frontend/packages/shared/src/styles/abstracts/common/_typography.scss b/frontend/packages/shared/src/styles/abstracts/common/_typography.scss index 85e960880..b9b8d77f7 100644 --- a/frontend/packages/shared/src/styles/abstracts/common/_typography.scss +++ b/frontend/packages/shared/src/styles/abstracts/common/_typography.scss @@ -48,6 +48,12 @@ thead.heading-text th { } } +.uppercase { + &#{&} { + text-transform: uppercase; + } +} + .text-transform-none { &#{&} { text-transform: none; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index fc6c6a173..1de003e3e 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2990,7 +2990,7 @@ __metadata: languageName: unknown linkType: soft -"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29": +"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared": version: 0.0.0-use.local resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared" languageName: unknown @@ -12606,6 +12606,13 @@ __metadata: languageName: node linkType: hard +"shared@npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29": + version: 1.9.29 + resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.9.29::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.9.29%2Fbae7e4637da7470c2d65ef5969d5bdc015618fc6" + checksum: 78851915b3556ca5bc459ddf5ade477c5f62876e6a267f1bb174f4a5e0add4d957ae35882f358e748ef58bb2dea00db913aa8cf2937340199037b7ff23757a40 + languageName: node + linkType: hard + "shebang-command@npm:^2.0.0": version: 2.0.0 resolution: "shebang-command@npm:2.0.0" From 51bdbe906333a779dd07b93043f761da04aee7d1 Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Tue, 10 Oct 2023 13:38:11 +0300 Subject: [PATCH 2/8] YKI(Frontend): Mobile accessibility and usability improvements to exam session listing [deploy] --- frontend/packages/yki/package.json | 2 +- .../examSession/PublicExamSessionListingRow.tsx | 13 +++++++++++-- frontend/yarn.lock | 4 ++-- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json index 0fe93352d..4c7b3a0be 100644 --- a/frontend/packages/yki/package.json +++ b/frontend/packages/yki/package.json @@ -26,7 +26,7 @@ "yki:tslint": "yarn g:tsc --pretty --noEmit" }, "dependencies": { - "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29" + "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.30" }, "devDependencies": { "multer": "^1.4.5-lts.1" diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index be10e3f24..889ea297a 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -20,8 +20,10 @@ import { ExamSessionUtils } from 'utils/examSession'; const RegisterToExamButton = ({ examSession, + ariaLabel, }: { examSession: ExamSession; + ariaLabel?: string; }) => { const dispatch = useAppDispatch(); const { t } = usePublicTranslation({ @@ -42,6 +44,7 @@ const RegisterToExamButton = ({ }} to={AppRoutes.ExamSession.replace(/:examSessionId$/, `${examSession.id}`)} fullWidth={isPhone} + aria-label={ariaLabel} > {availablePlaces ? t('register') @@ -202,9 +205,15 @@ const PublicExamSessionListingCellsForPhone = ({ {availablePlacesText} {registerActionAvailable ? ( - + ) : ( - + )} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 1de003e3e..41dacac1b 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2990,7 +2990,7 @@ __metadata: languageName: unknown linkType: soft -"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared": +"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.30": version: 0.0.0-use.local resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared" languageName: unknown @@ -3010,7 +3010,7 @@ __metadata: resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.yki@workspace:packages/yki" dependencies: multer: ^1.4.5-lts.1 - shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29" + shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.30" languageName: unknown linkType: soft From 111e825d5ec3a65ac36e97a8df49cea84389c2bf Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Wed, 11 Oct 2023 11:34:19 +0300 Subject: [PATCH 3/8] YKI(Frontend): Construct aria-label for registration button from column header + actual CTA text. --- .../PublicExamSessionListingRow.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index 889ea297a..5346be402 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -20,10 +20,10 @@ import { ExamSessionUtils } from 'utils/examSession'; const RegisterToExamButton = ({ examSession, - ariaLabel, + ariaLabelPrefix, }: { examSession: ExamSession; - ariaLabel?: string; + ariaLabelPrefix?: string; }) => { const dispatch = useAppDispatch(); const { t } = usePublicTranslation({ @@ -34,6 +34,12 @@ const RegisterToExamButton = ({ const { availablePlaces, availableQueue } = ExamSessionUtils.getEffectiveRegistrationPeriodDetails(examSession); + const label = availablePlaces + ? t('register') + : availableQueue + ? t('orderCancellationNotification') + : t('full'); + return ( - {availablePlaces - ? t('register') - : availableQueue - ? t('orderCancellationNotification') - : t('full')} + {label} ); }; @@ -207,7 +209,7 @@ const PublicExamSessionListingCellsForPhone = ({ {registerActionAvailable ? ( ) : ( Date: Wed, 11 Oct 2023 11:35:14 +0300 Subject: [PATCH 4/8] YKI(Frontend): Try to make screen readers ignore br-tag [deploy] --- .../PublicExamSessionListingRow.tsx | 2 +- .../PublicExamSessionListing.test.tsx.snap | 40 ++++++++++++++----- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index 5346be402..e03cbd569 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -98,7 +98,7 @@ const renderAdmissionPeriod = ({ return ( {startTimeStr} — -
+
{endTimeStr} ); diff --git a/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap index edd095712..0c4b94cd5 100644 --- a/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap +++ b/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap @@ -238,7 +238,9 @@ Array [ > 6/1/2023 klo 10.00 — -
+
8/1/2023 klo 16.00 @@ -299,7 +301,9 @@ Array [ > 8/1/2023 klo 10.00 — -
+
9/1/2024 klo 16.00 @@ -383,7 +387,9 @@ Array [ > 12/1/2030 klo 10.00 — -
+
12/10/2039 klo 16.00 @@ -441,7 +447,9 @@ Array [ > 12/3/2025 klo 10.00 — -
+
12/14/2039 klo 16.00 @@ -499,7 +507,9 @@ Array [ > 2/1/2019 klo 10.00 — -
+
2/28/2039 klo 16.00 @@ -583,7 +593,9 @@ Array [ > 2/1/2019 klo 10.00 — -
+
2/28/2039 klo 16.00 @@ -667,7 +679,9 @@ Array [ > 2/1/2019 klo 10.00 — -
+
2/28/2029 klo 16.00 @@ -751,7 +765,9 @@ Array [ > 2/1/2019 klo 10.00 — -
+
2/28/2039 klo 16.00 @@ -835,7 +851,9 @@ Array [ > 2/1/2019 klo 10.00 — -
+
2/28/2039 klo 16.00 @@ -893,7 +911,9 @@ Array [ > 11/1/2020 klo 10.00 — -
+
12/2/2020 klo 16.00 From e0b6e6a998de29dbddb51225f8d126a8212dc2ac Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Thu, 12 Oct 2023 15:24:00 +0300 Subject: [PATCH 5/8] YKI(Frontend): Rewrite exam session listing on mobile. Use multiple cells per row, use CSS to force into responsive shape. [deploy] --- .../PublicExamSessionListingHeader.tsx | 24 +++---- .../PublicExamSessionListingRow.tsx | 66 ++++++++++--------- .../registration/_exam-session-listing.scss | 19 ++++++ frontend/packages/yki/src/styles/styles.scss | 1 + .../PublicExamSessionListing.test.tsx.snap | 10 ++- 5 files changed, 72 insertions(+), 48 deletions(-) create mode 100644 frontend/packages/yki/src/styles/components/registration/_exam-session-listing.scss diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx index ed1138e9a..07d309c31 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx @@ -1,25 +1,21 @@ import { TableCell, TableHead, TableRow } from '@mui/material'; -import { useWindowProperties } from 'shared/hooks'; import { useCommonTranslation } from 'configs/i18n'; export const PublicExamSessionListingHeader = () => { const translateCommon = useCommonTranslation(); - const { isPhone } = useWindowProperties(); return ( - - {!isPhone && ( - - {translateCommon('examSession')} - {translateCommon('examDate')} - {translateCommon('institution')} - {translateCommon('registrationPeriod')} - {translateCommon('price')} - {translateCommon('placesAvailable')} - {translateCommon('actions')} - - )} + + + {translateCommon('examSession')} + {translateCommon('examDate')} + {translateCommon('institution')} + {translateCommon('registrationPeriod')} + {translateCommon('price')} + {translateCommon('placesAvailable')} + {translateCommon('actions')} + ); }; diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index e03cbd569..35c241987 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -20,10 +20,8 @@ import { ExamSessionUtils } from 'utils/examSession'; const RegisterToExamButton = ({ examSession, - ariaLabelPrefix, }: { examSession: ExamSession; - ariaLabelPrefix?: string; }) => { const dispatch = useAppDispatch(); const { t } = usePublicTranslation({ @@ -34,12 +32,6 @@ const RegisterToExamButton = ({ const { availablePlaces, availableQueue } = ExamSessionUtils.getEffectiveRegistrationPeriodDetails(examSession); - const label = availablePlaces - ? t('register') - : availableQueue - ? t('orderCancellationNotification') - : t('full'); - return ( - {label} + {availablePlaces + ? t('register') + : availableQueue + ? t('orderCancellationNotification') + : t('full')} ); }; @@ -113,7 +108,7 @@ const AdmissionPeriodText = ({ examSession }: { examSession: ExamSession }) => { } else { return ( <> - {translateCommon('postAdmission')}:
+ {translateCommon('postAdmission')}:
{renderAdmissionPeriod(relevantPeriod)} ); @@ -174,43 +169,52 @@ const PublicExamSessionListingCellsForPhone = ({ const translateCommon = useCommonTranslation(); return ( - -
+ <> + {ExamSessionUtils.languageAndLevelText(examSession)} + + - {translateCommon('examDate')} -
+ {translateCommon('examDate')} +
{DateUtils.formatOptionalDate(examSession.session_date, 'l')} + + - {translateCommon('institution')} -
+ {translateCommon('institution')} +
{locationInfo.name} -
+
{ExamSessionUtils.getMunicipality(locationInfo)} + + - {translateCommon('registrationPeriod')} -
+ {translateCommon('registrationPeriod')} +
+ + - {translateCommon('price')} -
+ {translateCommon('price')} +
{examSession.exam_fee} € + + - {translateCommon('placesAvailable')} -
+ {translateCommon('placesAvailable')} +
{availablePlacesText} + + {registerActionAvailable ? ( - + ) : ( )} -
- + + ); }; @@ -248,7 +252,7 @@ export const PublicExamSessionListingRow = ({ if (isPhone) { return ( - + postAdmission : -
+
@@ -295,7 +297,9 @@ Array [ > postAdmission : -
+
From 144d29fde542e98b50a6bfd61765c90e009fe1c5 Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Thu, 12 Oct 2023 15:49:02 +0300 Subject: [PATCH 6/8] YKI(Frontend): Refactor, extract common patterns [deploy] --- .../PublicExamSessionListingRow.tsx | 79 +++++++++---------- 1 file changed, 37 insertions(+), 42 deletions(-) diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index 35c241987..7c0b197aa 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -1,5 +1,6 @@ import { TableCell, TableRow, Typography } from '@mui/material'; import dayjs, { Dayjs } from 'dayjs'; +import { ReactNode } from 'react'; import { CustomButtonLink, Text } from 'shared/components'; import { Color, Variant } from 'shared/enums'; import { useWindowProperties } from 'shared/hooks'; @@ -108,7 +109,8 @@ const AdmissionPeriodText = ({ examSession }: { examSession: ExamSession }) => { } else { return ( <> - {translateCommon('postAdmission')}:
+ {translateCommon('postAdmission')}: +
{renderAdmissionPeriod(relevantPeriod)} ); @@ -155,6 +157,22 @@ const PublicExamSessionListingCellsForDesktop = ({ ); }; +const TableCellForPhone = ({ + columnName, + children, +}: { + columnName: string; + children: ReactNode; +}) => ( + + + {columnName} +
+ {children} + + +); + const PublicExamSessionListingCellsForPhone = ({ examSession, locationInfo, @@ -175,51 +193,28 @@ const PublicExamSessionListingCellsForPhone = ({ {ExamSessionUtils.languageAndLevelText(examSession)} - - - {translateCommon('examDate')} -
- {DateUtils.formatOptionalDate(examSession.session_date, 'l')} - - - - - {translateCommon('institution')} -
- {locationInfo.name} -
- {ExamSessionUtils.getMunicipality(locationInfo)} - - - - - {translateCommon('registrationPeriod')} -
- - - - - - {translateCommon('price')} -
- {examSession.exam_fee} € - - - - - {translateCommon('placesAvailable')} -
- {availablePlacesText} - - + + {DateUtils.formatOptionalDate(examSession.session_date, 'l')} + + + {locationInfo.name} +
+ {ExamSessionUtils.getMunicipality(locationInfo)} + + + + + + {examSession.exam_fee} € + + + {availablePlacesText} + {registerActionAvailable ? ( ) : ( - + )} From e8f9c502bb2275fcc51469db5ff2e4cf3ebbdf84 Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Tue, 17 Oct 2023 17:06:30 +0300 Subject: [PATCH 7/8] YKI(Frontend): Don't hide column name from screen reader [deploy] --- .../registration/examSession/PublicExamSessionListingRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx index 7c0b197aa..8d129cd7f 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx @@ -166,7 +166,7 @@ const TableCellForPhone = ({ }) => ( - {columnName} + {columnName}
{children} From ebd55db2091bdd5c71a50891f5b83493680d3a32 Mon Sep 17 00:00:00 2001 From: Pyry Koivisto Date: Tue, 24 Oct 2023 14:35:42 +0300 Subject: [PATCH 8/8] YKI(Frontend): Improve heading structure on exam listing, especially for mobile screen reader users [deploy] --- .../examSession/PublicExamSessionListing.tsx | 7 ++++-- .../PublicExamSessionListingRow.tsx | 22 +++++++++++-------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx index 854357258..d3dc842a0 100644 --- 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 ( <>
-

+

( - - {columnName} -
- {children} - + + {columnName} + + {children} ); @@ -189,7 +188,7 @@ const PublicExamSessionListingCellsForPhone = ({ return ( <> - + {ExamSessionUtils.languageAndLevelText(examSession)} @@ -214,9 +213,14 @@ const PublicExamSessionListingCellsForPhone = ({ {registerActionAvailable ? ( ) : ( - - - + <> + + {translateCommon('actions')} + + + + + )}