@plone/volto 18.33.0 → 18.34.0

package/razzle.config.js

@@ -310,6 +310,7 @@ const defaultModify = ({
     'load-volto-addons': addonsLoaderPath,
     ...registry.getResolveAliases(),
     '@plone/volto': `${registry.voltoPath}/src`,
+    '@plone/volto-slate': `${registry.voltoPath}/../volto-slate/src`,
     // to be able to reference path uncustomized by webpack
     '@plone/volto-original': `${registry.voltoPath}/src`,
     // be able to reference current package from customized package

package/src/actions/users/users.js

@@ -3,7 +3,7 @@
  * @module actions/users/users
  */
 
-import { stringify } from 'query-string';
+import qs from 'query-string';
 
 import {
   CREATE_USER,
@@ -92,7 +92,7 @@ export function listUsers(options = {}) {
 
   let filterarg =
     groups_filter.length > 0
-      ? stringify(
+      ? qs.stringify(
           { 'groups-filter': groups_filter },
           { arrayFormat: 'colon-list-separator' },
         )

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -44,6 +44,12 @@ export const Item = forwardRef(
       config.blocks.blocksConfig[data?.['@type']]?.icon ||
       config.blocks.blocksConfig.title?.icon;
 
+    const required =
+      typeof data?.required === 'boolean'
+        ? data.required
+        : includes(config.blocks.requiredBlocks, data?.['@type']);
+    const fixed = !!data?.fixed;
+
     return (
       <li
         className={classNames(
@@ -93,15 +99,17 @@ export const Item = forwardRef(
           ref={ref}
           style={style}
         >
-          <button
-            ref={ref}
-            {...handleProps}
-            className={classNames('action', 'drag')}
-            tabIndex={0}
-            data-cypress="draggable-handle"
-          >
-            <Icon name={dragSVG} size="16px" />
-          </button>
+          {!fixed && (
+            <button
+              ref={ref}
+              {...handleProps}
+              className={classNames('action', 'drag')}
+              tabIndex={0}
+              data-cypress="draggable-handle"
+            >
+              <Icon name={dragSVG} size="16px" />
+            </button>
+          )}
           <span
             className={cx('text', {
               errored: errors && Object.keys(errors).length > 0,
@@ -118,7 +126,7 @@ export const Item = forwardRef(
               config.blocks.blocksConfig[data?.['@type']]?.title ||
               data?.title}
           </span>
-          {!clone && onRemove && (
+          {!clone && onRemove && !required && (
             <button
               onClick={onRemove}
               className={classNames('action', 'delete')}

package/src/components/manage/Blocks/Block/Order/Item.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import config from '@plone/volto/registry';
+
+import { Item } from './Item';
+
+const mockStore = configureStore();
+
+const defaultStoreState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  form: {
+    ui: {
+      selected: null,
+      hovered: null,
+      multiSelected: [],
+      gridSelected: null,
+    },
+  },
+};
+
+const renderItem = (data = {}) => {
+  const store = mockStore(defaultStoreState);
+
+  return render(
+    <Provider store={store}>
+      <Item
+        id="title-block-id"
+        data={{ '@type': 'title', ...data }}
+        depth={0}
+        indentationWidth={25}
+        onRemove={() => {}}
+        onSelectBlock={() => {}}
+        handleProps={{}}
+      />
+    </Provider>,
+  );
+};
+
+describe('Order Item', () => {
+  let requiredBlocks;
+
+  beforeEach(() => {
+    requiredBlocks = [...(config.blocks.requiredBlocks || [])];
+    config.blocks.requiredBlocks = [];
+  });
+
+  afterEach(() => {
+    config.blocks.requiredBlocks = requiredBlocks;
+  });
+
+  test('renders drag and delete actions for movable and removable blocks', () => {
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.drag')).not.toBeNull();
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides delete action for required blocks', () => {
+    const { container } = renderItem({ required: true });
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('hides delete action for block types configured as required', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('allows explicit required=false to override required block types', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem({ required: false });
+
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides drag action for fixed blocks', () => {
+    const { container } = renderItem({ fixed: true });
+
+    expect(container.querySelector('.action.drag')).toBeNull();
+  });
+});

package/src/components/manage/Controlpanels/AddonsControlpanel.jsx

@@ -27,6 +27,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
+import Error from '@plone/volto/components/theme/Error/Error';
 import circleBottomSVG from '@plone/volto/icons/circle-bottom.svg';
 import circleTopSVG from '@plone/volto/icons/circle-top.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -148,6 +149,7 @@ const AddonsControlpanel = (props) => {
     shallowEqual,
   );
   const loadingAddons = useSelector((state) => state.addons.loading);
+  const addonsError = useSelector((state) => state.addons.error);
 
   useEffect(() => {
     dispatch(listAddons());
@@ -245,6 +247,11 @@ const AddonsControlpanel = (props) => {
     setactiveIndex(newIndex);
   };
 
+  // Error handling for unauthorized access
+  if (addonsError) {
+    return <Error error={addonsError} />;
+  }
+
   return (
     <Container id="page-addons" className="controlpanel-addons">
       <Helmet title={intl.formatMessage(messages.addOns)} />

package/src/components/manage/Controlpanels/DatabaseInformation.jsx

@@ -10,6 +10,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { useClient } from '@plone/volto/hooks/client/useClient';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Error from '@plone/volto/components/theme/Error/Error';
 import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
@@ -31,11 +32,19 @@ const DatabaseInformation = () => {
   const databaseInformation = useSelector(
     (state) => state.controlpanels.databaseinformation,
   );
+  const databaseError = useSelector(
+    (state) => state.controlpanels.database?.error,
+  );
 
   useEffect(() => {
     dispatch(getDatabaseInformation());
   }, [dispatch]);
 
+  // Error handling for unauthorized access
+  if (databaseError) {
+    return <Error error={databaseError} />;
+  }
+
   return databaseInformation ? (
     <Container id="database-page" className="controlpanel-database">
       <Helmet title={intl.formatMessage(messages.databaseInformation)} />

package/src/components/manage/Controlpanels/ModerateComments.jsx

@@ -19,6 +19,7 @@ import { searchContent } from '@plone/volto/actions/search/search';
 import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Error from '@plone/volto/components/theme/Error/Error';
 import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 
 import backSVG from '@plone/volto/icons/back.svg';
@@ -65,6 +66,7 @@ class ModerateComments extends Component {
       loaded: PropTypes.bool,
     }).isRequired,
     pathname: PropTypes.string.isRequired,
+    searchError: PropTypes.object,
   };
 
   /**
@@ -186,6 +188,11 @@ class ModerateComments extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    // Error handling for unauthorized access
+    if (this.props.searchError) {
+      return <Error error={this.props.searchError} />;
+    }
+
     return (
       <div id="page-moderate-comments">
         <CommentEditModal
@@ -297,6 +304,7 @@ export default compose(
       items: state.search.items,
       deleteRequest: state.comments.delete,
       pathname: props.location.pathname,
+      searchError: state.search.error,
     }),
     { deleteComment, searchContent },
   ),

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.test.jsx

@@ -14,6 +14,9 @@ vi.mock('../../Toolbar/Toolbar', () => ({
 describe('UserGroupMembershipControlPanel', () => {
   it('renders a user group membership control component', () => {
     const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       controlpanels: {
         controlpanel: {
           data: {

package/src/components/manage/Sharing/Sharing.jsx

@@ -473,13 +473,21 @@ class SharingComponent extends Component {
                 <p className="help">
                   <FormattedMessage
                     id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, inherited values are explicitly labeled as 'Inherited value' and receive a green check mark {inherited}. Similarly, roles managed by the site administrator are labeled as 'Global role' and receive a blue check mark {global}."
                     values={{
                       inherited: (
-                        <IconOld name="check circle outline" color="green" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="green"
+                        />
                       ),
                       global: (
-                        <IconOld name="check circle outline" color="blue" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="blue"
+                        />
                       ),
                     }}
                   />

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import loadable from '@loadable/component';
@@ -85,16 +85,22 @@ const DatetimeWidgetComponent = (props) => {
     noPastDates: propNoPastDates,
     isDisabled,
     formData,
+    required,
   } = props;
 
   const intl = useIntl();
   const lang = intl.locale;
 
+  // timeInputRef: for aria-required (rc-time-picker has no aria props)
+  const timeInputRef = useRef(null);
+
   const [focused, setFocused] = useState(false);
   const [isDefault, setIsDefault] = useState(false);
 
   const { SingleDatePicker } = reactDates;
 
+  const renderWidget = !(id === 'end' && formData?.open_end);
+
   useEffect(() => {
     const parsedDateTime = parseDateTime(
       toBackendLang(lang),
@@ -107,11 +113,6 @@ const DatetimeWidgetComponent = (props) => {
     );
   }, [value, lang, moment]);
 
-  // If open_end is checked and this is the end field, don't render
-  if (id === 'end' && formData?.open_end) {
-    return null;
-  }
-
   const getInternalValue = () => {
     return parseDateTime(toBackendLang(lang), value, undefined, moment.default);
   };
@@ -165,68 +166,101 @@ const DatetimeWidgetComponent = (props) => {
   const datetime = getInternalValue();
   const isDateOnly = getDateOnly();
 
+  // aria-required for the time input (rc-time-picker is lazy-loaded,
+  // so MutationObserver is needed to catch when it mounts its input)
+
+  // rc-time-picker does not have aria props, so we need to set aria-required
+  // manually on the input element when the required prop changes
+
+  useEffect(() => {
+    if (!renderWidget || isDateOnly) return;
+
+    function applyTimeAria() {
+      const input = timeInputRef.current?.querySelector('input');
+      if (!input) return;
+      if (required) input.setAttribute('aria-required', 'true');
+      else input.removeAttribute('aria-required');
+    }
+
+    applyTimeAria();
+
+    const observer = new MutationObserver(applyTimeAria);
+    if (timeInputRef.current) {
+      observer.observe(timeInputRef.current, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    return () => observer.disconnect();
+  }, [required, isDateOnly, renderWidget]);
+
   return (
     <FormFieldWrapper {...props}>
-      <div className="date-time-widget-wrapper">
-        <div
-          className={cx('ui input date-input', {
-            'default-date': isDefault,
-          })}
-        >
-          <SingleDatePicker
-            date={datetime}
-            disabled={isDisabled}
-            onDateChange={onDateChange}
-            focused={focused}
-            numberOfMonths={1}
-            {...(noPastDates ? {} : { isOutsideRange: () => false })}
-            onFocusChange={onFocusChange}
-            noBorder
-            displayFormat={moment.default
-              .localeData(toBackendLang(lang))
-              .longDateFormat('L')}
-            navPrev={<PrevIcon />}
-            navNext={<NextIcon />}
-            id={`${id}-date`}
-            placeholder={intl.formatMessage(messages.date)}
-          />
-        </div>
-        {!isDateOnly && (
+      {renderWidget && (
+        <div className="date-time-widget-wrapper">
           <div
-            className={cx('ui input time-input', {
+            className={cx('ui input date-input', {
               'default-date': isDefault,
             })}
           >
-            <TimePicker
+            <SingleDatePicker
+              date={datetime}
               disabled={isDisabled}
-              defaultValue={datetime}
-              value={datetime}
-              onChange={onTimeChange}
-              allowEmpty={false}
-              showSecond={false}
-              use12Hours={lang === 'en'}
-              id={`${id}-time`}
-              format={moment.default
+              onDateChange={onDateChange}
+              focused={focused}
+              numberOfMonths={1}
+              {...(noPastDates ? {} : { isOutsideRange: () => false })}
+              onFocusChange={onFocusChange}
+              noBorder
+              required={required}
+              displayFormat={moment.default
                 .localeData(toBackendLang(lang))
-                .longDateFormat('LT')}
-              placeholder={intl.formatMessage(messages.time)}
-              focusOnOpen
-              placement="bottomRight"
+                .longDateFormat('L')}
+              navPrev={<PrevIcon />}
+              navNext={<NextIcon />}
+              id={`${id}-date`}
+              placeholder={intl.formatMessage(messages.date)}
             />
           </div>
-        )}
-        {resettable && (
-          <button
-            type="button"
-            disabled={isDisabled || !datetime}
-            onClick={onResetDates}
-            className="item ui noborder button"
-            aria-label={intl.formatMessage(messages.clearDateTime)}
-          >
-            <Icon name={clearSVG} size="24px" className="close" />
-          </button>
-        )}
-      </div>
+          {!isDateOnly && (
+            <div
+              ref={timeInputRef}
+              className={cx('ui input time-input', {
+                'default-date': isDefault,
+              })}
+            >
+              <TimePicker
+                disabled={isDisabled}
+                defaultValue={datetime}
+                value={datetime}
+                onChange={onTimeChange}
+                allowEmpty={false}
+                showSecond={false}
+                use12Hours={lang === 'en'}
+                id={`${id}-time`}
+                format={moment.default
+                  .localeData(toBackendLang(lang))
+                  .longDateFormat('LT')}
+                placeholder={intl.formatMessage(messages.time)}
+                focusOnOpen
+                placement="bottomRight"
+              />
+            </div>
+          )}
+          {resettable && (
+            <button
+              type="button"
+              disabled={isDisabled || !datetime}
+              onClick={onResetDates}
+              className="item ui noborder button"
+              aria-label={intl.formatMessage(messages.clearDateTime)}
+            >
+              <Icon name={clearSVG} size="24px" className="close" />
+            </button>
+          )}
+        </div>
+      )}
     </FormFieldWrapper>
   );
 };

package/src/components/manage/Widgets/DatetimeWidget.test.jsx

@@ -71,3 +71,58 @@ test('datetime widget converts UTC date and adapts to local datetime', async ()
   await waitFor(() => screen.getByPlaceholderText('Time'));
   expect(container).toMatchSnapshot();
 });
+
+test('applies aria-required attribute to the date input when required prop is true', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const { container } = render(
+    <Provider store={store}>
+      <DatetimeWidget
+        id="required-field"
+        title="Required Field"
+        onChange={() => {}}
+        required={true}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByPlaceholderText('Date'));
+
+  const dateInput = container.querySelector('.date-input input');
+
+  expect(dateInput).toHaveAttribute('required');
+});
+
+test('applies aria-required attribute to the time input when required prop is true', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const { container } = render(
+    <Provider store={store}>
+      <DatetimeWidget
+        id="required-field"
+        title="Required Field"
+        onChange={() => {}}
+        required={true}
+      />
+    </Provider>,
+  );
+
+  // Wait for the lazy-loaded TimePicker to be mounted in the DOM
+  await waitFor(() => screen.getByPlaceholderText('Time'));
+
+  // The rc-time-picker doesn't support aria-required natively,
+  // so we verify if our MutationObserver/useEffect successfully injected it.
+  const timeInput = container.querySelector('.time-input input');
+
+  expect(timeInput).toHaveAttribute('aria-required', 'true');
+});

package/src/components/manage/Widgets/FormFieldWrapper.jsx

@@ -105,11 +105,13 @@ class FormFieldWrapper extends Component {
       <>
         {this.props.children}
 
-        {map(error, (message) => (
-          <Label key={message} basic color="red" className="form-error-label">
-            {message}
-          </Label>
-        ))}
+        <div aria-live="polite" aria-atomic="true">
+          {map(error, (message) => (
+            <Label key={message} basic color="red" className="form-error-label">
+              {message}
+            </Label>
+          ))}
+        </div>
       </>
     );
 

package/src/components/manage/Widgets/RegistryImageWidget.jsx

@@ -99,7 +99,7 @@ const RegistryImageWidget = (props) => {
 
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}`);
     });
 
     let reader = new FileReader();

package/src/components/manage/Widgets/TextWidget.jsx

@@ -19,6 +19,8 @@ const TextWidget = (props) => {
     placeholder,
     isDisabled,
     focus,
+    required,
+    error,
   } = props;
 
   const ref = useRef();
@@ -49,6 +51,8 @@ const TextWidget = (props) => {
         onClick={() => onClick()}
         minLength={minLength || null}
         maxLength={maxLength || null}
+        aria-required={required ? 'true' : undefined}
+        aria-invalid={error?.length > 0 ? 'true' : undefined}
       />
       {icon && iconAction && (
         <button className={`field-${id}-action-button`} onClick={iconAction}>