@plone/volto 17.20.4 → 17.22.0

package/.readthedocs.yaml

@@ -3,8 +3,7 @@ build:
   os: "ubuntu-22.04"
   tools:
     python: "3.12"
-  jobs:
-    post_checkout:
-      # Cancel the Read the Docs build
-      # https://docs.readthedocs.io/en/stable/build-customization.html#cancel-build-based-on-a-condition
-      - exit 183;
+  commands:
+    # Cancel the Read the Docs build
+    # https://docs.readthedocs.io/en/stable/build-customization.html#cancel-build-based-on-a-condition
+    - exit 183;

package/CHANGELOG.md

@@ -17,6 +17,28 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 17.22.0 (2025-05-20)
+
+### Feature
+
+- Use table sorting icons from pastanaga `icons.woff` instead of assuming we have Font Awesome icons. Improve accessibility for sortable table headers in table block. @ichim-david @kreafox [#7091](https://github.com/plone/volto/issues/7091)
+
+### Bugfix
+
+- Added an `aria-label` to `CreatableSelect` inside `TokenWidget` to improve the component’s accessibility. @Wagner3UB [#6786](https://github.com/plone/volto/issues/6786)
+
+## 17.21.0 (2025-03-05)
+
+### Feature
+
+- Provide language alternate links @erral [#6616](https://github.com/plone/volto/issues/6616)
+
+### Bugfix
+
+- In `RichTextWidget` and `HtmlSlateWidget`, fix breaking a list by typing Enter. @nileshgulia1 [#6570](https://github.com/plone/volto/issues/6570)
+- Display the appropriately sized image to eliminate blurring from upsizing smaller images in the `srcSet` generation. @giuliaghisini [#6637](https://github.com/plone/volto/issues/6637)
+- a11y - Added id attribute to checkbox widget for proper identification and fixes label functionality for screen readers. @Wagner3UB [#6771](https://github.com/plone/volto/issues/6771)
+
 ## 17.20.4 (2025-01-07)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.20.4",
+  "version": "17.22.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.20.4",
+  "version": "17.22.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Table/TableBlockView.jsx

@@ -71,6 +71,19 @@ const View = ({ data }) => {
     });
   }, [state, rows]);
 
+  const handleSort = (index) => {
+    if (!data.table.sortable) return;
+    setState({
+      column: index,
+      direction:
+        state.column !== index
+          ? 'ascending'
+          : state.direction === 'ascending'
+            ? 'descending'
+            : 'ascending',
+    });
+  };
+  
   return (
     <>
       {data && data.table && (
@@ -92,19 +105,20 @@ const View = ({ data }) => {
                     key={cell.key}
                     textAlign="left"
                     verticalAlign="middle"
+                    tabIndex={data.table.sortable ? '0' : '-1'}
                     sorted={state.column === index ? state.direction : null}
                     onClick={() => {
-                      if (!data.table.sortable) return;
-                      setState({
-                        column: index,
-                        direction:
-                          state.column !== index
-                            ? 'ascending'
-                            : state.direction === 'ascending'
-                            ? 'descending'
-                            : 'ascending',
-                      });
+                      handleSort(index);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleSort(index);
+                      }
                     }}
+                    aria-sort={
+                      state.column === index ? state.direction : 'none'
+                    }
                   >
                     {cell.value &&
                     Node.string({ children: cell.value }).length > 0

package/packages/volto-slate/src/blocks/Text/extensions/breakListInWidget.js

@@ -0,0 +1,67 @@
+import { Editor, Range, Transforms } from 'slate';
+
+import config from '@plone/volto/registry';
+import { isCursorAtBlockEnd } from '@plone/volto-slate/utils/selection';
+import { getCurrentListItem } from '@plone/volto-slate/utils/lists';
+import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks';
+
+export const breakListInWidget = (editor) => {
+  const { insertBreak } = editor;
+
+  editor.insertBreak = () => {
+    if (!(editor.selection && Range.isCollapsed(editor.selection))) {
+      insertBreak();
+      return false;
+    }
+
+    const { slate } = config.settings;
+    const { anchor } = editor.selection;
+
+    const ref = Editor.rangeRef(editor, editor.selection, {
+      affinity: 'inward',
+    });
+
+    const [listItem, listItemPath] = getCurrentListItem(editor);
+    if (listItem) {
+      if (Editor.string(editor, listItemPath)) {
+        Transforms.splitNodes(editor, {
+          at: editor.selection,
+          match: (node) => node.type === slate.listItemType,
+          always: true,
+        });
+
+        return true;
+      }
+    }
+
+    const [parent] = Editor.parent(editor, anchor.path);
+
+    if (parent.type !== slate.listItemType || anchor.offset > 0) {
+      insertBreak();
+      return;
+    }
+
+    Editor.deleteBackward(editor, { unit: 'line' });
+    // also account for empty nodes [{text: ''}]
+    if (Editor.isEmpty(editor, parent)) {
+      Transforms.removeNodes(editor, { at: ref.current });
+
+      Transforms.insertNodes(editor, createEmptyParagraph(), {
+        at: [editor.children.length],
+      });
+      Transforms.select(editor, Editor.end(editor, []));
+
+      return true;
+    }
+
+    Transforms.removeNodes(editor, { at: ref.current });
+
+    if (isCursorAtBlockEnd(editor)) {
+      Editor.insertNode(editor, createEmptyParagraph());
+      return true;
+    }
+    return true;
+  };
+
+  return editor;
+};

package/packages/volto-slate/src/blocks/Text/extensions/index.js

@@ -4,3 +4,4 @@ export * from './breakList';
 export * from './withLists';
 export * from './isSelected';
 export * from './normalizeExternalData';
+export * from './breakListInWidget';

package/packages/volto-slate/src/blocks/Text/index.js

@@ -23,6 +23,7 @@ import {
 import { withDeleteSelectionOnEnter } from '@plone/volto-slate/editor/extensions';
 import {
   breakList,
+  breakListInWidget,
   withDeserializers,
   withLists,
   withSplitBlocksOnBreak,
@@ -48,6 +49,7 @@ export default function applyConfig(config) {
       breakList,
       normalizeExternalData,
     ],
+    slateWidgetExtensions: [breakListInWidget],
 
     // Pluggable handlers for the onKeyDown event of <Editable />
     // Order matters here. A handler can return `true` to stop executing any

package/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx

@@ -12,6 +12,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard';
 import { makeEditor } from '@plone/volto-slate/utils';
 import deserialize from '@plone/volto-slate/editor/deserialize';
 
@@ -19,14 +20,15 @@ import {
   createEmptyParagraph,
   normalizeExternalData,
 } from '@plone/volto-slate/utils';
+import config from '@plone/volto/registry';
+
 import { ErrorBoundary } from './ErrorBoundary';
 
 import './style.css';
 
 const messages = defineMessages({
   error: {
-    id:
-      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+    id: 'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
     defaultMessage:
       'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
   },
@@ -45,6 +47,8 @@ const HtmlSlateWidget = (props) => {
     intl,
   } = props;
 
+  const { slateWidgetExtensions } = config.settings.slate;
+
   const [selected, setSelected] = React.useState(focus);
 
   const editor = React.useMemo(() => makeEditor(), []);
@@ -128,6 +132,9 @@ const HtmlSlateWidget = (props) => {
             block={block}
             selected={selected}
             properties={properties}
+            extensions={slateWidgetExtensions}
+            onKeyDown={handleKeyDetached}
+            editableProps={{ 'aria-multiline': 'true' }}
             placeholder={placeholder}
           />
         </ErrorBoundary>

package/packages/volto-slate/src/widgets/RichTextWidget.jsx

@@ -7,7 +7,9 @@ import React from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 import { FormFieldWrapper } from '@plone/volto/components';
+import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import config from '@plone/volto/registry';
 
 import { createEmptyParagraph, createParagraph } from '../utils/blocks';
 
@@ -37,6 +39,7 @@ const SlateRichTextWidget = (props) => {
     readOnly = false,
   } = props;
   const [selected, setSelected] = React.useState(focus);
+  const { slateWidgetExtensions } = config.settings.slate;
 
   return (
     <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
@@ -62,7 +65,10 @@ const SlateRichTextWidget = (props) => {
           block={block}
           selected={selected}
           properties={properties}
+          extensions={slateWidgetExtensions}
+          onKeyDown={handleKeyDetached}
           placeholder={placeholder}
+          editableProps={{ 'aria-multiline': 'true' }}
         />
       </div>
     </FormFieldWrapper>

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/manage/Widgets/TokenWidget.jsx

@@ -173,6 +173,7 @@ class TokenWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <CreatableSelect
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}

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

@@ -0,0 +1,23 @@
+import config from '@plone/volto/registry';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+
+const AlternateHrefLangs = (props) => {
+  const { content } = props;
+  return (
+    <Helmet>
+      {config.settings.isMultilingual &&
+        content['@components']?.translations?.items?.map((item, key) => {
+          return (
+            <link
+              key={key}
+              rel="alternate"
+              hrefLang={item.language}
+              href={item['@id']}
+            />
+          );
+        })}
+    </Helmet>
+  );
+};
+
+export { AlternateHrefLangs };

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import { AlternateHrefLangs } from './AlternateHrefLangs';
+
+const mockStore = configureStore();
+
+describe('AlternateHrefLangs', () => {
+  beforeEach(() => {});
+  it('non multilingual site, renders nothing', () => {
+    config.settings.isMultilingual = false;
+    const content = {
+      '@id': '/',
+      '@components': {},
+    };
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    // 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;
+    expect(helmetLinks.length).toBe(0);
+  });
+  it('multilingual site, with some translations', () => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+
+    const content = {
+      '@components': {
+        translations: {
+          items: [
+            { '@id': '/en', language: 'en' },
+            { '@id': '/es', language: 'es' },
+          ],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    // 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;
+
+    expect(helmetLinks.length).toBe(2);
+
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/en',
+      hrefLang: 'en',
+    });
+  });
+  it('multilingual site, with all available translations', () => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const content = {
+      '@components': {
+        translations: {
+          items: [
+            { '@id': '/en', language: 'en' },
+            { '@id': '/eu', language: 'eu' },
+            { '@id': '/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: '/eu',
+      hrefLang: 'eu',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/en',
+      hrefLang: 'en',
+    });
+  });
+});

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

@@ -54,7 +54,14 @@ export default function Image({
     attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
-      const sortedScales = Object.values(image.scales).sort((a, b) => {
+      const sortedScales = Object.values({
+        ...image.scales,
+        original: {
+          download: `${image.download}`,
+          width: image.width,
+          height: image.height,
+        },
+      }).sort((a, b) => {
         if (a.width > b.width) return 1;
         else if (a.width < b.width) return -1;
         else return 0;

package/src/components/theme/View/View.jsx

@@ -18,6 +18,7 @@ import {
   Tags,
   Toolbar,
 } from '@plone/volto/components';
+import { AlternateHrefLangs } from '@plone/volto/components/theme/AlternateHrefLangs/AlternateHrefLangs';
 import { listActions, getContent } from '@plone/volto/actions';
 import {
   BodyClass,
@@ -238,6 +239,7 @@ class View extends Component {
     return (
       <div id="view">
         <ContentMetadataTags content={this.props.content} />
+        <AlternateHrefLangs content={this.props.content} />
         {/* Body class if displayName in component is set */}
         <BodyClass
           className={

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

@@ -19,6 +19,15 @@
   vertical-align: @headerVerticalAlign;
 }
 
+// use sorting icons from icons.woff instead of assuming it's font awesome
+.ui.sortable.table thead th.ascending::after {
+  content: '\E9EC';
+}
+
+.ui.sortable.table thead th.descending::after {
+  content: '\E9EB';
+}
+
 .ui.table tr > th:first-child {
   border-left: none;
 }

package/types/components/theme/AlternateHrefLangs/AlternateHrefLangs.d.ts

@@ -0,0 +1 @@
+export function AlternateHrefLangs(props: any): JSX.Element;

package/types/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.d.ts

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