@plone/volto 18.33.0 → 18.34.0

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

@@ -8,6 +8,7 @@ const AlternateHrefLangs = (props) => {
     <Helmet>
       {config.settings.isMultilingual &&
         content['@components']?.translations?.items &&
+        content.language?.token &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

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

@@ -36,6 +36,36 @@ describe('AlternateHrefLangs', () => {
     expect(helmetLinks.length).toBe(0);
   });
 
+  it('multilingual site, content without language field, renders nothing', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.supportedLanguages = ['en', 'es'];
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en/newsroom/news',
+      '@components': {
+        translations: {
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
     config.settings.isMultilingual = true;

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

@@ -25,7 +25,7 @@
 }
 
 .ui.form p.help {
-  color: #878f93;
+  color: @inputColor;
   font-size: @13px;
   font-weight: 300;
   line-height: initial;

package/theme/themes/pastanaga/elements/segment.variables

@@ -61,4 +61,4 @@
 
 /* Ordinality */
 @secondaryBackground: @tealBackground;
-@secondaryColor: @teal;
+@secondaryColor: @textColor;

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

@@ -658,6 +658,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/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
           ? [