Fix/toegankelijkheid 15 11

apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/general.tsx

@@ -20,8 +20,11 @@ import { EditFieldProps } from '@/lib/form-widget-helpers/EditFieldProps';
 import { useCallback, useEffect, useState } from 'react';
 import { FormObjectSelectField } from '@/components/ui/form-object-select-field';
 import { useFieldDebounce } from '@/hooks/useFieldDebounce';
+import { YesNoSelect, undefinedToTrueOrProp } from '@/lib/form-widget-helpers';
+
 
 const formSchema = z.object({
+  pageTitle: z.boolean().optional(),
   resourceId: z.string().optional(),
   resourceIdRelativePath: z
     .string()
@@ -53,9 +56,11 @@ export default function WidgetResourceDetailGeneral(
   const defaults = useCallback(
     () => ({
       resourceId: props?.resourceId || undefined,
-      resourceIdRelativePath: props?.resourceIdRelativePath || undefined
+      resourceIdRelativePath: props?.resourceIdRelativePath || undefined,
+      pageTitle: undefinedToTrueOrProp(props?.pageTitle),
+
     }),
-    [props?.resourceId, props?.resourceIdRelativePath]
+    [props?.resourceId, props?.resourceIdRelativePath, props?.pageTitle]
   );
 
   const form = useForm<FormData>({
@@ -110,6 +115,18 @@ export default function WidgetResourceDetailGeneral(
             />
           ) : null}
 
+          <FormField
+            control={form.control}
+            name="pageTitle"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Inzending titel gebruiken als pagina titel</FormLabel>
+                {YesNoSelect(field, props)}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <Button className="w-fit col-span-full" type="submit">
             Opslaan
           </Button>

apps/auth-server/public/javascripts/jquery.validate.nl.js

@@ -2,7 +2,7 @@
 jQuery.extend(jQuery.validator.messages, {
   required: "Dit is een verplicht veld.",
   remote: "Controleer dit veld.",
-  email: "Er is een ongeldig e-mailadres ingevuld.",
+  email: "Controleer of het e-mailadres het volgende formaat heeft: [email protected].",
   url: "Er is een ongeldige url ingevuld.",
   date: "Er is een ongeldige datum ingevuld.",
   dateISO: "Vul hier een geldige datum in (ISO-formaat).",

packages/apostrophe-widgets/share-links/src/share-links.tsx

@@ -30,10 +30,10 @@ function ShareLinks({ title }: Item) {
           external
           href={'https://twitter.com/intent/tweet?text=' + encodeURIComponent(location.href)}
           target="_blank"
-          title={'Twitter'}
+          title={'X'}
         >
           <i className='icon --twitter'></i>
-          <span className='sr-only'>Twitter</span>
+          <span className='sr-only'>X</span>
         </LinkSocial>
 
         <LinkSocial

packages/leaflet-map/src/types/resource-detail-map-widget-props.ts

@@ -11,4 +11,5 @@ export type ResourceDetailMapWidgetProps = BaseProps &
     marker?: MarkerProps;
     markerIcon?: MarkerIconType;
     resourceIdRelativePath?: string;
+    pageTitle?: boolean;
   };

packages/resource-detail/src/resource-detail.tsx

@@ -16,7 +16,7 @@ import '@utrecht/design-tokens/dist/root.css';
 import {
   Paragraph, Link, Heading, Heading2, ButtonGroup, ButtonLink,
 } from '@utrecht/component-library-react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Likes, LikeWidgetProps } from '@openstad-headless/likes/src/likes';
 import {
   Comments,
@@ -27,7 +27,7 @@ import { ResourceDetailMapWidgetProps } from '@openstad-headless/leaflet-map/src
 import { ResourceDetailMap } from '@openstad-headless/leaflet-map/src/resource-detail-map';
 import { ShareLinks } from '../../apostrophe-widgets/share-links/src/share-links';
 import { Button } from '@utrecht/component-library-react';
-import {hasRole} from '../../lib';
+import { hasRole } from '../../lib';
 
 type booleanProps = {
   [K in
@@ -59,6 +59,7 @@ export type ResourceDetailWidgetProps = {
     resourceId?: string;
     resourceIdRelativePath?: string;
     backUrlIdRelativePath?: string;
+    pageTitle?: boolean;
     backUrlText?: string;
   } & booleanProps & {
     likeWidget?: Omit<
@@ -70,9 +71,9 @@ export type ResourceDetailWidgetProps = {
       keyof BaseProps | keyof ProjectSettingProps | 'resourceId'
     >;
     commentsWidget_multiple?: Omit<
-    CommentsWidgetProps,
-    keyof BaseProps | keyof ProjectSettingProps | 'resourceId'
-  >;
+      CommentsWidgetProps,
+      keyof BaseProps | keyof ProjectSettingProps | 'resourceId'
+    >;
     resourceDetailMap?: Omit<
       ResourceDetailMapWidgetProps,
       keyof BaseProps | keyof ProjectSettingProps | 'resourceId'
@@ -186,7 +187,7 @@ function ResourceDetail({
     if (window.location.hash.includes('#doc')) {
       let url = '/' + window.location.hash.split('=')[1] + (window.location.hash.split('=')[2] !== undefined ? '=' + window.location.hash.split('=')[2] : '');
 
-      if ( backUrlIdRelativePath ) {
+      if (backUrlIdRelativePath) {
         const backUrlId = getIdFromHash();
 
         if (backUrlId) {
@@ -254,6 +255,14 @@ function ResourceDetail({
     }
   };
 
+
+  useEffect(() => {
+    if (props.pageTitle === true && resource.title !== undefined) {
+      const current = document.title.includes(' - ') && document.title.split(' - ')[0].length ? ' - '+ document.title.split(' - ')[0] : '';
+      document.title = resource.title + current;
+    }
+  }, [resource]);
+
   return (
     <section>
       <div
@@ -276,7 +285,7 @@ function ResourceDetail({
               )}
 
               {displayTitle && resource.title && (
-                <Heading level={1} appearance="utrecht-heading-2" dangerouslySetInnerHTML={{__html: resource.title}}></Heading>
+                <Heading level={1} appearance="utrecht-heading-2" dangerouslySetInnerHTML={{ __html: resource.title }}></Heading>
               )}
 
               {displayModBreak && resource.modBreak && (
@@ -294,7 +303,7 @@ function ResourceDetail({
                 {displayUser && resource?.user?.displayName && (
                   <div>
                     <Heading level={2} appearance='utrecht-heading-6' className="osc-resource-detail-content-item-title">
-                    Ingediend door
+                      Ingediend door
                     </Heading>
                     <span className="osc-resource-detail-content-item-text">
                       {resource.user.displayName}
@@ -323,9 +332,9 @@ function ResourceDetail({
                 )}
               </div>
               <div className="resource-detail-content">
-                {displaySummary && <Heading level={2} appearance='utrecht-heading-4' dangerouslySetInnerHTML={{__html: resource.summary}}></Heading>}
+                {displaySummary && <Heading level={2} appearance='utrecht-heading-4' dangerouslySetInnerHTML={{ __html: resource.summary }}></Heading>}
                 {displayDescription && (
-                  <Paragraph dangerouslySetInnerHTML={{__html: resource.description}}></Paragraph>
+                  <Paragraph dangerouslySetInnerHTML={{ __html: resource.description }}></Paragraph>
                 )}
               </div>
               {displayLocation && resource.location && (