@plone/volto 18.35.0 → 18.36.0

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