@plone/volto 19.0.0-alpha.9 → 19.0.0

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';
@@ -84,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),
@@ -111,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) => {
@@ -155,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

@@ -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

@@ -59,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.',
+  },
 });
 
 /**
@@ -205,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({

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,178 +31,158 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component class.
- * @class FormFieldWrapper
- * @extends Component
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
  */
-class FormFieldWrapper extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    wrapped: PropTypes.bool,
-    columns: PropTypes.number,
-    draggable: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    onEdit: PropTypes.func,
-    className: PropTypes.string,
-    onDelete: PropTypes.func,
-    intl: PropTypes.object,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    wrapped: true,
-    columns: 2,
-    onDelete: null,
-    intl: null,
-    isDisabled: null,
-    draggable: null,
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      title,
-      description,
-      fieldSet,
-      required,
-      error,
-      wrapped,
-      columns,
-      draggable,
-      onEdit,
-      className,
-      isDisabled,
-      onDelete,
-      intl,
-      noForInFieldLabel,
-      multilingual_options,
-    } = this.props;
-
-    const languageIndependent = multilingual_options?.language_independent;
+const FormFieldWrapper = ({
+  id,
+  title,
+  description = null,
+  fieldSet,
+  required = false,
+  error = [],
+  wrapped = true,
+  columns = 2,
+  draggable = null,
+  onEdit,
+  className,
+  isDisabled = null,
+  onDelete = null,
+  noForInFieldLabel,
+  multilingual_options,
+  children,
+}) => {
+  const intl = useIntl();
+  const languageIndependent = multilingual_options?.language_independent;
 
-    const wdg = (
-      <>
-        {this.props.children}
+  const wdg = (
+    <>
+      {children}
 
+      <div aria-live="polite" aria-atomic="true">
         {map(error, (message) => (
           <Label key={message} basic color="red" className="form-error-label">
             {message}
           </Label>
         ))}
-      </>
-    );
+      </div>
+    </>
+  );
 
-    return wrapped ? (
-      <Form.Field
-        inline
-        required={required}
-        error={error && error.length > 0}
-        className={cx(
-          description ? 'help' : '',
-          className,
-          `field-wrapper-${id}`,
-          languageIndependent ? 'language-independent-field' : null,
-        )}
-      >
-        <Grid>
-          <Grid.Row stretched>
-            {columns === 2 && (
-              <Grid.Column width="4">
-                <div className="wrapper">
-                  <label
-                    id={`fieldset-${fieldSet}-field-label-${id}`}
-                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                  >
-                    {draggable && onEdit && (
-                      <i
-                        aria-hidden="true"
-                        className="grey bars icon drag handle"
+  return wrapped ? (
+    <Form.Field
+      inline
+      required={required}
+      error={error && error.length > 0}
+      className={cx(
+        description ? 'help' : '',
+        className,
+        `field-wrapper-${id}`,
+        languageIndependent ? 'language-independent-field' : null,
+      )}
+    >
+      <Grid>
+        <Grid.Row stretched>
+          {columns === 2 && (
+            <Grid.Column width="4">
+              <div className="wrapper">
+                <label
+                  id={`fieldset-${fieldSet}-field-label-${id}`}
+                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                >
+                  {draggable && onEdit && (
+                    <i
+                      aria-hidden="true"
+                      className="grey bars icon drag handle"
+                    />
+                  )}
+                  {title}
+                  {languageIndependent && (
+                    <div className="languageIndependent-icon">
+                      <Icon
+                        title={intl.formatMessage(
+                          messages.language_independent_icon_title,
+                        )}
+                        name={LanguageSVG}
+                        size="24px"
+                        color="#555"
                       />
-                    )}
-                    {title}
-                    {languageIndependent && (
-                      <div className="languageIndependent-icon">
-                        <Icon
-                          title={intl.formatMessage(
-                            messages.language_independent_icon_title,
-                          )}
-                          name={LanguageSVG}
-                          size="24px"
-                          color="#555"
-                        />
-                      </div>
-                    )}
-                  </label>
-                </div>
-              </Grid.Column>
+                    </div>
+                  )}
+                </label>
+              </div>
+            </Grid.Column>
+          )}
+          <Grid.Column width={columns === 2 ? 8 : 12}>
+            {onEdit && !isDisabled && (
+              <div className="toolbar" style={{ zIndex: '2' }}>
+                <button
+                  aria-label={intl.formatMessage(messages.edit)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onEdit(id);
+                  }}
+                >
+                  <IconOld name="write square" size="large" color="blue" />
+                </button>
+                <button
+                  aria-label={intl.formatMessage(messages.delete)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onDelete(id);
+                  }}
+                >
+                  <IconOld name="close" size="large" color="red" />
+                </button>
+              </div>
             )}
-            <Grid.Column width={columns === 2 ? 8 : 12}>
-              {onEdit && !isDisabled && (
-                <div className="toolbar" style={{ zIndex: '2' }}>
-                  <button
-                    aria-label={intl.formatMessage(messages.edit)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onEdit(id);
-                    }}
-                  >
-                    <IconOld name="write square" size="large" color="blue" />
-                  </button>
-                  <button
-                    aria-label={intl.formatMessage(messages.delete)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onDelete(id);
-                    }}
-                  >
-                    <IconOld name="close" size="large" color="red" />
-                  </button>
-                </div>
-              )}
-              {wdg}
+            {wdg}
+          </Grid.Column>
+        </Grid.Row>
+        {description && (
+          <Grid.Row stretched>
+            <Grid.Column stretched width="12">
+              <p className="help">
+                {multilingual_options
+                  ? `${intl.formatMessage(messages.language_independent)} `
+                  : null}
+                {description}
+              </p>
             </Grid.Column>
           </Grid.Row>
-          {description && (
-            <Grid.Row stretched>
-              <Grid.Column stretched width="12">
-                <p className="help">
-                  {this.props.multilingual_options
-                    ? `${intl.formatMessage(messages.language_independent)} `
-                    : null}
-                  {description}
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          )}
-        </Grid>
-      </Form.Field>
-    ) : (
-      <>{wdg}</>
-    );
-  }
-}
+        )}
+      </Grid>
+    </Form.Field>
+  ) : (
+    <>{wdg}</>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ */
+FormFieldWrapper.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  wrapped: PropTypes.bool,
+  columns: PropTypes.number,
+  draggable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func,
+  className: PropTypes.string,
+  onDelete: PropTypes.func,
+  fieldSet: PropTypes.string,
+  noForInFieldLabel: PropTypes.bool,
+  multilingual_options: PropTypes.object,
+  children: PropTypes.node,
+};
 
-export default injectIntl(FormFieldWrapper);
+export default FormFieldWrapper;