@plone/volto 19.0.0-alpha.37 → 19.0.0-alpha.38

package/CHANGELOG.md

@@ -17,6 +17,24 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.38 (2026-05-19)
+
+### Breaking
+
+- The `RichTextWidget` wraps its value in a `div` instead of a `p`. @nileshgulia1 [#7950](https://github.com/plone/volto/issues/7950)
+
+### Feature
+
+- Replace moment.js with native Intl formatting in DateWidget and DatetimeWidget theme display widgets. The `formatDate` helper now accepts moment-style token strings ('ll', 'lll', 'LLLL', 'L', 'LT') for backward compatibility. @avoinea [#6732](https://github.com/plone/volto/issues/6732)
+
+### Bugfix
+
+- fixed a11y in search page. @giuliaghisini [#8085](https://github.com/plone/volto/issues/8085)
+
+### Documentation
+
+- Add Python 3.14 to Plone 6.2 support for Volto 19. @stevepiercy [#8051](https://github.com/plone/volto/issues/8051)
+
 ## 19.0.0-alpha.37 (2026-05-19)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.37",
+  "version": "19.0.0-alpha.38",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -181,8 +181,8 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
     "@plone/components": "4.0.0-alpha.8",
-    "@plone/scripts": "4.0.0-alpha.8",
     "@plone/registry": "3.0.0-alpha.12",
+    "@plone/scripts": "4.0.0-alpha.8",
     "@plone/volto-slate": "19.0.0-alpha.19"
   },
   "devDependencies": {
@@ -289,11 +289,11 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
-    "@plone/razzle": "1.0.0-alpha.5",
-    "@plone/types": "2.0.0-alpha.20",
     "@plone/babel-preset-razzle": "^1.0.0-alpha.1",
+    "@plone/razzle-dev-utils": "1.0.0-alpha.3",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/razzle-dev-utils": "1.0.0-alpha.3"
+    "@plone/razzle": "1.0.0-alpha.5",
+    "@plone/types": "2.0.0-alpha.21"
   },
   "scripts": {
     "analyze": "BUNDLE_ANALYZE=true razzle build",

package/src/components/theme/Search/Search.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation, useHistory } from 'react-router-dom';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
@@ -77,12 +77,25 @@ const Search = (props) => {
     [location.search, history],
   );
 
+  // Focus search results after they render
+  const resultsRef = useRef();
+  useEffect(() => {
+    resultsRef.current?.focus();
+  }, [items]);
+
   const options = qs.parse(location.search);
 
   return (
     <Container id="page-search">
       <Helmet title={intl.formatMessage(messages.Search)} />
-      <div className="container">
+      <div
+        className="container"
+        role="region"
+        aria-live="polite"
+        id="search-results"
+        tabIndex={-1}
+        ref={resultsRef}
+      >
         <article id="content">
           <header>
             <h1 className="documentFirstHeading">

package/src/components/theme/Widgets/DateWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/RichTextWidget.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 const RichTextWidget = ({ value, className }) =>
   value ? (
-    <p
+    <div
       className={cx(className, 'richtext', 'widget')}
       dangerouslySetInnerHTML={{
         __html: value.data,

package/src/helpers/Utils/Date.js

@@ -5,6 +5,21 @@ const DAY = HOUR * 24;
 const MONTH = DAY * 30;
 const YEAR = DAY * 365; // ? is this safe or should it be more accurate
 
+// moment-style format tokens → Intl.DateTimeFormat options (for backward compat)
+const MOMENT_FORMAT_MAP = {
+  ll: { year: 'numeric', month: 'short', day: 'numeric' },
+  lll: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  LLLL: { dateStyle: 'full', timeStyle: 'short' },
+  L: { year: 'numeric', month: '2-digit', day: '2-digit' },
+  LT: { timeStyle: 'short' },
+};
+
 export const short_date_format = {
   // 12/9/2021
   year: 'numeric',
@@ -32,13 +47,23 @@ export const toDate = (d) =>
  */
 export function formatDate({
   date, // Date() or  '2022-01-03T19:26:08.999Z'
-  format, // format object, see https://tc39.es/ecma402/#datetimeformat-objects
+  format, // format object (Intl.DateTimeFormat options) or moment-style token string (e.g. 'll', 'lll', 'LLLL', 'L', 'LT')
   locale = 'en',
   long, // true if format should be in long readable form.
   includeTime, // true if short date format should include time
   formatToParts = false,
 }) {
   date = toDate(date);
+  // Resolve moment-style token strings to Intl format options
+  if (typeof format === 'string') {
+    if (process.env.NODE_ENV !== 'production' && !MOMENT_FORMAT_MAP[format]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[formatDate] Unknown format token "${format}". Supported tokens: ${Object.keys(MOMENT_FORMAT_MAP).join(', ')}. Falling back to short_date_format.`,
+      );
+    }
+    format = MOMENT_FORMAT_MAP[format] || short_date_format;
+  }
   format = format
     ? format
     : long && !includeTime

package/src/helpers/Utils/Date.test.js

@@ -79,6 +79,243 @@ describe('formatDate helper', () => {
       }),
     ).toBe('J 03, 2022');
   });
+
+  describe('moment-style format tokens', () => {
+    it('formats with "ll" token (short date)', () => {
+      expect(formatDate({ date, format: 'll' })).toBe('Jan 3, 2022');
+    });
+
+    it('formats with "lll" token (short date + time)', () => {
+      expect(formatDate({ date, format: 'lll' })).toBe('Jan 3, 2022, 7:26 PM');
+    });
+
+    it('formats with "LLLL" token (full date + time)', () => {
+      expect(formatDate({ date, format: 'LLLL' })).toBe(
+        'Monday, January 3, 2022 at 7:26 PM',
+      );
+    });
+
+    it('formats with "L" token (numeric short date)', () => {
+      expect(formatDate({ date, format: 'L' })).toBe('01/03/2022');
+    });
+
+    it('formats with "LT" token (time only)', () => {
+      expect(formatDate({ date, format: 'LT' })).toBe('7:26 PM');
+    });
+
+    it('moment token works with other locales', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('unknown string format falls back to short_date_format', () => {
+      expect(formatDate({ date, format: 'unknown' })).toBe('1/3/2022');
+    });
+  });
+
+  describe('Italian locale (it)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'it' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'it', includeTime: true })).toBe(
+        '03/01/22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'it', long: true })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'it' })).toBe(
+        '3 gen 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'it' })).toBe(
+        '3 gen 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'it' })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'it' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'it' })).toBe('19:26');
+    });
+  });
+
+  describe('German locale (de)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+        '03.01.22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'de', long: true })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'de' })).toBe(
+        '3. Jan. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'de' })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'de' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'de' })).toBe('19:26');
+    });
+  });
+
+  describe('Brazilian Portuguese locale (pt-BR)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'pt-BR' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'pt-BR', includeTime: true })).toBe(
+        '03/01/2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'pt-BR', long: true })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'pt-BR' })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'pt-BR' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'pt-BR' })).toBe('19:26');
+    });
+  });
+
+  describe('Romanian locale (ro)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'ro' })).toBe('03.01.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'ro', includeTime: true })).toBe(
+        '03.01.2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'ro', long: true })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'ro' })).toBe(
+        '3 ian. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'ro' })).toBe(
+        '3 ian. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'ro' })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'ro' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'ro' })).toBe('19:26');
+    });
+  });
+
+  // moment vs Intl comparison
+  // This section documents known differences between the former moment.js output
+  // and our Intl-based formatDate implementation. Reference values are hardcoded
+  // from moment@2.29.4 to avoid a runtime dependency on the library we are removing.
+  //
+  // Tokens that match moment exactly: ll, L, LT (most locales), LLLL (pt-BR only)
+  //
+  // Known differences from moment@2.29.4:
+  //   - lll (all locales): Intl inserts a comma between date and time;
+  //     moment did not (e.g. "Jan 3, 2022, 7:26 PM" vs "Jan 3, 2022 7:26 PM")
+  //   - LLLL (en, it, de, ro): Intl inserts a locale-specific preposition before
+  //     the time; moment did not
+  //       en: "...at 7:26 PM"  vs "...7:26 PM"
+  //       it: "...alle ore 19:26" vs "...19:26"
+  //       de: "...um 19:26"      vs "...19:26"
+  //       ro: "...la 19:26"      vs "...19:26"
+  //   - ll/lll (pt-BR): Intl adds a period after abbreviated month ("jan.");
+  //     moment did not ("jan")
 });
 
 describe('formatRelativeDate helper', () => {