@plone/volto 18.33.1 → 18.35.0

package/src/components/manage/Form/ModalForm.jsx

@@ -46,6 +46,14 @@ const messages = defineMessages({
     id: 'Cancel',
     defaultMessage: 'Cancel',
   },
+  dialogOpened: {
+    id: 'Pop-up opened: {title}',
+    defaultMessage: 'Pop-up opened: {title}',
+  },
+  dialogClosed: {
+    id: 'Pop-up closed.',
+    defaultMessage: 'Pop-up closed.',
+  },
 });
 
 /**
@@ -54,6 +62,7 @@ const messages = defineMessages({
  * @extends Component
  */
 class ModalForm extends Component {
+  static idCounter = 0;
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -110,17 +119,21 @@ class ModalForm extends Component {
    */
   constructor(props) {
     super(props);
+    this.headerId = `modal-title-${++ModalForm.idCounter}`;
     this.state = {
       currentTab: 0,
       errors: {},
       isFormPristine: true,
       formData: props.formData,
     };
+    this.modalRef = React.createRef();
+    this.announceRef = React.createRef();
     this.selectTab = this.selectTab.bind(this);
     this.onChangeField = this.onChangeField.bind(this);
     this.onBlurField = this.onBlurField.bind(this);
     this.onClickInput = this.onClickInput.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   /**
@@ -209,12 +222,57 @@ class ModalForm extends Component {
     });
   }
 
+  onKeyDown(event) {
+    if (event.key !== 'Tab') return;
+    const modal = document.getElementById(this.headerId)?.closest('.ui.modal');
+    if (!modal) return;
+    const focusable = modal.querySelectorAll(
+      'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])',
+    );
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
   /**
    * Component did update lifecycle handler
    * @param {Object} prevProps
    * @param {Object} prevState
    */
-  async componentDidUpdate(prevProps, prevState) {
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevProps.open && this.props.open) {
+      document.addEventListener('keydown', this.onKeyDown);
+      this.modalRef.current?.focus();
+      if (this.announceRef.current) {
+        this.announceRef.current.textContent = this.props.intl.formatMessage(
+          messages.dialogOpened,
+          { title: this.props.title },
+        );
+      }
+    }
+    if (prevProps.open && !this.props.open) {
+      document.removeEventListener('keydown', this.onKeyDown);
+      if (this.announceRef.current) {
+        this.announceRef.current.textContent = this.props.intl.formatMessage(
+          messages.dialogClosed,
+        );
+      }
+    }
     if (this.props.onChangeFormData) {
       if (!isEqual(prevState?.formData, this.state.formData)) {
         this.props.onChangeFormData(this.state.formData);
@@ -259,100 +317,120 @@ class ModalForm extends Component {
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
-      <Modal
-        dimmer={this.props.dimmer}
-        open={this.props.open}
-        className={this.props.className}
-      >
-        <Header>{this.props.title}</Header>
-        <Dimmer active={this.props.loading}>
-          <Loader>
-            {this.props.loadingMessage || (
-              <FormattedMessage id="Loading" defaultMessage="Loading." />
-            )}
-          </Loader>
-        </Dimmer>
-        <Modal.Content scrolling>
-          <UiForm
-            method="post"
-            onSubmit={this.onSubmit}
-            error={state_errors || Boolean(this.props.submitError)}
-          >
-            {description}
-            <Message error>
-              {state_errors ? (
-                <FormattedMessage
-                  id="There were some errors."
-                  defaultMessage="There were some errors."
-                />
-              ) : (
-                ''
+      <>
+        {/* aria-live region outside Modal so it persists through open/close cycles */}
+        <div
+          ref={this.announceRef}
+          aria-live="assertive"
+          aria-atomic="true"
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            overflow: 'hidden',
+            opacity: 0,
+          }}
+        />
+        <Modal
+          role="dialog"
+          dimmer={this.props.dimmer}
+          open={this.props.open}
+          className={this.props.className}
+          aria-labelledby={this.headerId}
+          aria-modal="true"
+        >
+          <Header id={this.headerId}>{this.props.title}</Header>
+          <Dimmer active={this.props.loading}>
+            <Loader>
+              {this.props.loadingMessage || (
+                <FormattedMessage id="Loading" defaultMessage="Loading." />
               )}
-              <div>{this.props.submitError}</div>
-            </Message>
-            {schema.fieldsets?.length > 1 && (
-              <Menu tabular stackable>
-                {map(schema.fieldsets, (item, index) => (
-                  <Menu.Item
-                    name={item.id}
-                    index={index}
-                    key={item.id}
-                    active={this.state.currentTab === index}
-                    onClick={this.selectTab}
-                  >
-                    {item.title}
-                  </Menu.Item>
+            </Loader>
+          </Dimmer>
+          <Modal.Content scrolling>
+            {/* outline suppressed for programmatic focus via CSS :focus:not(:focus-visible) on .modal-focus-trap */}
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+            <div ref={this.modalRef} tabIndex={-1} className="modal-focus-trap">
+              <UiForm
+                method="post"
+                onSubmit={this.onSubmit}
+                error={state_errors || Boolean(this.props.submitError)}
+              >
+                {description}
+                <Message error>
+                  {state_errors ? (
+                    <FormattedMessage
+                      id="There were some errors."
+                      defaultMessage="There were some errors."
+                    />
+                  ) : (
+                    ''
+                  )}
+                  <div>{this.props.submitError}</div>
+                </Message>
+                {schema.fieldsets?.length > 1 && (
+                  <Menu tabular stackable>
+                    {map(schema.fieldsets, (item, index) => (
+                      <Menu.Item
+                        name={item.id}
+                        index={index}
+                        key={item.id}
+                        active={this.state.currentTab === index}
+                        onClick={this.selectTab}
+                      >
+                        {item.title}
+                      </Menu.Item>
+                    ))}
+                  </Menu>
+                )}
+                {fields.map((field) => (
+                  <Field
+                    {...field}
+                    key={field.id}
+                    onBlur={this.onBlurField}
+                    onClick={this.onClickInput}
+                    error={this.state.errors[field.id]}
+                  />
                 ))}
-              </Menu>
+              </UiForm>
+            </div>
+          </Modal.Content>
+          <Modal.Actions>
+            {onCancel && (
+              <Button
+                type="button"
+                basic
+                circular
+                secondary
+                aria-label={this.props.intl.formatMessage(messages.cancel)}
+                title={this.props.intl.formatMessage(messages.cancel)}
+                onClick={onCancel}
+              >
+                <Icon name={clearSVG} className="circled" size="30px" />
+              </Button>
             )}
-            {fields.map((field) => (
-              <Field
-                {...field}
-                key={field.id}
-                onBlur={this.onBlurField}
-                onClick={this.onClickInput}
-                error={this.state.errors[field.id]}
-              />
-            ))}
-          </UiForm>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            basic
-            circular
-            primary
-            floated="right"
-            aria-label={
-              this.props.submitLabel
-                ? this.props.submitLabel
-                : this.props.intl.formatMessage(messages.save)
-            }
-            title={
-              this.props.submitLabel
-                ? this.props.submitLabel
-                : this.props.intl.formatMessage(messages.save)
-            }
-            onClick={this.onSubmit}
-            loading={this.props.loading}
-          >
-            <Icon name={aheadSVG} className="contents circled" size="30px" />
-          </Button>
-          {onCancel && (
             <Button
-              type="button"
               basic
               circular
-              secondary
-              aria-label={this.props.intl.formatMessage(messages.cancel)}
-              title={this.props.intl.formatMessage(messages.cancel)}
-              floated="right"
-              onClick={onCancel}
+              primary
+              aria-label={
+                this.props.submitLabel
+                  ? this.props.submitLabel
+                  : this.props.intl.formatMessage(messages.save)
+              }
+              title={
+                this.props.submitLabel
+                  ? this.props.submitLabel
+                  : this.props.intl.formatMessage(messages.save)
+              }
+              onClick={this.onSubmit}
+              loading={this.props.loading}
             >
-              <Icon name={clearSVG} className="circled" size="30px" />
+              <Icon name={aheadSVG} className="contents circled" size="30px" />
             </Button>
-          )}
-        </Modal.Actions>
-      </Modal>
+          </Modal.Actions>
+        </Modal>
+      </>
     );
   }
 }

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -155,6 +155,7 @@ const Sidebar = (props) => {
                 key: 'documentTab',
                 as: 'button',
                 className: 'ui button',
+                type: 'button',
                 content: type || intl.formatMessage(messages.document),
               },
               pane: (

package/src/components/manage/Toast/Toast.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import successSVG from '@plone/volto/icons/ready.svg';
@@ -7,7 +8,28 @@ import infoSVG from '@plone/volto/icons/info.svg';
 import errorSVG from '@plone/volto/icons/error.svg';
 import warningSVG from '@plone/volto/icons/warning.svg';
 
+const messages = defineMessages({
+  success: {
+    id: 'toast_type_success',
+    defaultMessage: 'Success',
+  },
+  error: {
+    id: 'toast_type_error',
+    defaultMessage: 'Error',
+  },
+  warning: {
+    id: 'toast_type_warning',
+    defaultMessage: 'Warning',
+  },
+  info: {
+    id: 'toast_type_info',
+    defaultMessage: 'Information',
+  },
+});
+
 const Toast = (props) => {
+  const intl = useIntl();
+
   function getIcon(props) {
     if (props.info) {
       return infoSVG;
@@ -22,12 +44,24 @@ const Toast = (props) => {
     }
   }
 
+  function getTypeLabel(props) {
+    if (props.error) return intl.formatMessage(messages.error);
+    if (props.warning) return intl.formatMessage(messages.warning);
+    if (props.info) return intl.formatMessage(messages.info);
+    if (props.success) return intl.formatMessage(messages.success);
+    return null;
+  }
+
   const { title, content } = props;
+  const typeLabel = getTypeLabel(props);
 
   return (
     <>
-      <Icon name={getIcon(props)} size="18px" />
+      <Icon name={getIcon(props)} size="18px" ariaHidden={true} />
       <div className="toast-inner-content">
+        {typeLabel && (
+          <span className="visually-hidden-volto">{typeLabel}</span>
+        )}
         {title && <h4>{title}</h4>}
         <div>{content}</div>
       </div>

package/src/components/manage/Toast/Toast.test.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
 import Toast from './Toast';
 
 test('renders a Toast info component', () => {
   const component = renderer.create(
-    <Toast
-      info
-      title="I'm a title"
-      content="This is the content, lorem ipsum"
-    />,
+    <IntlProvider locale="en">
+      <Toast
+        info
+        title="I'm a title"
+        content="This is the content, lorem ipsum"
+      />
+    </IntlProvider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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>
       </>
     );