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

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/Sidebar/Sidebar.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import Sidebar from './Sidebar';
 
@@ -22,7 +23,9 @@ test('renders a sidebar component', () => {
   });
   const component = renderer.create(
     <Provider store={store}>
-      <Sidebar />
+      <CookiesProvider>
+        <Sidebar />
+      </CookiesProvider>
     </Provider>,
   );
   const json = component.toJSON();

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/Toolbar/Toolbar.test.jsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import jwt from 'jsonwebtoken';
 import thunk from 'redux-thunk';
+import { CookiesProvider } from 'react-cookie';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import Toolbar from './Toolbar';
@@ -130,11 +131,13 @@ describe('Toolbar', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <PluggablesProvider>
-          <MemoryRouter>
-            <Toolbar pathname="/test" inner={<span />} />
-          </MemoryRouter>
-        </PluggablesProvider>
+        <CookiesProvider>
+          <PluggablesProvider>
+            <MemoryRouter>
+              <Toolbar pathname="/test" inner={<span />} />
+            </MemoryRouter>
+          </PluggablesProvider>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();
@@ -264,11 +267,13 @@ describe('Toolbar', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <PluggablesProvider>
-          <MemoryRouter>
-            <Toolbar pathname="/test" inner={<span />} />
-          </MemoryRouter>
-        </PluggablesProvider>
+        <CookiesProvider>
+          <PluggablesProvider>
+            <MemoryRouter>
+              <Toolbar pathname="/test" inner={<span />} />
+            </MemoryRouter>
+          </PluggablesProvider>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -61,11 +61,13 @@ const FormFieldWrapper = ({
     <>
       {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>
     </>
   );
 

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.test.jsx

@@ -51,6 +51,8 @@ test('can take a schemaEnhancer', async () => {
       />
     </Provider>,
   );
-  await waitFor(() => {});
+  await waitFor(() => {
+    expect(component.toJSON()?.children).toHaveLength(3);
+  });
   expect(component.toJSON()).toMatchSnapshot();
 });

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

@@ -19,6 +19,8 @@ const TextWidget = (props) => {
     placeholder,
     isDisabled,
     focus,
+    required,
+    error,
   } = props;
 
   const ref = useRef();
@@ -49,6 +51,8 @@ const TextWidget = (props) => {
         onClick={() => onClick()}
         minLength={minLength || null}
         maxLength={maxLength || null}
+        aria-required={required ? 'true' : undefined}
+        aria-invalid={error?.length > 0 ? 'true' : undefined}
       />
       {icon && iconAction && (
         <button className={`field-${id}-action-button`} onClick={iconAction}>