@plone/volto 18.35.0 → 18.35.1

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -36,13 +36,13 @@ config.blocks.blocksConfig = {
 
 describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
-    const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);
-    const img = getByRole('img');
+    const { container } = render(<View data={{ url: '/image.jpg' }} />);
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(img).toHaveAttribute('loading', 'lazy');
   });
   test('renders a view image component with a local image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <View
@@ -51,22 +51,22 @@ describe('Image View Component', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(a).toHaveAttribute('href', '/front-page');
   });
   test('renders a view image component with an external image', () => {
-    const { getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View data={{ url: 'https://plone.org/logo.jpg' }} />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
   });
   test('renders a view image component with an external image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View
           data={{
@@ -76,7 +76,7 @@ describe('Image View Component', () => {
         />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
     expect(a).toHaveAttribute('href', 'http://front-page');

package/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
@@ -41,22 +42,22 @@ const ContentsBreadcrumbs = (props) => {
         </>
       )}
       {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
-        <Link
-          to={`/${lang}/contents`}
+        <UniversalLink
+          href={`/${lang}/contents`}
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           {langmap?.[lang]?.nativeName ?? lang}
-        </Link>
+        </UniversalLink>
       )}
       {!settings.isMultilingual && (
-        <Link
-          to="/contents"
+        <UniversalLink
+          href="/contents"
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           <ContentsBreadcrumbsHomeItem />
-        </Link>
+        </UniversalLink>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [
         <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,

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/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',

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
 
-import QuerystringWidget from './QuerystringWidget';
+import QuerystringWidget, { objectSchema } from './QuerystringWidget';
 
 const mockStore = configureStore();
 
@@ -25,6 +25,47 @@ test('renders an querystring widget component', async () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 
+describe('objectSchema', () => {
+  const mockIntl = { formatMessage: ({ defaultMessage }) => defaultMessage };
+
+  it('does not include depth in the default fieldset', () => {
+    const schema = objectSchema({ intl: mockIntl });
+    const fields = schema.fieldsets[0].fields;
+
+    expect(fields).not.toContain('depth');
+    expect(fields).toEqual([
+      'query',
+      'sort_on',
+      'sort_order_boolean',
+      'limit',
+      'b_size',
+    ]);
+  });
+
+  it('does not include depth in the schema properties', () => {
+    const schema = objectSchema({ intl: mockIntl });
+
+    expect(schema.properties).not.toHaveProperty('depth');
+  });
+
+  it('does not include depth even when value contains a path criterion', () => {
+    const value = {
+      query: [
+        {
+          i: 'path',
+          o: 'plone.app.querystring.operation.string.path',
+          v: '/folder',
+        },
+      ],
+    };
+    const schema = objectSchema({ intl: mockIntl, value });
+    const fields = schema.fieldsets[0].fields;
+
+    expect(fields).not.toContain('depth');
+    expect(schema.properties).not.toHaveProperty('depth');
+  });
+});
+
 test('can take a schemaEnhancer', async () => {
   const store = mockStore({
     querystring: { indexes: {} },
@@ -51,6 +92,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/SelectStyling.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { Popup } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -10,6 +11,13 @@ import checkSVG from '@plone/volto/icons/check.svg';
 import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
+const messages = defineMessages({
+  clearSelection: {
+    id: 'Clear selection',
+    defaultMessage: 'Clear selection',
+  },
+});
+
 export const MenuList = ({ children }) => {
   return <DynamicHeightList>{children}</DynamicHeightList>;
 };
@@ -86,8 +94,32 @@ export const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
 
 export const ClearIndicator = injectLazyLibs('reactSelect')((props) => {
   const { ClearIndicator } = props.reactSelect.components;
+  const intl = useIntl();
+  const fieldLabelId = props.selectProps?.['aria-labelledby'];
+  const clearLabelId = `${props.selectProps?.inputId}-clear-label`;
   return (
-    <ClearIndicator {...props}>
+    <ClearIndicator
+      {...props}
+      innerProps={{
+        ...props.innerProps,
+        'aria-hidden': false,
+        ...(fieldLabelId
+          ? { 'aria-labelledby': `${fieldLabelId} ${clearLabelId}` }
+          : { 'aria-label': intl.formatMessage(messages.clearSelection) }),
+        role: 'button',
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+            e.preventDefault();
+            e.stopPropagation();
+            props.clearValue();
+          }
+        },
+      }}
+    >
+      <span id={clearLabelId} hidden>
+        {intl.formatMessage(messages.clearSelection)}
+      </span>
       <Icon name={clearSVG} size="18px" color="#e40166" />
     </ClearIndicator>
   );

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

@@ -263,9 +263,10 @@ class SelectWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <Select
           id={`field-${id}`}
+          fieldTitle={this.props.title}
           key={choices}
           name={id}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
+          aria-label={this.props.title || undefined}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
@@ -304,7 +305,7 @@ class SelectWidget extends Component {
                 : undefined,
             );
           }}
-          isClearable={this.props.isClearable}
+          isClearable={!this.props.required && this.props.isClearable}
         />
       </FormFieldWrapper>
     );

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -30,3 +31,46 @@ test('renders a text widget component', () => {
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });
+
+test('adds aria-required attribute to input when required prop is true', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
+
+  render(
+    <Provider store={store}>
+      <TextWidget
+        id="my-field"
+        title="My field"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+        required={true}
+      />
+    </Provider>,
+  );
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-required', 'true');
+});
+
+test('adds aria-invalid attribute to input when field has errors', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
+
+  render(
+    <Provider store={store}>
+      <TextWidget
+        id="my-field"
+        title="My field"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+        required={true}
+        error={['This field is required']}
+      />
+    </Provider>,
+  );
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -4,7 +4,6 @@ import { Container } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
@@ -33,7 +32,7 @@ const Unauthorized = () => {
               login: (
                 <Link
                   to={{
-                    pathname: `${getBaseUrl(location.pathname)}/login`,
+                    pathname: `${location.pathname.replace(/\/$/, '')}/login`,
                     state: {
                       // This is needed to cover the use case of being logged in in
                       // another backend (eg. in development), having a token for

package/src/components/theme/View/EventView.stories.jsx

@@ -0,0 +1,89 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import EventViewComponent from './EventView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import config from '@plone/volto/registry';
+const IntlEventViewComponent = injectIntl(EventViewComponent);
+const { settings } = config;
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlEventViewComponent
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  attendees: [],
+  subjects: [],
+};
+
+export const EventViewAllProps = StoryComponent.bind({});
+EventViewAllProps.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+  attendees: ['John Doe', 'Mario Rossi'],
+  contact_email: 'test@example.com',
+  contact_name: 'John Doe',
+  contact_phone: '0123456789',
+  end: '2019-06-24T15:20:00+00:00',
+  event_url: 'https://www.example.com',
+  location: 'Volto, Plone',
+  open_end: false,
+  recurrence: 'RRULE:FREQ=DAILY;INTERVAL=7;COUNT=7',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: ['Guillotina', 'Volto'],
+  whole_day: false,
+};
+
+export const EventViewWithoutLinkToApiInTheText = StoryComponent.bind({});
+EventViewWithoutLinkToApiInTheText.args = {
+  title: 'Hello World!',
+  attendees: [],
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: [],
+  text: {
+    data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
+  },
+};
+export default {
+  title: 'Public components/View/EventView',
+  component: EventViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    end: {
+      control: 'date',
+    },
+    start: {
+      control: 'date',
+    },
+  },
+};

package/src/components/theme/View/FileView.stories.jsx

@@ -0,0 +1,50 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import FileViewComponent from './FileView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlFileViewComponent = injectIntl(FileViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper customStore={{}}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlFileViewComponent
+        content={{
+          ...args,
+          file: {
+            download: 'file:///preview.pdf',
+            ...args,
+          },
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  filename: 'preview.pdf',
+};
+
+export default {
+  title: 'Public components/View/FileView',
+  component: FileViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    filename: {
+      description: 'Name of the file',
+    },
+  },
+};