@plone/volto 19.1.2 → 19.1.4

package/src/components/manage/Multilingual/CompareLanguages.jsx

@@ -28,19 +28,9 @@ const CompareLanguagesMenu = ({
 }) => {
   const intl = useIntl();
 
-  const ClickOutsideListener = () => {
-    closeMenu();
-  };
-
-  const ref = useDetectClickOutside({
-    onTriggered: ClickOutsideListener,
-    triggerKeys: ['Escape'],
-  });
-
   return (
     <div
       className="toolbar-content show compare-languages"
-      ref={ref}
       style={{
         flex: theToolbar.current
           ? `0 0 ${theToolbar.current.getBoundingClientRect().width}px`
@@ -106,6 +96,10 @@ const CompareLanguages = React.forwardRef((props, ref) => {
   const intl = useIntl();
   const [viewMenu, setViewMenu] = useState(false);
   const translations = content?.['@components']?.translations?.items || [];
+  const compareLanguagesRef = useDetectClickOutside({
+    onTriggered: () => setViewMenu(false),
+    triggerKeys: ['Escape'],
+  });
 
   const translationsObject = {};
   translations.forEach((t) => {
@@ -114,19 +108,27 @@ const CompareLanguages = React.forwardRef((props, ref) => {
 
   if (translations.length > 0) {
     return (
-      <div className="toolbar-compare-translations-wrapper">
+      <div
+        className="toolbar-compare-translations-wrapper"
+        ref={compareLanguagesRef}
+      >
         <div className="toolbar-button-spacer" />
 
         <Button
+          type="button"
           aria-label={intl.formatMessage(messages.compare_to)}
           title={intl.formatMessage(messages.compare_to)}
           onClick={() => {
-            setViewMenu(!viewMenu);
+            setViewMenu((viewMenu) => !viewMenu);
           }}
           id="toolbar-compare-translations"
           className="toolbar-button-compare-translations"
         >
-          <Icon className="mobile hidden" name={translateSVG} size="30px" />
+          <Icon
+            className="mobile hidden"
+            name={viewMenu ? clearSVG : translateSVG}
+            size="30px"
+          />
           {viewMenu ? (
             <Icon className="mobile only" name={clearSVG} size="30px" />
           ) : (

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

@@ -35,12 +35,12 @@ const messages = defineMessages({
     defaultMessage: 'Drop files here ...',
   },
   editFile: {
-    id: 'Drop file here to replace the existing file',
-    defaultMessage: 'Drop file here to replace the existing file',
+    id: 'Drop a file here or click to replace the existing file',
+    defaultMessage: 'Drop a file here 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',
+    id: 'Drop a file here or click to upload',
+    defaultMessage: 'Drop a file here or click to upload',
   },
   replaceFile: {
     id: 'Replace existing file',
@@ -60,8 +60,16 @@ const messages = defineMessages({
     defaultMessage: 'File is not of the accepted type {accept}',
   },
   dragAndDropActionA11y: {
-    id: 'Press Enter to browse files from your computer.',
-    defaultMessage: 'Press Enter to browse files from your computer.',
+    id: 'File upload area. Press Enter to open the file browser',
+    defaultMessage: 'File upload area. Press Enter to open the file browser',
+  },
+  requiredField: {
+    id: 'This field is required.',
+    defaultMessage: 'This field is required.',
+  },
+  downloadFile: {
+    id: 'Download {filename}',
+    defaultMessage: 'Download {filename}',
   },
 });
 
@@ -89,7 +97,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 +179,16 @@ const FileWidget = (props) => {
     reader.readAsDataURL(files[0]);
   };
 
+  const statusTextA11y = [
+    intl.formatMessage(messages.dragAndDropActionA11y), // Interaction instructions
+    props.required && intl.formatMessage(messages.requiredField), // Required field status
+    value?.filename, // Current file name if a file is uploaded
+  ]
+    .filter(Boolean)
+    .join('. ');
+
+  const errorTextA11y = props.error?.length ? props.error.join('. ') : null;
+
   return (
     <FormFieldWrapper {...props}>
       <Dropzone
@@ -179,7 +197,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 +229,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">
+              {statusTextA11y}
+            </span>
+            {errorTextA11y && (
+              <span role="alert" className="visually-hidden">
+                {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 +289,8 @@ const FileWidget = (props) => {
           >
             <Icon name={deleteSVG} size="20px" />
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </FormFieldWrapper>
   );
 };
@@ -263,6 +305,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 +323,7 @@ FileWidget.propTypes = {
 FileWidget.defaultProps = {
   description: null,
   required: false,
+  fieldSet: null,
   error: [],
   value: null,
 };

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

@@ -2,9 +2,9 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React from 'react';
+import React, { Children, 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, useIntl } from 'react-intl';
@@ -59,7 +59,15 @@ const FormFieldWrapper = ({
 
   const wdg = (
     <>
-      {children}
+      {Children.map(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"

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

@@ -33,8 +33,8 @@ const messages = defineMessages({
     defaultMessage: 'Drop files here ...',
   },
   editFile: {
-    id: 'Drop file here to replace the existing file',
-    defaultMessage: 'Drop file here to replace the existing file',
+    id: 'Drop a file here or click to replace the existing file',
+    defaultMessage: 'Drop a file here or click to replace the existing file',
   },
   fileDrag: {
     id: 'Drop file here to upload a new file',

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/MultilingualRedirector/MultilingualRedirector.jsx

@@ -6,7 +6,7 @@ import { changeLanguage } from '@plone/volto/actions/language/language';
 import { toGettextLang, toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
-  const { pathname, children } = props;
+  const { pathname, contentLanguage, children } = props;
   const [cookies] = useCookies();
   const site = useSelector((state) => state.site.data);
   const isMultilingual = site.features?.multilingual;
@@ -44,8 +44,11 @@ const MultilingualRedirector = (props) => {
         performLanguageSwitch(redirectToLanguage);
       } else {
         const lang = pathname.split('/')[1];
+        const contentLanguageMatchesPath =
+          !contentLanguage || contentLanguage === lang;
         if (
           availableLanguages?.includes(lang) &&
+          contentLanguageMatchesPath &&
           lang !== toBackendLang(currentLanguage)
         ) {
           performLanguageSwitch(lang);
@@ -62,6 +65,7 @@ const MultilingualRedirector = (props) => {
     isMultilingual,
     availableLanguages,
     currentLanguage,
+    contentLanguage,
   ]);
   return pathname === '/' && isMultilingual ? (
     <Redirect to={`/${toBackendLang(redirectToLanguage)}`} />

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

@@ -10,6 +10,17 @@ import MultilingualRedirector from './MultilingualRedirector';
 const mockStore = configureStore();
 
 describe('MultilingualRedirector', () => {
+  const renderComponent = (store, props) =>
+    renderer.create(
+      <Provider store={store}>
+        <CookiesProvider>
+          <MemoryRouter>
+            <MultilingualRedirector {...props} />
+          </MemoryRouter>
+        </CookiesProvider>
+      </Provider>,
+    );
+
   it('renders a MultilingualRedirector component', () => {
     const store = mockStore({
       site: {
@@ -20,16 +31,35 @@ describe('MultilingualRedirector', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
-      <Provider store={store}>
-        <CookiesProvider>
-          <MemoryRouter>
-            <MultilingualRedirector pathname={'/'} />
-          </MemoryRouter>
-        </CookiesProvider>
-      </Provider>,
-    );
+    const component = renderComponent(store, { pathname: '/' });
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('does not switch to the path language when content language differs', () => {
+    const store = mockStore({
+      site: {
+        data: {
+          features: {
+            multilingual: true,
+          },
+          'plone.available_languages': ['en', 'es'],
+          'plone.default_language': 'en',
+        },
+      },
+      intl: {
+        locale: 'es',
+        messages: {},
+      },
+    });
+
+    renderer.act(() => {
+      renderComponent(store, {
+        pathname: '/en/document',
+        contentLanguage: 'es',
+      });
+    });
+
+    expect(store.getActions()).toEqual([]);
+  });
 });

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

@@ -485,6 +485,7 @@ fieldset.invisible {
 }
 
 .file-widget-dropzone {
+  padding-bottom: 1rem;
   outline: none;
 }
 

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

@@ -714,8 +714,16 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
   .toolbar-compare-translations-wrapper {
     position: relative;
 
-    .toolbar-button-compare-translations .icon {
-      padding: 4px;
+    .toolbar-button-compare-translations {
+      display: flex;
+      width: 42px;
+      height: 42px;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        padding: 4px;
+      }
     }
 
     .compare-languages {