@plone/volto 18.33.1 → 18.35.0

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}>

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

@@ -14,10 +14,30 @@ import {
   flattenToAppURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
+import { defineMessages, useIntl } from 'react-intl';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 
+const messages = defineMessages({
+  urlMissing: {
+    id: 'URL is missing',
+    defaultMessage: 'URL is missing',
+  },
+  urlInvalid: {
+    id: 'URL is invalid',
+    defaultMessage: 'URL is invalid',
+  },
+  clearUrl: {
+    id: 'Clear URL',
+    defaultMessage: 'Clear URL',
+  },
+  openUrlBrowser: {
+    id: 'Open URL browser',
+    defaultMessage: 'Open URL browser',
+  },
+});
+
 /** Widget to edit urls
  *
  * This is the default widget used for the `remoteUrl` field. You can also use
@@ -40,9 +60,10 @@ export const UrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    required,
   } = props;
   const inputId = `field-${id}`;
-
+  const intl = useIntl();
   const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
   /**
@@ -54,6 +75,7 @@ export const UrlWidget = (props) => {
   const clear = () => {
     setValue('');
     onChange(id, undefined);
+    setIsInvalid(false);
   };
 
   const onChangeValue = (_value) => {
@@ -83,6 +105,14 @@ export const UrlWidget = (props) => {
     onChange(id, newValue === '' ? undefined : newValue);
   };
 
+  // A11y: if the field is required and the user leaves it empty, we mark it as missing
+  const handleBlur = ({ target }) => {
+    if (required && (!target.value || target.value === '')) {
+      setIsInvalid(true);
+    }
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
+
   return (
     <FormFieldWrapper {...props} className="url wide">
       <div className="wrapper">
@@ -90,24 +120,38 @@ export const UrlWidget = (props) => {
           id={inputId}
           name={id}
           type="url"
+          required={required}
+          aria-required={required}
+          aria-invalid={isInvalid}
+          aria-errormessage={isInvalid ? `${inputId}-error` : undefined}
           value={value || ''}
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
+          onBlur={handleBlur}
           onClick={() => onClick()}
           minLength={minLength || null}
           maxLength={maxLength || null}
           error={isInvalid}
         />
+        {isInvalid && (
+          <span
+            id={`${inputId}-error`}
+            role="alert"
+            className="visually-hidden-volto"
+          >
+            {value?.length > 0
+              ? intl.formatMessage(messages.urlInvalid)
+              : intl.formatMessage(messages.urlMissing)}
+          </span>
+        )}
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
-              aria-label="clearUrlBrowser"
+              aria-label={intl.formatMessage(messages.clearUrl)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -120,9 +164,10 @@ export const UrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
-              aria-label="openUrlBrowser"
+              aria-label={intl.formatMessage(messages.openUrlBrowser)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();

package/src/components/theme/Search/Search.jsx

@@ -85,6 +85,7 @@ class Search extends Component {
   componentDidMount() {
     this.doSearch();
     this.setState({ isClient: true });
+    this.focusResults();
   }
 
   /**
@@ -97,6 +98,22 @@ class Search extends Component {
     if (this.props.location.search !== nextProps.location.search) {
       this.doSearch();
     }
+
+    if (
+      JSON.stringify(this.props.search) !== JSON.stringify(nextProps.search)
+    ) {
+      //on opening results page, move focus on results
+      this.focusResults();
+    }
+  };
+
+  focusResults = () => {
+    //on opening results page, move focus on results
+    setTimeout(function () {
+      if (document.querySelector('#page-search #search-results')) {
+        document.querySelector('#page-search #search-results').focus();
+      }
+    }, 100);
   };
 
   /**
@@ -162,7 +179,13 @@ class Search extends Component {
     return (
       <Container id="page-search">
         <Helmet title={this.props.intl.formatMessage(messages.Search)} />
-        <div className="container">
+        <div
+          className="container"
+          role="region"
+          aria-live="polite"
+          id="search-results"
+          tabIndex={-1}
+        >
           <article id="content">
             <header>
               <h1 className="documentFirstHeading">

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

@@ -8,6 +8,7 @@ import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
+  const token = useSelector((state) => state.userSession.token);
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
 
@@ -19,28 +20,35 @@ const Unauthorized = () => {
       </h1>
       <h3>{error_message}</h3>
       <p className="description">
-        <FormattedMessage
-          id="You are trying to access a protected resource, please {login} first."
-          defaultMessage="You are trying to access a protected resource, please {login} first."
-          values={{
-            login: (
-              <Link
-                to={{
-                  pathname: `${getBaseUrl(location.pathname)}/login`,
-                  state: {
-                    // This is needed to cover the use case of being logged in in
-                    // another backend (eg. in development), having a token for
-                    // localhost and try to use it, the login route has to know that
-                    // it's the same as it comes from a logout
-                    isLogout: true,
-                  },
-                }}
-              >
-                <FormattedMessage id="log in" defaultMessage="log in" />
-              </Link>
-            ),
-          }}
-        />
+        {token ? (
+          <FormattedMessage
+            id="You are trying to access a protected resource."
+            defaultMessage="You are trying to access a protected resource."
+          />
+        ) : (
+          <FormattedMessage
+            id="You are trying to access a protected resource, please {login} first."
+            defaultMessage="You are trying to access a protected resource, please {login} first."
+            values={{
+              login: (
+                <Link
+                  to={{
+                    pathname: `${getBaseUrl(location.pathname)}/login`,
+                    state: {
+                      // This is needed to cover the use case of being logged in in
+                      // another backend (eg. in development), having a token for
+                      // localhost and try to use it, the login route has to know that
+                      // it's the same as it comes from a logout
+                      isLogout: true,
+                    },
+                  }}
+                >
+                  <FormattedMessage id="log in" defaultMessage="log in" />
+                </Link>
+              ),
+            }}
+          />
+        )}
       </p>
       <p>
         <FormattedMessage

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

@@ -9,8 +9,35 @@ import Unauthorized from './Unauthorized';
 const mockStore = configureStore();
 
 describe('Unauthorized', () => {
-  it('renders a not found component', () => {
+  it('renders an unauthorized component', () => {
     const store = mockStore({
+      userSession: {
+        token: null,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      apierror: {
+        message: 'You are not authorized to access this resource',
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Unauthorized />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an unauthorized component for authenticated user', () => {
+    const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/helpers/FormValidation/validators.ts

@@ -153,6 +153,15 @@ export const hasUniqueItemsValidator = ({
   return !isValid ? formatMessage(messages.uniqueItems) : null;
 };
 
+const formatDateValue = (isoString: string) => {
+  const date = new Date(isoString);
+  if (isNaN(date.getTime())) return isoString;
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+};
+
 export const startEventDateRangeValidator = ({
   value,
   field,
@@ -163,7 +172,9 @@ export const startEventDateRangeValidator = ({
     value && formData.end && new Date(value) < new Date(formData.end);
   return !isValid
     ? formatMessage(messages.startEventRange, {
-        endDateValueOrEndFieldName: formData.end || 'end',
+        endDateValueOrEndFieldName: formData.end
+          ? formatDateValue(formData.end)
+          : 'end',
       })
     : null;
 };
@@ -178,7 +189,9 @@ export const endEventDateRangeValidator = ({
     value && formData.start && new Date(value) > new Date(formData.start);
   return !isValid
     ? formatMessage(messages.endEventRange, {
-        startDateValueOrStartFieldName: formData.start || 'start',
+        startDateValueOrStartFieldName: formData.start
+          ? formatDateValue(formData.start)
+          : 'start',
       })
     : null;
 };

package/theme/themes/default/globals/site.variables

@@ -82,8 +82,8 @@
 
 /* Input Text Color */
 @inputColor: @textColor;
-@inputPlaceholderColor: lighten(@inputColor, 75);
-@inputPlaceholderFocusColor: lighten(@inputColor, 45);
+@inputPlaceholderColor: lighten(@inputColor, 35);
+@inputPlaceholderFocusColor: lighten(@inputColor, 65);
 
 /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
 @inputLineHeight: unit((17 / 14), em);

package/theme/themes/pastanaga/collections/form.overrides

@@ -31,6 +31,27 @@
   line-height: initial;
 }
 
