@plone/volto 18.35.1 → 18.36.0

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

@@ -724,9 +724,9 @@ class Contents extends Component {
         delta,
       );
     } else {
-      this.setState({
-        items: move(this.state.items, itemIndex, itemIndex + delta),
-      });
+      this.setState((prevState) => ({
+        items: move(prevState.items, itemIndex, itemIndex + delta),
+      }));
     }
   }
 

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

@@ -364,15 +364,13 @@ const DragDropConnector = (props) => {
           drop(props, monitor) {
             const id = monitor.getItem().id;
             const dragOrder = monitor.getItem().startOrder;
-            const dropOrder = props.order;
+            const dropOrder = monitor.getItem().order;
 
             if (dragOrder === dropOrder) {
               return;
             }
 
             props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
-
-            monitor.getItem().order = dropOrder;
           },
         },
         (connect) => ({

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

@@ -113,6 +113,7 @@ const DropZoneContent = (props) => {
   };
 
   const onDrop = async (e) => {
+    e.preventDefault();
     if (!hasFiles(e)) {
       return;
     }

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
 
+import debounce from 'lodash/debounce';
 import join from 'lodash/join';
 
 // These absolute imports (without using the corresponding centralized index.js) are required
@@ -159,6 +160,22 @@ class ObjectBrowserBody extends Component {
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
+    // Debounce the live-search dispatch so rapid keystrokes do not produce a
+    // burst of overlapping requests whose responses may resolve out of order
+    // (an older, less-filtered response arriving after the latest one would
+    // visually "reset" the list to look unfiltered).
+    this.debouncedSearch = debounce(this.doSearch, 300);
+  }
+
+  /**
+   * Component will unmount
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.debouncedSearch) {
+      this.debouncedSearch.cancel();
+    }
   }
 
   /**
@@ -248,8 +265,7 @@ class ObjectBrowserBody extends Component {
       view: prevState.view === 'icons' ? 'list' : 'icons',
     }));
 
-  onSearch = (e) => {
-    const text = flattenToAppURL(e.target.value);
+  doSearch = (text) => {
     if (text.startsWith('/')) {
       this.setState({ currentFolder: text });
       this.props.searchContent(
@@ -286,6 +302,11 @@ class ObjectBrowserBody extends Component {
     }
   };
 
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    this.debouncedSearch(text);
+  };
+
   onSelectItem = (item) => {
     const url = item['@id'];
     const { block, data, mode, dataName, onChangeBlock } = this.props;

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import find from 'lodash/find';
+import { Dimmer, Loader } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -103,6 +104,10 @@ const messages = defineMessages({
     id: 'workingCopyGenericError',
     defaultMessage: 'An error occurred while performing this operation.',
   },
+  Loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
 });
 
 const More = (props) => {
@@ -120,6 +125,8 @@ const More = (props) => {
   const workingCopyApply = workingCopy?.apply.loading;
   const workingCopyCreate = workingCopy?.create.loading;
   const workingCopyRemove = workingCopy?.remove.loading;
+  const isWorkingCopyLoading =
+    workingCopyApply || workingCopyCreate || workingCopyRemove;
 
   const prevWorkingCopyApplyLoading = usePrevious(workingCopyApply);
   const prevWorkingCopyCreateLoading = usePrevious(workingCopyCreate);
@@ -213,6 +220,9 @@ const More = (props) => {
           : null,
       }}
     >
+      <Dimmer active={isWorkingCopyLoading} inverted>
+        <Loader>{intl.formatMessage(messages.Loading)}</Loader>
+      </Dimmer>
       <header>
         <h2>{content.title}</h2>
         <button
@@ -332,6 +342,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.CreateWorkingCopy)}
+              disabled={workingCopyCreate}
               onClick={() => {
                 dispatch(createWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(response['@id']));
@@ -351,6 +362,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.applyWorkingCopy)}
+              disabled={workingCopyApply}
               onClick={() => {
                 dispatch(applyWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));
@@ -392,6 +404,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.removeWorkingCopy)}
+              disabled={workingCopyRemove}
               onClick={() => {
                 dispatch(removeWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));

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,39 @@ 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();
+
+          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 +379,21 @@ class Toolbar extends Component {
 
   handleClickOutside = (e) => {
     const target = e.target;
-    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+    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;
+    }
 
-    // if the click is on the same button, do not close the menu as it
-    // may be handled by the toggleMenu action
     const button =
       doesNodeContainClick(this.toolbarRef.current, e) &&
       this.findAncestor(target, 'button');
@@ -376,12 +429,42 @@ class Toolbar extends Component {
           <BodyClass
             className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
           />
+          <span
+            aria-live="assertive"
+            aria-atomic="true"
+            role="status"
+            className="visually-hidden-volto"
+            ref={this.announceRef}
+          />
           <div
             style={this.state.menuStyle}
             className={
               this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
             }
             ref={this.toolbarWindow}
+            onBlur={(e) => {
+              if (
+                e.relatedTarget &&
+                !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
@@ -630,7 +713,7 @@ class Toolbar extends Component {
                 aria-expanded={expanded}
                 aria-controls="toolbar-body"
               >
-                <span aria-live="assertive" className="visually-hidden">
+                <span aria-live="assertive" className="visually-hidden-volto">
                   {expanded
                     ? this.props.intl.formatMessage(messages.shrinkToolbar)
                     : this.props.intl.formatMessage(messages.expandToolbar)}

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

@@ -36,11 +36,13 @@ const messages = defineMessages({
   },
   editFile: {
     id: 'Drop file here to replace the existing file',
-    defaultMessage: 'Drop file here to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file',
   },
   fileDrag: {
     id: 'Drop file here to upload a new file',
-    defaultMessage: 'Drop file here to upload a new file',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser',
   },
   replaceFile: {
     id: 'Replace existing file',
@@ -61,7 +63,21 @@ const messages = defineMessages({
   },
   dragAndDropActionA11y: {
     id: 'Press Enter to browse files from your computer.',
-    defaultMessage: 'Press Enter to browse files from your computer.',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser',
+  },
+  dragAndDropReplaceA11y: {
+    id: 'File upload area. Press Enter or click to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file',
+  },
+  requiredField: {
+    id: 'This field is required.',
+    defaultMessage: 'This field is required.',
+  },
+  downloadFile: {
+    id: 'Download {filename}',
+    defaultMessage: 'Download {filename}',
   },
 });
 
@@ -89,7 +105,7 @@ const messages = defineMessages({
  *
  */
 const FileWidget = (props) => {
-  const { id, value, onChange, isDisabled } = props;
+  const { id, value, onChange, isDisabled, fieldSet } = props;
   const [fileType, setFileType] = React.useState(false);
   const intl = useIntl();
 
@@ -171,6 +187,18 @@ const FileWidget = (props) => {
     reader.readAsDataURL(files[0]);
   };
 
+  const statusTextA11y = [
+    value
+      ? intl.formatMessage(messages.dragAndDropReplaceA11y)
+      : intl.formatMessage(messages.dragAndDropActionA11y),
+    props.required && intl.formatMessage(messages.requiredField),
+    value?.filename,
+  ]
+    .filter(Boolean)
+    .join('. ');
+
+  const errorTextA11y = props.error?.length ? props.error.join('. ') : null;
+
   return (
     <FormFieldWrapper {...props}>
       <Dropzone
@@ -179,7 +207,13 @@ const FileWidget = (props) => {
         {...(props.accept ? { accept: props.accept } : {})}
       >
         {({ getRootProps, getInputProps, isDragActive }) => (
-          <div className="file-widget-dropzone" {...getRootProps()}>
+          <div
+            className="file-widget-dropzone"
+            role="button"
+            aria-labelledby={`fieldset-${fieldSet}-field-label-${id}`}
+            aria-describedby={`field-${id}-status`}
+            {...getRootProps()}
+          >
             {isDragActive && <Dimmer active></Dimmer>}
             {fileType ? (
               <Image
@@ -205,34 +239,52 @@ const FileWidget = (props) => {
               </div>
             )}
 
-            <label className="label-file-widget-input">
+            {/* aria-hidden: keyboard access is handled by the parent div (role="button").
+                The label is a visual affordance only. The stopPropagation prevents the Dropzone
+                from opening the file dialog twice on click. */}
+            <label
+              className="label-file-widget-input"
+              htmlFor={`field-${id}`}
+              aria-hidden="true"
+              onClick={(e) => e.stopPropagation()}
+            >
               {value
                 ? intl.formatMessage(messages.replaceFile)
                 : intl.formatMessage(messages.addNewFile)}
-              <span className="visually-hidden">
-                {intl.formatMessage(messages.dragAndDropActionA11y)}
-              </span>
             </label>
+            <span id={`field-${id}-status`} className="visually-hidden-volto">
+              {statusTextA11y}
+            </span>
+            {errorTextA11y && (
+              <span role="alert" className="visually-hidden-volto">
+                {errorTextA11y}
+              </span>
+            )}
             <input
               {...getInputProps({
                 type: 'file',
                 style: { display: 'none' },
               })}
               id={`field-${id}`}
+              {...(props.required && { 'aria-required': true })}
+              {...(props.error?.length > 0 && { 'aria-invalid': true })}
               name={id}
-              type="file"
               disabled={isDisabled}
             />
           </div>
         )}
       </Dropzone>
-      <div className="field-file-name">
-        {value && (
-          <UniversalLink href={value.download} download={true}>
+      {value && (
+        <div className="field-file-name">
+          <UniversalLink
+            href={value.download}
+            aria-label={intl.formatMessage(messages.downloadFile, {
+              filename: value.filename,
+            })}
+            download={true}
+          >
             {value.filename}
           </UniversalLink>
-        )}
-        {value && (
           <Button
             type="button"
             icon
@@ -247,8 +299,8 @@ const FileWidget = (props) => {
           >
             <Icon name={deleteSVG} size="20px" />
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </FormFieldWrapper>
   );
 };
@@ -263,6 +315,7 @@ FileWidget.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string,
   required: PropTypes.bool,
+  fieldSet: PropTypes.string,
   error: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.shape({
     '@type': PropTypes.string,
@@ -280,6 +333,7 @@ FileWidget.propTypes = {
 FileWidget.defaultProps = {
   description: null,
   required: false,
+  fieldSet: null,
   error: [],
   value: null,
 };

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

@@ -34,11 +34,13 @@ const messages = defineMessages({
   },
   editFile: {
     id: 'Drop file here to replace the existing file',
-    defaultMessage: 'Drop file here to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file',
   },
   fileDrag: {
     id: 'Drop file here to upload a new file',
-    defaultMessage: 'Drop file here to upload a new file',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser',
   },
   replaceFile: {
     id: 'Replace existing file',

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,9 @@ const messages = defineMessages({
 });
 
 export function getSitemapPath(pathname = '', lang) {
+  /* This function is deprecated
+   * We keep it for backwards compatibility.
+   */
   const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
   const path = prefix || lang || '';
   return path;
@@ -32,18 +35,12 @@ export function getSitemapPath(pathname = '', lang) {
  * @returns {JSX.Element} - Rendered component.
  */
 function Sitemap(props) {
-  const {
-    location: { pathname },
-    lang,
-    getNavigation,
-  } = props;
-
+  const { getNavigation, navroot } = props;
   useEffect(() => {
     const { settings } = config;
-    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
-    const path = getSitemapPath(pathname, language);
-    getNavigation(path, 4);
-  }, [pathname, lang, getNavigation]);
+    const path = `${expandToBackendURL(navroot?.navroot?.['@id'])}`;
+    getNavigation(path, settings.siteMapDepth);
+  }, [navroot, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -64,12 +61,13 @@ function Sitemap(props) {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+  const items = useSelector((state) => state.navigation.items);
   return (
     <div id="page-sitemap">
       <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
       <Container className="view-wrapper">
         <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
-        {props.items && renderItems(props.items)}
+        {items && renderItems(items)}
       </Container>
     </div>
   );
@@ -77,18 +75,15 @@ function Sitemap(props) {
 
 Sitemap.propTypes = {
   getNavigation: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
+  navroot: PropTypes.object.isRequired,
   intl: PropTypes.object.isRequired,
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
 };
 
 export const __test__ = compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
@@ -98,24 +93,22 @@ export default compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
   asyncConnect([
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch, getState } }) => {
+      promise: ({ store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const { settings } = config;
-        const path = getSitemapPath(
-          location.pathname,
-          settings.isMultilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(
+            expandToBackendURL(navroot),
+            config.settings.siteMapDepth,
+          ),
         );
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

package/src/components/theme/Sitemap/Sitemap.test.jsx

@@ -43,6 +43,15 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/`,
+            '@type': 'Plone Site',
+            title: 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -94,6 +103,15 @@ describe('Sitemap in a multilingual site', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/en`,
+            '@type': 'LRF',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/config/index.js

@@ -115,6 +115,7 @@ let config = {
     supportedLanguages: ['en'],
     defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE || 'en',
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,

package/theme/themes/pastanaga/extras/focus.less

@@ -0,0 +1,33 @@
+.universal-focus-style() {
+  box-shadow: 0 0 0 2px @innerFocusShadow !important;
+  outline: 2px solid @outerFocusOutline !important;
+  outline-offset: 2px;
+}
+
+// Global focus styles for all elements that support :focus-visible
+// Exclude contenteditable elements (slate editors, rich text inputs) — focus is
+// already implied by the text cursor; an outline ring is noisy and confusing.
+:focus-visible:not([contenteditable]):not([data-slate-editor]) {
+  .universal-focus-style();
+}
+
+//inputs modifications
+input:focus-visible {
+  border-color: @outerFocusOutline !important;
+}
+
+// Semantic UI checkbox focus styles
+.ui.checkbox input:focus-visible ~ label::before {
+  .universal-focus-style();
+  outline-offset: 4px;
+}
+
+.ui.checkbox input:focus-visible ~ label::before {
+  transition: none !important;
+}
+
+// Skiplinks focus styles
+.skiplinks-wrapper a:focus-visible {
+  border: 2px solid @linkColor;
+  outline: 3px solid @linkColor;
+}