@plone/volto 18.34.0 → 18.35.1

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/ObjectBrowser.jsx

@@ -58,6 +58,7 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      initialPath,
       onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
@@ -71,6 +72,7 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        initialPath,
         onlyFolderishSelectable,
       }));
 
@@ -82,6 +84,10 @@ const withObjectBrowser = (WrappedComponent) =>
         this.props.pathname ||
         this.props.location?.pathname;
 
+      let initialPath = this.state?.initialPath
+        ? getBaseUrl(this.state.initialPath)
+        : null;
+
       return (
         <>
           <WrappedComponent
@@ -105,6 +111,7 @@ const withObjectBrowser = (WrappedComponent) =>
                     : this.props.data
                 }
                 contextURL={getBaseUrl(contextURL)}
+                initialPath={initialPath}
                 closeObjectBrowser={this.closeObjectBrowser}
                 mode={this.state.mode}
                 onSelectItem={this.state.onSelectItem}

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

@@ -84,6 +84,7 @@ class ObjectBrowserBody extends Component {
     onSelectItem: PropTypes.func,
     dataName: PropTypes.string,
     maximumSelectionSize: PropTypes.number,
+    initialPath: PropTypes.string,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
     onlyFolderishSelectable: PropTypes.bool,
@@ -113,18 +114,21 @@ class ObjectBrowserBody extends Component {
    */
   constructor(props) {
     super(props);
+    const defaultMultiplePath = props.initialPath || '/';
     this.state = {
       currentFolder:
-        this.props.mode === 'multiple' ? '/' : this.props.contextURL || '/',
+        this.props.mode === 'multiple'
+          ? defaultMultiplePath
+          : this.props.contextURL || '/',
       currentImageFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'image' && this.props.data?.url
             ? getParentURL(this.props.data.url)
             : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'link' && this.props.data?.href
             ? getParentURL(this.props.data.href)
             : '/',

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import ObjectBrowserBody from './ObjectBrowserBody';
+
+const mockStore = configureStore();
+
+const baseState = {
+  search: { subrequests: {} },
+  intl: { locale: 'en', messages: {} },
+};
+
+const baseProps = {
+  block: 'test-block',
+  data: {},
+  closeObjectBrowser: () => {},
+  onChangeBlock: () => {},
+};
+
+const getInitialSearchPath = (actions) => {
+  const action = actions.find((a) => a.type === 'SEARCH_CONTENT');
+  return action?.request?.path?.split('/@search')[0];
+};
+
+describe('ObjectBrowserBody', () => {
+  it('uses initialPath as the default folder when mode=multiple', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody
+          {...baseProps}
+          mode="multiple"
+          initialPath="/company/team"
+        />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/company/team');
+  });
+
+  it('defaults to root when mode=multiple and initialPath is not provided', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody {...baseProps} mode="multiple" />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/');
+  });
+});

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/ArrayWidget.jsx

@@ -315,7 +315,8 @@ class ArrayWidget extends Component {
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
+          fieldTitle={this.props.title}
+          aria-label={this.props.title || undefined}
           key={this.props.id}
           isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"
@@ -384,7 +385,7 @@ class ArrayWidget extends Component {
               )
             )
           }
-          isClearable
+          isClearable={!this.props.required}
           isMulti
         />
       </FormFieldWrapper>

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

@@ -2,9 +2,14 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React, {
+  Children,
+  Component,
+  isValidElement,
+  cloneElement,
+} from 'react';
 import PropTypes from 'prop-types';
-import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
+import { Form, Grid, Icon as IconOld, Input, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -103,7 +108,15 @@ class FormFieldWrapper extends Component {
 
     const wdg = (
       <>
-        {this.props.children}
+        {Children.map(this.props.children, (child) => {
+          if (isValidElement(child) && required && child.type === Input) {
+            return cloneElement(child, {
+              'aria-required': true,
+              'aria-invalid': !!(error && error.length > 0),
+            });
+          }
+          return child;
+        })}
 
         <div aria-live="polite" aria-atomic="true">
           {map(error, (message) => (

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

@@ -307,6 +307,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     this.props.openObjectBrowser({
       mode: this.props.mode,
       currentPath: this.props.initialPath || this.props.location.pathname,
+      initialPath: this.props.initialPath,
       propDataName: 'value',
       onSelectItem: (url, item) => {
         this.onChange(item);

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

@@ -7,10 +7,6 @@ const messages = defineMessages({
     id: 'Criteria',
     defaultMessage: 'Criteria',
   },
-  depth: {
-    id: 'Depth',
-    defaultMessage: 'Depth',
-  },
   SortOn: {
     id: 'Sort on',
     defaultMessage: 'Sort on',
@@ -38,16 +34,7 @@ export const objectSchema = ({ intl, isDisabled, value }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: [
-        'query',
-        ...(value?.query?.filter((q) => q.i === 'path').length > 0
-          ? ['depth']
-          : []),
-        'sort_on',
-        'sort_order_boolean',
-        'limit',
-        'b_size',
-      ],
+      fields: ['query', 'sort_on', 'sort_order_boolean', 'limit', 'b_size'],
     },
   ],
   properties: {
@@ -55,10 +42,6 @@ export const objectSchema = ({ intl, isDisabled, value }) => ({
       title: intl.formatMessage(messages.Criteria),
       widget: 'query',
     },
-    depth: {
-      title: intl.formatMessage(messages.depth),
-      type: 'number',
-    },
     sort_on: {
       title: intl.formatMessage(messages.SortOn),
       widget: 'query_sort_on',