@plone/volto 19.0.0-alpha.36 → 19.0.0-alpha.38

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/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: (
@@ -170,6 +171,7 @@ const Sidebar = (props) => {
                 key: 'blockTab',
                 as: 'button',
                 className: 'ui button',
+                type: 'button',
                 content: intl.formatMessage(messages.block),
               },
               pane: (

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -108,6 +108,18 @@ const messages = defineMessages({
     id: 'Unlock',
     defaultMessage: 'Unlock',
   },
+  menuOpened: {
+    id: 'Menu opened',
+    defaultMessage: 'Menu opened',
+  },
+  menuClosed: {
+    id: 'Menu closed',
+    defaultMessage: 'Menu closed',
+  },
+  focusOn: {
+    id: 'Focus on',
+    defaultMessage: 'Focus on',
+  },
 });
 
 let toolbarComponents = {
@@ -185,6 +197,7 @@ class Toolbar extends Component {
   toolbarRef = React.createRef();
   toolbarWindow = React.createRef();
   buttonRef = React.createRef();
+  announceRef = React.createRef();
 
   constructor(props) {
     super(props);
@@ -305,10 +318,40 @@ class Toolbar extends Component {
     }
     // PersonalTools always shows at bottom
     if (selector === 'personalTools') {
-      this.setState((state) => ({
-        showMenu: !state.showMenu,
-        menuStyle: { bottom: 0 },
-      }));
+      this.setState(
+        (state) => ({
+          showMenu: !state.showMenu,
+          menuStyle: { bottom: 0 },
+        }),
+        () => {
+          // Scoped only to personalTools — does not affect other toolbar flows
+          const candidates =
+            this.toolbarWindow.current?.querySelectorAll(
+              'a, button, input, [tabindex]:not([tabindex="-1"])',
+            ) ?? [];
+          const firstVisible = Array.from(candidates).find((el) => {
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+          });
+          firstVisible?.focus();
+
+          // Announce to screen readers: menu opened + which element received focus
+          if (this.announceRef.current) {
+            const focusedLabel =
+              firstVisible?.getAttribute('aria-label') ||
+              firstVisible?.textContent?.trim() ||
+              '';
+            this.announceRef.current.textContent = '';
+            setTimeout(() => {
+              if (this.announceRef.current) {
+                this.announceRef.current.textContent = focusedLabel
+                  ? `${this.props.intl.formatMessage(messages.menuOpened)}, ${this.props.intl.formatMessage(messages.focusOn)} ${focusedLabel}`
+                  : this.props.intl.formatMessage(messages.menuOpened);
+              }
+            }, 100);
+          }
+        },
+      );
     } else if (selector === 'more') {
       this.setState((state) => ({
         showMenu: !state.showMenu,
@@ -337,10 +380,22 @@ class Toolbar extends Component {
 
   handleClickOutside = (e) => {
     const target = e.target;
-    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
 
-    // if the click is on the same button, do not close the menu as it
-    // may be handled by the toggleMenu action
+    if (this.pusher && doesNodeContainClick(this.pusher, e)) {
+      return;
+    }
+
+    if (
+      this.toolbarRef.current &&
+      doesNodeContainClick(this.toolbarRef.current, e)
+    ) {
+      return;
+    }
+
+    if (target.closest('.ui.modal') || target.closest('.ui.dimmer')) {
+      return;
+    }
+
     const button =
       doesNodeContainClick(this.toolbarRef.current, e) &&
       this.findAncestor(target, 'button');
@@ -376,12 +431,39 @@ class Toolbar extends Component {
           <BodyClass
             className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
           />
+          <span
+            aria-live="assertive"
+            aria-atomic="true"
+            role="status"
+            className="visually-hidden"
+            ref={this.announceRef}
+          />
           <div
             style={this.state.menuStyle}
             className={
               this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
             }
             ref={this.toolbarWindow}
+            onBlur={(e) => {
+              if (!this.toolbarWindow.current?.contains(e.relatedTarget)) {
+                this.toolbarRef.current
+                  ?.querySelector('button.toolbar-handler-button')
+                  ?.focus();
+
+                this.closeMenu();
+
+                if (this.announceRef.current) {
+                  this.announceRef.current.textContent = '';
+                  // Timeout to allow the screen reader to pick up the change in content after the menu is closed
+                  setTimeout(() => {
+                    if (this.announceRef.current) {
+                      this.announceRef.current.textContent =
+                        this.props.intl.formatMessage(messages.menuClosed);
+                    }
+                  }, 100);
+                }
+              }
+            }}
           >
             {this.state.showMenu && (
               // This sets the scroll locker in the body tag in mobile

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