@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

package/src/components/manage/Widgets/ButtonsWidget.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import textJustifiedSVG from '@plone/volto/icons/align-justify.svg';
+import textCenteredSVG from '@plone/volto/icons/align-center.svg';
+import textLeftSVG from '@plone/volto/icons/align-left.svg';
+import textRightSVG from '@plone/volto/icons/align-right.svg';
+
+import ButtonsWidget from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (ui: React.ReactElement) =>
+  render(
+    <Provider
+      store={mockStore({
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      })}
+    >
+      {ui}
+    </Provider>,
+  );
+
+describe('ButtonsWidget', () => {
+  it('renders string-based actions', () => {
+    const { asFragment } = renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['left', 'right', 'centered', 'justified']}
+        actionsInfoMap={{
+          left: [textLeftSVG, 'Text Left'],
+          right: [textRightSVG, 'Text Right'],
+          justified: [textJustifiedSVG, 'Text Justified'],
+          centered: [textCenteredSVG, 'Text Centered'],
+        }}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders actions info provided via props', () => {
+    const { asFragment } = renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['additional']}
+        actionsInfoMap={{
+          additional: [imageFullSVG, 'Additional action title'],
+        }}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('falls back to the action name when no info map entry is present', () => {
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['missing']}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: 'missing' })).toBeInTheDocument();
+  });
+
+  it('normalizes style definitions when an action is pressed', () => {
+    const handleChange = vi.fn();
+
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={handleChange}
+        actions={[
+          {
+            name: 'wide',
+            label: 'Wide',
+            style: {
+              '--layout-width': 'wide',
+            },
+          },
+        ]}
+        actionsInfoMap={{
+          wide: ['Wide', 'Wide width'],
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Wide width' }));
+
+    expect(handleChange).toHaveBeenCalledWith('align', {
+      '--layout-width': 'wide',
+    });
+  });
+
+  it('selects default value from string names', () => {
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={[
+          {
+            name: 'justified',
+            label: 'Justified',
+            style: {
+              '--layout-width': 'wide',
+            },
+          },
+        ]}
+        default="justified"
+        actionsInfoMap={{
+          justified: [textJustifiedSVG, 'Text Justified'],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: 'Text Justified' })).toBeChecked();
+  });
+});

package/src/components/manage/Widgets/ButtonsWidget.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect } from 'react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Radio, RadioGroup } from '@plone/components';
+import isEqual from 'lodash/isEqual';
+import type { StyleDefinition } from '@plone/types';
+
+/**
+ * A tuple that has an icon in the first element and a i18n string in the second.
+ */
+export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
+
+type ActionValue = string | Record<`--${string}`, string>;
+
+export type ButtonsWidgetProps = {
+  /**
+   * Unique identifier for the widget.
+   */
+  id: string;
+
+  /**
+   * Callback function to handle changes.
+   */
+  onChange: (id: string, value: ActionValue) => void;
+
+  /**
+   * List of actions available for the widget.
+   */
+  actions?: Array<StyleDefinition | string>;
+
+  /**
+   * Map containing additional the information (icon and i18n string) for each action.
+   */
+  actionsInfoMap?: Record<string, ActionInfo>;
+
+  /**
+   * List of actions to be filtered out. In case that we don't want the default ones
+   * we can filter them out.
+   */
+  filterActions?: string[];
+
+  /**
+   * Current value of the widget.
+   */
+  value?: ActionValue;
+
+  /**
+   * Default value of the widget.
+   */
+  default?: ActionValue;
+
+  /**
+   * Indicates if the widget is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
+   */
+  isDisabled?: boolean;
+  [key: string]: any;
+};
+
+type NormalizedAction = {
+  name: string;
+  value: ActionValue;
+};
+
+const ButtonsWidget = (props: ButtonsWidgetProps) => {
+  const {
+    disabled,
+    id,
+    onChange,
+    actions = [],
+    actionsInfoMap,
+    value,
+    isDisabled,
+    default: defaultValue,
+  } = props;
+
+  const normalizedActions: NormalizedAction[] = actions.map((action) =>
+    typeof action === 'string'
+      ? { name: action, value: action }
+      : {
+          name: action.name,
+          value: action.style ?? action.name,
+        },
+  );
+
+  const selectedActionName = normalizedActions.find((action) =>
+    isEqual(value, action.value),
+  )?.name;
+
+  const defaultSelectedActionName = (() => {
+    if (!defaultValue) {
+      return undefined;
+    }
+
+    if (typeof defaultValue === 'string') {
+      const matchedByName = normalizedActions.find(
+        ({ name }) => name === defaultValue,
+      );
+
+      if (matchedByName) {
+        return matchedByName.name;
+      }
+    }
+
+    return normalizedActions.find(({ value: actionValue }) =>
+      isEqual(defaultValue, actionValue),
+    )?.name;
+  })();
+
+  const radioGroupValueProps: {
+    value?: string;
+    defaultValue?: string;
+  } = selectedActionName
+    ? { value: selectedActionName }
+    : defaultSelectedActionName
+      ? { defaultValue: defaultSelectedActionName }
+      : {};
+
+  const handleChange = (selectedName: string) => {
+    const selectedAction = normalizedActions.find(
+      ({ name }) => name === selectedName,
+    );
+
+    if (selectedAction) {
+      onChange(id, selectedAction.value);
+    }
+  };
+
+  // Synchronize default value if no value is set to data prop.
+  useEffect(() => {
+    // If `value` already matches any normalized action value, do nothing.
+    const existingMatch = normalizedActions.find(({ value: actionValue }) =>
+      isEqual(value, actionValue),
+    );
+
+    if (existingMatch) return;
+
+    // Otherwise, if there's a default value set the default style.
+    if (!defaultSelectedActionName) return;
+    const selected = normalizedActions.find(
+      ({ name }) => name === defaultSelectedActionName,
+    );
+    if (!selected) return;
+
+    onChange(id, selected.value);
+  }, [value, defaultSelectedActionName, onChange, normalizedActions, id]);
+
+  return (
+    <FormFieldWrapper {...props} className="widget">
+      <RadioGroup
+        aria-label={props.title || props.label || id}
+        orientation="horizontal"
+        {...radioGroupValueProps}
+        onChange={handleChange}
+        isDisabled={disabled || isDisabled}
+        className="buttons buttons-widget"
+      >
+        {normalizedActions.map((action) => {
+          const actionInfo = actionsInfoMap?.[action.name];
+          const [iconOrText, ariaLabel] = actionInfo ?? [
+            action.name,
+            action.name,
+          ];
+
+          return (
+            <Radio
+              key={action.name}
+              aria-label={ariaLabel}
+              value={action.name}
+              className="buttons-widget-option"
+            >
+              {typeof iconOrText === 'string' ? (
+                <div className="image-sizes-text">{iconOrText}</div>
+              ) : (
+                <Icon
+                  // TODO: Refactor Icon component and type it correctly
+                  name={iconOrText as any}
+                  title={ariaLabel || action.name}
+                  size="24px"
+                  ariaHidden={true}
+                />
+              )}
+            </Radio>
+          );
+        })}
+      </RadioGroup>
+    </FormFieldWrapper>
+  );
+};
+
+export default ButtonsWidget;

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

