@plone/volto 18.9.1 → 18.9.2

package/CHANGELOG.md

@@ -17,6 +17,20 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.9.2 (2025-03-07)
+
+### Bugfix
+
+- Does not show empty `class` attribute when rendering `img` tag with `Image` component. @wesleybl [#6788](https://github.com/plone/volto/issues/6788)
+- Fixed button types across several components to allow reuse in more complex forms @pnicolli [#6791](https://github.com/plone/volto/issues/6791)
+- Fixed `AlternateHrefLangs` component, missing `FlattenToAppURL`. @sneridagh [#6799](https://github.com/plone/volto/issues/6799)
+- a11y - Added id attribute to checkbox widget for proper identification and fixes label functionality for screen readers. @Wagner3UB [#6802](https://github.com/plone/volto/issues/6802)
+
+### Documentation
+
+- Improve the wording on theming docs. @erral [#6767](https://github.com/plone/volto/issues/6767)
+- Fix MyST warnings about bad references, remove cookiecutter-plone-starter link, and remove `rietveldschroderhuis.nl` due to repeated failures and no response in https://github.com/collective/awesome-volto/pull/27. @stevepiercy [#6812](https://github.com/plone/volto/issues/6812)
+
 ## 18.9.1 (2025-02-20)
 
 ### Bugfix

package/README.md

@@ -194,5 +194,4 @@ You should check the dependencies in their `package.json` for more details.
 - [volto-centraalmuseum-theme](https://github.com/intk/volto-centraalmuseum-theme) - Volto project for the [Centraal Museum & Rietveld](https://www.centraalmuseum.nl/nl) made for [INTK](https://www.intk.com/en).
 - [volto-eea-design-system](https://github.com/eea/volto-eea-design-system) - EEA Design System Plone 6 Kit Volto project for [European Environment Agency web sites](https://eea.github.io/volto-eea-design-system/)
 - [volto-eea-kitkat](https://github.com/eea/volto-eea-kitkat) - A known good set of Volto add-ons to be used within all EEA projects and beyond, made for [European Environment Agency](https://www.eea.europa.eu/en)
-- [volto-rietveldschroderhuis-theme](https://github.com/intk/volto-rietveldschroderhuis-theme) - Volto project for the [Rietveld Schröder House](https://www.rietveldschroderhuis.nl/en) made for [INTK](https://www.intk.com/en).
 - [volto-zeeuwsmuseum-theme](https://github.com/intk/volto-zeeuwsmuseum-theme) - Volto project for the [Zeeuws Museum](https://www.zeeuwsmuseum.nl/en) made for [INTK](https://www.intk.com/en).

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.9.1",
+  "version": "18.9.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -237,8 +237,8 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
     "@plone/registry": "2.4.1",
-    "@plone/scripts": "3.8.2",
-    "@plone/volto-slate": "18.2.2"
+    "@plone/volto-slate": "18.2.3",
+    "@plone/scripts": "3.8.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

package/src/components/manage/Add/Add.jsx

@@ -425,7 +425,11 @@ class Add extends Component {
                         title={this.props.intl.formatMessage(messages.save)}
                       />
                     </Button>
-                    <Button className="cancel" onClick={() => this.onCancel()}>
+                    <Button
+                      className="cancel"
+                      onClick={() => this.onCancel()}
+                      type="button"
+                    >
                       <Icon
                         name={clearSVG}
                         className="circled"

package/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -258,6 +258,7 @@ class AddLinkForm extends Component {
             {value.length > 0 ? (
               <Button.Group>
                 <Button
+                  type="button"
                   basic
                   className="cancel"
                   aria-label={this.props.intl.formatMessage(messages.clear)}
@@ -274,6 +275,7 @@ class AddLinkForm extends Component {
             ) : this.props.objectBrowserPickerType === 'link' ? (
               <Button.Group>
                 <Button
+                  type="button"
                   basic
                   icon
                   aria-label={this.props.intl.formatMessage(

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -128,6 +128,7 @@ const BlockChooser = ({
     return (
       <Button.Group key={block.id}>
         <Button
+          type="button"
           icon
           basic
           className={block.id}

package/src/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -29,6 +29,7 @@ export const ButtonComponent = (props) => {
 
   return (
     <Button
+      type="button"
       icon
       basic
       title={intl.formatMessage(messages.addBlock)}

package/src/components/manage/BlockChooser/BlockChooserSearch.jsx

@@ -38,6 +38,7 @@ const BlockChooserSearch = ({ onChange, searchValue }) => {
         />
         {searchValue && (
           <Button
+            type="button"
             className="clear-search-button"
             aria-label={intl.formatMessage(messages.clear)}
             onClick={() => {

package/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -106,6 +106,7 @@ const EditBlockWrapper = (props) => {
           {children}
           {selected && !required && editable && (
             <Button
+              type="button"
               icon
               basic
               onClick={() => onDeleteBlock(block, true)}

package/src/components/manage/Blocks/Container/EditBlockWrapper.jsx

@@ -66,6 +66,7 @@ const EditBlockWrapper = (props) => {
             aria-label={intl.formatMessage(messages.reset, {
               index,
             })}
+            type="button"
             basic
             icon
             onClick={(e) => onResetBlock(block, {})}
@@ -75,6 +76,7 @@ const EditBlockWrapper = (props) => {
           </Button>
         ) : (
           <Button
+            type="button"
             basic
             icon
             className="remove-block-button"

package/src/components/manage/Blocks/Container/NewBlockAddButton.jsx

@@ -49,6 +49,7 @@ const NewBlockAddButton = (props) => {
     <>
       <Ref innerRef={setReferenceElement}>
         <Button
+          type="button"
           basic
           icon
           onClick={() => setOpenMenu(true)}

package/src/components/manage/Blocks/Container/SimpleContainerToolbar.jsx

@@ -25,6 +25,7 @@ const SimpleContainerToolbar = (props) => {
       <Button.Group>
         <Button
           aria-label={intl.formatMessage(messages.addBlock)}
+          type="button"
           icon
           basic
           disabled={data?.blocks_layout?.items?.length >= maxLength}
@@ -36,6 +37,7 @@ const SimpleContainerToolbar = (props) => {
       <Button.Group>
         <Button
           aria-label={intl.formatMessage(messages.blockSettings)}
+          type="button"
           icon
           basic
           onClick={(e) => {

package/src/components/manage/Blocks/HTML/Edit.jsx

@@ -248,6 +248,7 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button
+                  type="button"
                   icon
                   basic
                   aria-label={this.props.intl.formatMessage(messages.source)}
@@ -264,6 +265,7 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button
+                  type="button"
                   icon
                   basic
                   aria-label={this.props.intl.formatMessage(messages.preview)}
@@ -280,6 +282,7 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button
+                  type="button"
                   icon
                   basic
                   aria-label={this.props.intl.formatMessage(messages.prettier)}
@@ -296,7 +299,12 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button.Group>
-                  <Button icon basic onClick={() => this.onChangeCode('')}>
+                  <Button
+                    type="button"
+                    icon
+                    basic
+                    onClick={() => this.onChangeCode('')}
+                  >
                     <Icon name={clearSVG} size="24px" color="#e40166" />
                   </Button>
                 </Button.Group>

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -31,6 +31,7 @@ const ImageSidebar = (props) => {
         <Button.Group>
           <Button
             title={intl.formatMessage(messages.clear)}
+            type="button"
             basic
             disabled={!data.url}
             onClick={() => {

package/src/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -19,6 +19,7 @@ const ImageGallery = loadable(() => import('react-image-gallery'));
 const renderLeftNav = (onClick, disabled) => {
   return (
     <Button
+      type="button"
       className="image-gallery-icon image-gallery-left-nav primary basic"
       disabled={disabled}
       onClick={onClick}
@@ -30,6 +31,7 @@ const renderLeftNav = (onClick, disabled) => {
 const renderRightNav = (onClick, disabled) => {
   return (
     <Button
+      type="button"
       className="image-gallery-icon image-gallery-right-nav primary basic"
       disabled={disabled}
       onClick={onClick}

package/src/components/manage/Blocks/Maps/Edit.jsx

@@ -135,6 +135,7 @@ const Edit = React.memo((props) => {
               {url && (
                 <Button.Group>
                   <Button
+                    type="button"
                     basic
                     className="cancel"
                     onClick={(e) => {
@@ -148,6 +149,7 @@ const Edit = React.memo((props) => {
               )}
               <Button.Group>
                 <Button
+                  type="button"
                   basic
                   primary
                   onClick={(e) => {

package/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -145,6 +145,7 @@ const Facets = (props) => {
           className="toggle-advanced-facets"
         >
           <Button
+            type="button"
             onClick={() => {
               setHidden((prevHidden) => !prevHidden);
             }}

package/src/components/manage/Blocks/Search/components/FilterList.jsx

@@ -53,6 +53,7 @@ const FilterList = (props) => {
           {intl.formatMessage(messages.currentFilters)}: {totalFilters}
         </div>
         <Button
+          type="button"
           icon
           basic
           compact

package/src/components/manage/Blocks/Search/components/SearchInput.jsx

@@ -46,6 +46,7 @@ const SearchInput = (props) => {
       <div className="search-input-actions">
         {searchText && (
           <Button
+            type="button"
             basic
             icon
             className="search-input-clear-icon-button"

package/src/components/manage/Blocks/Search/components/SortOn.jsx

@@ -113,6 +113,7 @@ const SortOn = (props) => {
       {activeSortOn ? (
         <>
           <Button
+            type="button"
             icon
             basic
             compact
@@ -127,6 +128,7 @@ const SortOn = (props) => {
             <Icon name={downSVG} size="25px" />
           </Button>
           <Button
+            type="button"
             icon
             basic
             compact

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -117,6 +117,7 @@ const TeaserData = (props) => {
     <Button.Group>
       <Button
         aria-label={intl.formatMessage(messages.resetTeaser)}
+        type="button"
         basic
         disabled={isReseteable}
         onClick={() => reset()}
@@ -130,6 +131,7 @@ const TeaserData = (props) => {
     <Button.Group className="refresh teaser">
       <Button
         aria-label={intl.formatMessage(messages.refreshTeaser)}
+        type="button"
         basic
         onClick={() => refresh()}
         disabled={isEmpty(data.href)}

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -96,6 +96,7 @@ const Edit = (props) => {
               {url && (
                 <Button.Group>
                   <Button
+                    type="button"
                     basic
                     className="cancel"
                     onClick={(e) => {
@@ -109,6 +110,7 @@ const Edit = (props) => {
               )}
               <Button.Group>
                 <Button
+                  type="button"
                   basic
                   primary
                   onClick={(e) => {

package/src/components/manage/Delete/Delete.jsx

@@ -101,6 +101,7 @@ const Delete = () => {
                 onClick={onSubmit}
               />
               <Button
+                type="button"
                 basic
                 circular
                 secondary

package/src/components/manage/Diff/Diff.jsx

@@ -249,6 +249,7 @@ class Diff extends Component {
                 ],
                 (view) => (
                   <Button
+                    type="button"
                     key={view.id}
                     value={view.id}
                     active={this.props.view === view.id}

package/src/components/manage/Edit/Edit.jsx

@@ -447,6 +447,7 @@ class Edit extends Component {
                     />
                   </Button>
                   <Button
+                    type="button"
                     className="cancel"
                     aria-label={this.props.intl.formatMessage(messages.cancel)}
                     onClick={() => this.onCancel()}

package/src/components/manage/Form/Form.jsx

@@ -1020,6 +1020,7 @@ class Form extends Component {
                   )}
                   {onCancel && (
                     <Button
+                      type="button"
                       basic
                       secondary
                       aria-label={this.props.intl.formatMessage(

package/src/components/manage/Form/ModalForm.jsx

@@ -308,6 +308,7 @@ class ModalForm extends Component {
           </Button>
           {onCancel && (
             <Button
+              type="button"
               basic
               circular
               secondary

package/src/components/manage/Form/UndoToolbar.jsx

@@ -39,6 +39,7 @@ const UndoToolbar = ({ state, onUndoRedo, maxUndoLevels, enableHotKeys }) => {
         dependencies={[canUndo, canRedo]}
       >
         <Button
+          type="button"
           className="undo"
           onClick={() => doUndo()}
           aria-label={intl.formatMessage(messages.undo)}
@@ -58,6 +59,7 @@ const UndoToolbar = ({ state, onUndoRedo, maxUndoLevels, enableHotKeys }) => {
         dependencies={[canUndo, canRedo]}
       >
         <Button
+          type="button"
           className="redo"
           onClick={() => doRedo()}
           aria-label={intl.formatMessage(messages.redo)}

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

@@ -59,6 +59,7 @@ const AlignBlock = ({
       {actions.map((action) => (
         <Button.Group key={action}>
           <Button
+            type="button"
             icon
             basic
             aria-label={intl.formatMessage(messages[action])}

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

@@ -164,6 +164,7 @@ const ObjectBrowserNav = ({
                   >
                     <Button.Group>
                       <Button
+                        type="button"
                         basic
                         icon
                         aria-label={`${intl.formatMessage(messages.browse)} ${

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

@@ -113,6 +113,7 @@ const Sidebar = (props) => {
         style={size > 0 ? { width: size } : null}
       >
         <Button
+          type="button"
           aria-label={
             expanded
               ? intl.formatMessage(messages.shrinkSidebar)
@@ -126,6 +127,7 @@ const Sidebar = (props) => {
           onClick={onToggleExpanded}
         />
         <Button
+          type="button"
           className="full-size-sidenav-btn"
           onClick={onToggleFullSize}
           aria-label="full-screen-sidenav"

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -11,6 +11,7 @@ const TemplateChooser = ({ templates, onSelectTemplate }) => {
           {templates(intl).map((template, index) => (
             <Grid.Column key={template.id}>
               <Button
+                type="button"
                 className="template-chooser-item"
                 onClick={() => onSelectTemplate(index)}
               >

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

@@ -31,6 +31,7 @@ const CheckboxWidget = (props) => {
     <FormFieldWrapper {...props} columns={1}>
       <div className="wrapper">
         <Checkbox
+          id={`field-${id}`}
           name={`field-${id}`}
           checked={value || false}
           disabled={isDisabled}

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

@@ -1,5 +1,6 @@
 import config from '@plone/volto/registry';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { flattenToAppURL, toPublicURL } from '@plone/volto/helpers/Url/Url';
 
 const AlternateHrefLangs = (props) => {
   const { content } = props;
@@ -16,7 +17,7 @@ const AlternateHrefLangs = (props) => {
               key={key}
               rel="alternate"
               hrefLang={item.language}
-              href={item['@id']}
+              href={toPublicURL(flattenToAppURL(item['@id']))}
             />
           );
         })}

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

@@ -35,16 +35,18 @@ describe('AlternateHrefLangs', () => {
     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;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
 
     const content = {
-      '@id': '/en',
+      '@id': 'http://localhost:8080/Plone/en',
       language: { token: 'en', title: 'English' },
       '@components': {
         translations: {
-          items: [{ '@id': '/es', language: 'es' }],
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
         },
       },
     };
@@ -71,17 +73,72 @@ describe('AlternateHrefLangs', () => {
 
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/es',
+      href: 'https://plone.org/es',
       hrefLang: 'es',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/en',
+      href: 'https://plone.org/en',
       hrefLang: 'en',
     });
   });
 
   it('multilingual site, with all available translations', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en',
+      language: { token: 'en', title: 'English' },
+      '@components': {
+        translations: {
+          items: [
+            { '@id': 'http://localhost:8080/Plone/eu', language: 'eu' },
+            { '@id': 'http://localhost:8080/Plone/es', language: 'es' },
+          ],
+        },
+      },
+    };
+
+    // We need to force the component rendering
+    // to fill the Helmet
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+
+    // We expect having 3 links
+    expect(helmetLinks.length).toBe(3);
+
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/eu',
+      hrefLang: 'eu',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/en',
+      hrefLang: 'en',
+    });
+  });
+
+  it('multilingual site, with all available translations - with server URL', () => {
+    config.settings.publicURL = 'https://plone.org';
     config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
@@ -92,13 +149,13 @@ describe('AlternateHrefLangs', () => {
     });
 
     const content = {
-      '@id': '/en',
+      '@id': 'http://localhost:8080/Plone/en',
       language: { token: 'en', title: 'English' },
       '@components': {
         translations: {
           items: [
-            { '@id': '/eu', language: 'eu' },
-            { '@id': '/es', language: 'es' },
+            { '@id': 'http://localhost:8080/Plone/eu', language: 'eu' },
+            { '@id': 'http://localhost:8080/Plone/es', language: 'es' },
           ],
         },
       },
@@ -119,17 +176,17 @@ describe('AlternateHrefLangs', () => {
 
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/eu',
+      href: 'https://plone.org/eu',
       hrefLang: 'eu',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/es',
+      href: 'https://plone.org/es',
       hrefLang: 'es',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/en',
+      href: 'https://plone.org/en',
       hrefLang: 'en',
     });
   });

package/src/components/theme/Image/Image.jsx

@@ -27,10 +27,10 @@ export default function Image({
   // TypeScript hints for editor autocomplete :)
   /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
   const attrs = {};
+  attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
     attrs.src = src;
-    attrs.className = cx(className, { responsive });
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -51,7 +51,6 @@ export default function Image({
     attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
-    attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
       const sortedScales = Object.values({

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

@@ -155,3 +155,11 @@ test('renders an image component from a string src', () => {
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });
+
+test('should not render empty class attribute in img tag', () => {
+  const component = renderer.create(
+    <Image src="/image.png" alt="no class attribute" />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/storybook.jsx

@@ -1490,6 +1490,7 @@ export const FormUndoWrapper = ({
             onClick={() => doUndo()}
             aria-label="Undo"
             disabled={!canUndo}
+            type="button"
           >
             Undo
           </Button>
@@ -1500,6 +1501,7 @@ export const FormUndoWrapper = ({
             onClick={() => doRedo()}
             aria-label="Redo"
             disabled={!canRedo}
+            type="button"
           >
             Redo
           </Button>