@plone/volto 17.21.0 → 17.22.0

package/CHANGELOG.md

@@ -17,6 +17,16 @@ 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

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.21.0",
+  "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.21.0",
+  "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/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/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;
 }