@@ -7,12 +7,7 @@ import CheckboxGroupWidget from './CheckboxGroupWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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';
@@ -27,6 +27,10 @@ const messages = defineMessages({
     id: 'Time',
     defaultMessage: 'Time',
   },
+  clearDateTime: {
+    id: 'Clear date/time',
+    defaultMessage: 'Clear date and time',
+  },
 });
 
 const PrevIcon = () => (
@@ -80,16 +84,23 @@ const DatetimeWidgetComponent = (props) => {
     widget,
     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,7 +118,11 @@ const DatetimeWidgetComponent = (props) => {
   };
 
   const getDateOnly = () => {
-    return dateOnly || widget === 'date';
+    return (
+      dateOnly ||
+      widget === 'date' ||
+      ((id === 'start' || id === 'end') && formData?.whole_day)
+    );
   };
 
   const onDateChange = (date) => {
@@ -151,67 +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"
-          >
-            <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

@@ -6,12 +6,7 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'
@@ -71,3 +66,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/FileWidget.jsx

@@ -15,7 +15,6 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import Image from '@plone/volto/components/theme/Image/Image';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
@@ -60,6 +59,10 @@ const messages = defineMessages({
     id: 'File is not of the accepted type {accept}',
     defaultMessage: 'File is not of the accepted type {accept}',
   },
+  dragAndDropActionA11y: {
+    id: 'Press Enter to browse files from your computer.',
+    defaultMessage: 'Press Enter to browse files from your computer.',
+  },
 });
 
 /**
@@ -90,18 +93,25 @@ const FileWidget = (props) => {
   const [fileType, setFileType] = React.useState(false);
   const intl = useIntl();
 
+  const imgAttrs = React.useMemo(() => {
+    const data = {};
+    if (value?.download) {
+      data.item = {
+        '@id': value.download.substring(0, value.download.indexOf('/@@images')),
+        image: value,
+      };
+    } else if (value?.data) {
+      data.src = `data:${value['content-type']};${value.encoding},${value.data}`;
+    }
+    return data;
+  }, [value]);
+
   React.useEffect(() => {
     if (value && imageMimetypes.includes(value['content-type'])) {
       setFileType(true);
     }
   }, [value]);
 
-  const imgsrc = value?.download
-    ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
-    : null || value?.data
-      ? `data:${value['content-type']};${value.encoding},${value.data}`
-      : null;
-
   /**
    * Drop handler
    * @method onDrop
@@ -175,7 +185,7 @@ const FileWidget = (props) => {
               <Image
                 className="image-preview small ui image"
                 id={`field-${id}-image`}
-                src={imgsrc}
+                {...imgAttrs}
               />
             ) : (
               <div className="dropzone-placeholder">
@@ -199,6 +209,9 @@ const FileWidget = (props) => {
               {value
                 ? intl.formatMessage(messages.replaceFile)
                 : intl.formatMessage(messages.addNewFile)}
+              <span className="visually-hidden">
+                {intl.formatMessage(messages.dragAndDropActionA11y)}
+              </span>
             </label>
             <input
               {...getInputProps({