+// Restore visible focus for keyboard navigation — overrides Semantic UI's `outline: none` on form inputs
+.ui.form input:not([type]),
+.ui.form input[type='date'],
+.ui.form input[type='datetime-local'],
+.ui.form input[type='email'],
+.ui.form input[type='number'],
+.ui.form input[type='password'],
+.ui.form input[type='search'],
+.ui.form input[type='tel'],
+.ui.form input[type='time'],
+.ui.form input[type='text'],
+.ui.form input[type='file'],
+.ui.form input[type='url'],
+.ui.form textarea {
+  padding-left: 5px;
+
+  &:focus-visible {
+    outline: revert;
+  }
+}
+
 .ui.form .ui.input input:not([type]),
 .ui.form .ui.input input[type='date'],
 .ui.form .ui.input input[type='datetime-local'],

package/theme/themes/pastanaga/elements/button.overrides

@@ -27,7 +27,8 @@
 }
 
 #main,
-.slate-inline-toolbar.slate-toolbar {
+.slate-inline-toolbar.slate-toolbar,
+.contenttype-plone-site .ui.page.modals {
   .ui.basic.buttons .button,
   .ui.basic.button {
     -webkit-box-shadow: 0px 0px 0px @basicBorderSize transparent inset !important;
@@ -42,11 +43,16 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
 
+.ui.basic.buttons .button:focus-visible,
+.ui.basic.button:focus-visible {
+  outline: revert;
+}
+
 .ui.basic.primary.button,
 .ui.basic.secondary.button {
   box-shadow: none !important;
@@ -69,7 +75,7 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
@@ -85,3 +91,24 @@
     margin: 0;
   }
 }
+
+.modals {
+  .modal {
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5em;
+
+      .ui.basic.button {
+        display: flex;
+        justify-content: center;
+        padding: 0.3em;
+        margin: 0;
+
+        svg {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -360,6 +360,7 @@ button {
     margin-left: 8px;
 
     h4 {
+      display: inline;
       margin-bottom: 0;
       font-weight: @bold;
     }
@@ -658,6 +659,21 @@ img.responsive {
   margin-top: 20px;
 }
 
+// Accessibility
+// This class is used to hide elements visually but keep them accessible for screen readers and assistive technologies.
+// to not interfere with other 'visually-hidden' classes from other CSS frameworks (e.g. Semantic UI or TailwindCSS), we use a specific class name for Volto 18 (only).
+.visually-hidden-volto {
+  position: absolute !important;
+  overflow: hidden !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  margin: -1px !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+}
+
 // Deprecated as per https://github.com/plone/volto/issues/1265
 // @import 'utils';
 @import (multiple) '../extras/fonts';

package/theme/themes/pastanaga/globals/site.variables

@@ -48,8 +48,6 @@
 /* This adjusts the default form input across all elements */
 @inputHorizontalPadding : 0;
 
-/* Input Text Color */
-@inputPlaceholderColor: #B8C6C8;
 
 
 /*-------------------

package/types/components/manage/Blocks/Block/Order/Item.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/manage/Controlpanels/Users/UsersControlpanel.d.ts

@@ -1,6 +1,2 @@
-export default UsersControlpanel;
-/**
- * UsersControlpanel functional component.
- * @function UsersControlpanel
- */
-declare function UsersControlpanel(): import("react/jsx-runtime").JSX.Element;
+declare const _default: any;
+export default _default;

package/types/components/manage/Controlpanels/Users/UsersControlpanel.ssr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/manage/Controlpanels/index.d.ts

@@ -4,7 +4,7 @@ export declare const RulesControlpanel: import("@loadable/component").LoadableCl
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const UsersControlpanel: import("@loadable/component").LoadableComponent<unknown>;
+export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;

package/webpack-plugins/webpack-less-plugin.js

@@ -143,7 +143,7 @@ module.exports = (userOptions = {}) => ({
           /packages\/volto\/theme/,
           /plone\.volto\/theme/,
           /node_modules\/semantic-ui-less/,
-          ...Object.values(registry.getResolveAliases()),
+          ...Object.values(registry.packages).map((p) => p.modulePath),
         ],
         use: isServer
           ? [