@plone/volto 19.0.0-alpha.8 → 19.0.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);
@@ -245,112 +303,132 @@ class ModalForm extends Component {
     const { schema, onCancel, description } = this.props;
     const currentFieldset = schema.fieldsets[this.state.currentTab];
 
-    const fields = map(currentFieldset.fields, (field) => ({
-      ...schema.properties[field],
-      id: field,
-      value: this.state.formData[field],
-      required: schema.required.indexOf(field) !== -1,
-      onChange: this.onChangeField,
-      onBlur: this.onBlurField,
-      onClick: this.onClickInput,
-    }));
+    const fields = currentFieldset
+      ? map(currentFieldset.fields, (field) => ({
+          ...schema.properties[field],
+          id: field,
+          value: this.state.formData[field],
+          required: schema.required.indexOf(field) !== -1,
+          onChange: this.onChangeField,
+          onBlur: this.onBlurField,
+          onClick: this.onClickInput,
+        }))
+      : [];
 
     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
+                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/Form/ModalForm.test.jsx

@@ -8,11 +8,7 @@ import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {
@@ -93,4 +89,30 @@ describe('ModalForm', () => {
     const loadingMessage = getByText(/renaming items.../i);
     expect(loadingMessage).toBeInTheDocument();
   });
+
+  it('renders with empty fieldsets array', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ModalForm
+          schema={{
+            fieldsets: [],
+            properties: {},
+            required: [],
+          }}
+          onSubmit={() => {}}
+          onCancel={() => {}}
+          open={false}
+          title="Action without form"
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/manage/Form/__mocks__/index.tsx

@@ -1,25 +1,7 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Form');
-
-Finally, remove this comment.
-*/
-
 import type { JSONSchema } from '@plone/types';
 import type { Ref } from 'react';
-const { forwardRef } = jest.requireActual('react');
+import { forwardRef } from 'react';
 
-// Field descriptions can contain react elements and those are not JSON stringifiable
 const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   if (!schema || !schema.properties) return schema;
   return {
@@ -40,38 +22,38 @@ const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   };
 };
 
-export const Field = jest.fn((props) => (
+export const Field = vi.fn((props) => (
   <div className="Field" id={props.id}>
     {props.title}
   </div>
 ));
 
-export const InlineForm = jest.fn((props) => (
+export const InlineForm = vi.fn((props) => (
   <div
     id="InlineForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const ModalForm = jest.fn((props) => (
+export const ModalForm = vi.fn((props) => (
   <div
     id="ModalForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
+export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
 
-export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
+export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
 
-export const BlockDataForm = jest.fn((props) => (
+export const BlockDataForm = vi.fn((props) => (
   <div
     id="BlockDataForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const BlocksForm = jest.fn((props) => (
+export const BlocksForm = vi.fn((props) => (
   <div
     id="BlocksForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
@@ -88,4 +70,4 @@ const MockForm = forwardRef(
   ),
 );
 
-export const Form = jest.fn((props) => <MockForm {...props} />);
+export const Form = vi.fn((props) => <MockForm {...props} />);

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { StaticRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
 
@@ -89,8 +90,10 @@ describe('History', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <History location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <History location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -156,8 +159,10 @@ describe('History', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <History location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <History location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -221,10 +226,12 @@ describe('History', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <StaticRouter context={{}} location={'/blog'}>
-          <History location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </StaticRouter>
+        <CookiesProvider>
+          <StaticRouter context={{}} location={'/blog'}>
+            <History location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </StaticRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import { __test__ as LinksToItem } from './LinksToItem';
 
@@ -102,10 +103,12 @@ describe('LinksToItem', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Multilingual/CompareLanguages.jsx

@@ -56,33 +56,33 @@ const CompareLanguagesMenu = ({
                 {comparingLanguage === t.language ? (
                   <button
                     aria-label={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     title={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     onClick={() => {
                       setComparingLanguage(null);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                     <Icon name={clearSVG} size="30px" />
                   </button>
                 ) : (
                   <button
                     aria-label={`${intl.formatMessage(
                       messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
+                    )} ${(langmap[t.language]?.nativeName || t.language).toLowerCase()}`}
                     title={`${intl.formatMessage(
                       messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
+                    )} ${(langmap[t.language]?.nativeName || t.language).toLowerCase()}`}
                     onClick={() => {
                       setComparingLanguage(t.language);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                   </button>
                 )}
               </li>

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -12,9 +12,12 @@ const CreateTranslation = (props) => {
   const dispatch = useDispatch();
   const { language, translationOf } = props.location.state;
   const [translationLocation, setTranslationLocation] = React.useState(null);
-  const [translationObject, setTranslationObject] = React.useState(null);
   const languageFrom = useSelector((state) => state.intl.locale);
 
+  const translationObject = useSelector(
+    (state) => state.content.subrequests['translationObject'],
+  );
+
   React.useEffect(() => {
     // Only on mount, we dispatch the locator query
     dispatch(getTranslationLocator(translationOf, language)).then((resp) => {
@@ -22,22 +25,21 @@ const CreateTranslation = (props) => {
     });
 
     //and we load the translationObject
-    dispatch(getContent(translationOf, null, 'translationObject')).then(
-      (resp) => {
-        setTranslationObject(resp);
-      },
-    );
+    dispatch(getContent(translationOf, null, 'translationObject'));
 
     // On unmount we dispatch the language change
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
         const langFileName = toGettextLang(language);
-        import(
-          /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-        ).then((locale) => {
-          dispatch(changeLanguage(language, locale.default));
-        });
+        import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+          .then((locale) => {
+            dispatch(changeLanguage(language, locale.default));
+          })
+          .catch(() => {
+            // If locale file doesn't exist, still switch language with empty locale
+            dispatch(changeLanguage(language, {}));
+          });
       }
     };
     // On mount only
@@ -46,7 +48,8 @@ const CreateTranslation = (props) => {
 
   return (
     translationLocation &&
-    translationObject && (
+    translationObject.data &&
+    translationObject.loaded > 0 && (
       <Redirect
         to={{
           pathname: `${flattenToAppURL(translationLocation)}/add`,
@@ -54,7 +57,7 @@ const CreateTranslation = (props) => {
           state: {
             translationOf: props.location.state.translationOf,
             language: props.location.state.language,
-            translationObject: translationObject,
+            translationObject: translationObject.data,
             languageFrom,
           },
         }}

package/src/components/manage/Multilingual/ManageTranslations.jsx

@@ -178,7 +178,7 @@ const ManageTranslations = (props) => {
           <FormattedMessage
             id="Manage translations for {title}"
             defaultMessage="Manage translations for {title}"
-            values={{ title: <q>{content.title}</q> }}
+            values={{ title: <q>{content?.title || ''}</q> }}
           />
         </Segment>
         {content && (
@@ -195,9 +195,9 @@ const ManageTranslations = (props) => {
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (
-                      <strong>{langmap[lang].nativeName}</strong>
+                      <strong>{langmap[lang]?.nativeName || lang}</strong>
                     ) : (
-                      langmap[lang].nativeName
+                      langmap[lang]?.nativeName || lang
                     )}
                   </Table.Cell>
                   <Table.Cell>
@@ -235,7 +235,7 @@ const ManageTranslations = (props) => {
                         <Button
                           aria-label={`${intl.formatMessage(
                             messages.unlink,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          )} ${(langmap[lang]?.nativeName || lang).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}
@@ -256,7 +256,7 @@ const ManageTranslations = (props) => {
                         <Button
                           aria-label={`${intl.formatMessage(
                             messages.link,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          )} ${(langmap[lang]?.nativeName || lang).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}