@plone/volto 19.0.0-alpha.35 → 19.0.0-alpha.37

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

@@ -2,6 +2,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { waitFor, render, screen } from '@testing-library/react';
 
 import Diff from './Diff';
@@ -75,10 +76,12 @@ describe('Diff', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
-          <Diff />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
+            <Diff />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     await waitFor(() => screen.getByTestId('DiffField'));

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import jwt from 'jsonwebtoken';
 
 import { __test__ as Edit } from './Edit';
@@ -55,9 +56,11 @@ describe('Edit', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <div id="toolbar"></div>
-        <Edit location={{ pathname: '/blog', search: {} }} />
-        <div id="sidebar"></div>
+        <CookiesProvider>
+          <div id="toolbar"></div>
+          <Edit location={{ pathname: '/blog', search: {} }} />
+          <div id="sidebar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -104,9 +107,11 @@ describe('Edit', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <div id="toolbar"></div>
-        <Edit location={{ pathname: '/blog', search: {} }} />
-        <div id="sidebar"></div>
+        <CookiesProvider>
+          <div id="toolbar"></div>
+          <Edit location={{ pathname: '/blog', search: {} }} />
+          <div id="sidebar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -972,7 +972,12 @@ class Form extends Component {
                     onTabChange={this.onTabChange}
                     activeIndex={this.state.activeIndex}
                     panes={map(schema.fieldsets, (item) => ({
-                      menuItem: item.title,
+                      menuItem: {
+                        key: item.id,
+                        content: item.title,
+                        as: 'button',
+                        type: 'button',
+                      },
                       render: () => [
                         !settings.verticalFormTabs && this.props.title && (
                           <Segment secondary attached key={this.props.title}>

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,118 @@ 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
+                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/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/ManageTranslations.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import config from '@plone/volto/registry';
 
 import ManageTranslations from './ManageTranslations';
@@ -41,18 +42,20 @@ describe('ManageTranslations', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ManageTranslations
-            location={{
-              pathname: '/blog-post',
-              state: {
-                language: 'es',
-                translationOf: '/en/page-en',
-              },
-            }}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ManageTranslations
+              location={{
+                pathname: '/blog-post',
+                state: {
+                  language: 'es',
+                  translationOf: '/en/page-en',
+                },
+              }}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Preferences/ChangePassword.test.jsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import jwt from 'jsonwebtoken';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import ChangePassword from './ChangePassword';
 
@@ -40,10 +41,12 @@ describe('ChangePassword', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ChangePassword location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ChangePassword location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { render } from '@testing-library/react';
 
 import PersonalPreferences from './PersonalPreferences';
@@ -37,12 +38,14 @@ describe('PersonalPreferences', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <PersonalPreferences
-            location={{ pathname: '/blog' }}
-            closeMenu={() => {}}
-          />
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <PersonalPreferences
+              location={{ pathname: '/blog' }}
+              closeMenu={() => {}}
+            />
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     expect(container).toMatchSnapshot();

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -69,8 +70,10 @@ describe('Rules', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Rules location={{ pathname: '/blog/rules' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <Rules location={{ pathname: '/blog/rules' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import Sharing from './Sharing';
@@ -60,12 +61,14 @@ describe('Sharing', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <PluggablesProvider>
-          <MemoryRouter>
-            <Sharing location={{ pathname: '/blog' }} />
-            <div id="toolbar"></div>
-          </MemoryRouter>
-        </PluggablesProvider>
+        <CookiesProvider>
+          <PluggablesProvider>
+            <MemoryRouter>
+              <Sharing location={{ pathname: '/blog' }} />
+              <div id="toolbar"></div>
+            </MemoryRouter>
+          </PluggablesProvider>
+        </CookiesProvider>
       </Provider>,
     );
 

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}