Merge pull request #721 from open-formulieren/feature/4720-accessibil…

…ity-improvements-navigation-visibility

Improve accessibility of navigation elements

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.

src/components/Sessions/SessionExpired.js

@@ -36,7 +36,7 @@ const SessionExpired = () => {
       <ErrorMessage>
         <FormattedMessage
           description="Session expired error message"
-          defaultMessage="Your session has expired. Click <link>here</link> to restart."
+          defaultMessage="Your session has expired. <link>Click here to restart</link>."
           values={{
             link: chunks => <Link to="/">{chunks}</Link>,
           }}

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 = [];

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

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

src/formio/templates/file.ejs

@@ -90,7 +90,7 @@
 
         {{ctx.t('or')}}
 
-        <a id="{{ctx.instance.id}}-{{ctx.component.key}}" href="#" ref="fileBrowse" class="browse utrecht-link utrecht-link--openforms">{{ctx.t('browse')}}</a>
+        <a id="{{ctx.instance.id}}-{{ctx.component.key}}" href="#" ref="fileBrowse" class="browse utrecht-link utrecht-link--openforms">{{ctx.t('uploadFile', {fileFieldLabel: ctx.component.label})}}</a>
 
         {% if (ctx.component.multiple) { %}
           {{ctx.t('to attach files.')}}

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;

src/i18n/compiled/en.json

@@ -1330,21 +1330,21 @@
   "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,
       "value": "link"
     },
     {
       "type": 0,
-      "value": " to restart."
+      "value": "."
     }
   ],
   "ay8sO5": [

src/i18n/compiled/nl.json

@@ -1334,21 +1334,21 @@
   "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,
       "value": "link"
     },
     {
       "type": 0,
-      "value": " om opnieuw te beginnen."
+      "value": "."
     }
   ],
   "ay8sO5": [

src/i18n/messages/en.json

@@ -640,9 +640,9 @@
     "originalDefault": "No"
   },
   "abtbgK": {
-    "defaultMessage": "Your session has expired. Click <link>here</link> to restart.",
+    "defaultMessage": "Your session has expired. <link>Click here to restart</link>.",
     "description": "Session expired error message",
-    "originalDefault": "Your session has expired. Click <link>here</link> to restart."
+    "originalDefault": "Your session has expired. <link>Click here to restart</link>."
   },
   "ay8sO5": {
     "defaultMessage": "Contact details",

src/i18n/messages/nl.json

@@ -649,9 +649,9 @@
     "originalDefault": "No"
   },
   "abtbgK": {
-    "defaultMessage": "Je sessie is verlopen. Klik <link>hier</link> om opnieuw te beginnen.",
+    "defaultMessage": "Je sessie is verlopen. <link>Klik hier om opnieuw te beginnen</link>.",
     "description": "Session expired error message",
-    "originalDefault": "Your session has expired. Click <link>here</link> to restart."
+    "originalDefault": "Your session has expired. <link>Click here to restart</link>."
   },
   "ay8sO5": {
     "defaultMessage": "Je gegevens",

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,

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;