From b2f58fbf578c0186fd4652e5b90f957a5c5f5503 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Mon, 21 Oct 2024 16:10:43 +0200 Subject: [PATCH 1/3] :wheelchair: [open-formulieren/open-forms#4720] Focusable elements --- src/scss/components/_deprecated-select.scss | 7 +++++++ src/scss/components/_progress-indicator.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/scss/components/_deprecated-select.scss b/src/scss/components/_deprecated-select.scss index a9fed9a5a..f4ec35fd3 100644 --- a/src/scss/components/_deprecated-select.scss +++ b/src/scss/components/_deprecated-select.scss @@ -48,6 +48,13 @@ $select-background-color: var(--of-select-background-color, $color-white); var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size)) - 2 * #{$list-hpadding} ); + &:focus-within { + outline-color: var(--utrecht-focus-outline-color, revert); + outline-offset: var(--utrecht-focus-outline-offset, revert); + outline-style: var(--utrecht-focus-outline-style, revert); + outline-width: var(--utrecht-focus-outline-width, revert); + } + .choices__list { background-color: var( --utrecht-select-background-color, diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss index 1153f98d2..09af9c971 100644 --- a/src/scss/components/_progress-indicator.scss +++ b/src/scss/components/_progress-indicator.scss @@ -87,6 +87,13 @@ font-size: var(--of-progress-indicator-mobile-header-font-size, 1.125rem); line-height: var(--of-progress-indicator-mobile-header-line-height, 1.1333); + &:focus { + outline-color: var(--utrecht-focus-outline-color, revert); + outline-offset: var(--utrecht-focus-outline-offset, revert); + outline-style: var(--utrecht-focus-outline-style, revert); + outline-width: var(--utrecht-focus-outline-width, revert); + } + .fa-icon { display: block; flex-shrink: 0; From eb0e1ac09b4db267c5cce3261df12dd062bb16ff Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Mon, 21 Oct 2024 16:43:34 +0200 Subject: [PATCH 2/3] :wheelchair: [open-formulieren/open-forms#4720] Self explaining links --- src/components/Sessions/SessionExpired.js | 2 +- .../CreateAppointment/CreateAppointment.spec.js | 2 +- src/formio/components/FileField.stories.js | 4 ++-- src/formio/templates/file.ejs | 2 +- src/i18n/compiled/en.json | 6 +++--- src/i18n/compiled/nl.json | 6 +++--- src/i18n/messages/en.json | 4 ++-- src/i18n/messages/nl.json | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/Sessions/SessionExpired.js b/src/components/Sessions/SessionExpired.js index 4fc0f22db..a3529a720 100644 --- a/src/components/Sessions/SessionExpired.js +++ b/src/components/Sessions/SessionExpired.js @@ -36,7 +36,7 @@ const SessionExpired = () => { {chunks}, }} diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.spec.js b/src/components/appointments/CreateAppointment/CreateAppointment.spec.js index 0f1dfdffd..1c7143328 100644 --- a/src/components/appointments/CreateAppointment/CreateAppointment.spec.js +++ b/src/components/appointments/CreateAppointment/CreateAppointment.spec.js @@ -116,7 +116,7 @@ describe('Create appointment session expiration', () => { await screen.findByText('Your session has expired', undefined, {timeout: 2000}); // and click the link to restart... - const restartLink = await screen.findByRole('link', {name: 'here'}); + const restartLink = await screen.findByRole('link', {name: 'Click here to restart'}); await user.click(restartLink); // Here, take this if you need to figure out which keys are present diff --git a/src/formio/components/FileField.stories.js b/src/formio/components/FileField.stories.js index c1e940841..a1c73d899 100644 --- a/src/formio/components/FileField.stories.js +++ b/src/formio/components/FileField.stories.js @@ -129,7 +129,7 @@ export const OneAllowedFileType = { await sleep(200); // formio needs time to bind click events... const canvas = within(canvasElement); // Click on browse to make the input node injected in the dom - const browseLink = canvas.getByRole('link', {name: 'browse'}); + const browseLink = canvas.getByRole('link', {name: 'uploadFile'}); // This opens the file dialog, but without it the input node is not injected into the DOM await userEvent.click(browseLink); @@ -167,7 +167,7 @@ export const MultipleAllowedFileTypes = { await sleep(200); // formio needs time to bind click events... const canvas = within(canvasElement); // Click on browse to make the input node injected in the dom - const browseLink = canvas.getByRole('link', {name: 'browse'}); + const browseLink = canvas.getByRole('link', {name: 'uploadFile'}); await userEvent.click(browseLink); // Upload a file of the wrong type diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs index 68a4d8dd9..3c975bf51 100644 --- a/src/formio/templates/file.ejs +++ b/src/formio/templates/file.ejs @@ -90,7 +90,7 @@ {{ctx.t('or')}} - {{ctx.t('browse')}} + {{ctx.t('uploadFile', {fileFieldLabel: ctx.component.label})}} {% if (ctx.component.multiple) { %} {{ctx.t('to attach files.')}} diff --git a/src/i18n/compiled/en.json b/src/i18n/compiled/en.json index b5a918b35..26079fe83 100644 --- a/src/i18n/compiled/en.json +++ b/src/i18n/compiled/en.json @@ -1330,13 +1330,13 @@ "abtbgK": [ { "type": 0, - "value": "Your session has expired. Click " + "value": "Your session has expired. " }, { "children": [ { "type": 0, - "value": "here" + "value": "Click here to restart" } ], "type": 8, @@ -1344,7 +1344,7 @@ }, { "type": 0, - "value": " to restart." + "value": "." } ], "ay8sO5": [ diff --git a/src/i18n/compiled/nl.json b/src/i18n/compiled/nl.json index a0496a5f1..3140a37ca 100644 --- a/src/i18n/compiled/nl.json +++ b/src/i18n/compiled/nl.json @@ -1334,13 +1334,13 @@ "abtbgK": [ { "type": 0, - "value": "Je sessie is verlopen. Klik " + "value": "Je sessie is verlopen. " }, { "children": [ { "type": 0, - "value": "hier" + "value": "Klik hier om opnieuw te beginnen" } ], "type": 8, @@ -1348,7 +1348,7 @@ }, { "type": 0, - "value": " om opnieuw te beginnen." + "value": "." } ], "ay8sO5": [ diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 4bb681f04..b3fa16ada 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -640,9 +640,9 @@ "originalDefault": "No" }, "abtbgK": { - "defaultMessage": "Your session has expired. Click here to restart.", + "defaultMessage": "Your session has expired. Click here to restart.", "description": "Session expired error message", - "originalDefault": "Your session has expired. Click here to restart." + "originalDefault": "Your session has expired. Click here to restart." }, "ay8sO5": { "defaultMessage": "Contact details", diff --git a/src/i18n/messages/nl.json b/src/i18n/messages/nl.json index 002a65108..ddbfff6b4 100644 --- a/src/i18n/messages/nl.json +++ b/src/i18n/messages/nl.json @@ -649,9 +649,9 @@ "originalDefault": "No" }, "abtbgK": { - "defaultMessage": "Je sessie is verlopen. Klik hier om opnieuw te beginnen.", + "defaultMessage": "Je sessie is verlopen. Klik hier om opnieuw te beginnen.", "description": "Session expired error message", - "originalDefault": "Your session has expired. Click here to restart." + "originalDefault": "Your session has expired. Click here to restart." }, "ay8sO5": { "defaultMessage": "Je gegevens", From 88dc2df30098071d73b39bb79bdad5f0345eb381 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Tue, 22 Oct 2024 11:12:50 +0200 Subject: [PATCH 3/3] :sparkles: [open-formulieren/open-forms#4720] Added form name to the title of the form step pages --- src/components/FormStep/index.js | 2 +- src/components/Summary/SubmissionSummary.js | 2 +- src/hooks/useTitle.js | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/FormStep/index.js b/src/components/FormStep/index.js index 0b8f72721..83e46102f 100644 --- a/src/components/FormStep/index.js +++ b/src/components/FormStep/index.js @@ -353,7 +353,7 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS const currentStepIndex = form.steps.indexOf(formStep); const submissionStep = submission.steps.find(s => s.formStep === formStep.url); - useTitle(formStep.formDefinition); + useTitle(formStep.formDefinition, form.name); /** * Fetches the form step data from the backend. diff --git a/src/components/Summary/SubmissionSummary.js b/src/components/Summary/SubmissionSummary.js index 1e96ba9df..de05cd9ba 100644 --- a/src/components/Summary/SubmissionSummary.js +++ b/src/components/Summary/SubmissionSummary.js @@ -100,7 +100,7 @@ const SubmissionSummary = ({ description: 'Summary page title', defaultMessage: 'Check and confirm', }); - useTitle(pageTitle); + useTitle(pageTitle, form.name); const getErrors = () => { let errors = []; diff --git a/src/hooks/useTitle.js b/src/hooks/useTitle.js index 2603bff10..2d979c4bc 100644 --- a/src/hooks/useTitle.js +++ b/src/hooks/useTitle.js @@ -3,10 +3,12 @@ import {useTitle as reactUseTitle} from 'react-use'; import {ConfigContext} from 'Context'; -const useTitle = localTitle => { +const useTitle = (localTitle, regionalTitle = '') => { let {baseTitle} = useContext(ConfigContext); baseTitle = baseTitle ? baseTitle.trim() : ''; - return reactUseTitle(baseTitle ? `${localTitle} | ${baseTitle}` : localTitle); + + const titleParts = [localTitle, regionalTitle, baseTitle].filter(part => part !== ''); + return reactUseTitle(titleParts.join(' | ')); }; export default useTitle;