@plone/volto 19.1.4 → 19.1.6

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { Popup } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -10,6 +11,13 @@ import checkSVG from '@plone/volto/icons/check.svg';
 import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
+const messages = defineMessages({
+  clearSelection: {
+    id: 'Clear selection',
+    defaultMessage: 'Clear selection',
+  },
+});
+
 export const MenuList = ({ children }) => {
   return <DynamicHeightList>{children}</DynamicHeightList>;
 };
@@ -118,8 +126,32 @@ export const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
 
 export const ClearIndicator = injectLazyLibs('reactSelect')((props) => {
   const { ClearIndicator } = props.reactSelect.components;
+  const intl = useIntl();
+  const fieldLabelId = props.selectProps?.['aria-labelledby'];
+  const clearLabelId = `${props.selectProps?.inputId}-clear-label`;
   return (
-    <ClearIndicator {...props}>
+    <ClearIndicator
+      {...props}
+      innerProps={{
+        ...props.innerProps,
+        'aria-hidden': false,
+        ...(fieldLabelId
+          ? { 'aria-labelledby': `${fieldLabelId} ${clearLabelId}` }
+          : { 'aria-label': intl.formatMessage(messages.clearSelection) }),
+        role: 'button',
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+            e.preventDefault();
+            e.stopPropagation();
+            props.clearValue();
+          }
+        },
+      }}
+    >
+      <span id={clearLabelId} hidden>
+        {intl.formatMessage(messages.clearSelection)}
+      </span>
       <Icon name={clearSVG} size="18px" color="#e40166" />
     </ClearIndicator>
   );

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

@@ -263,9 +263,10 @@ class SelectWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <Select
           id={`field-${id}`}
+          fieldTitle={this.props.title}
           key={choices}
           name={id}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
+          aria-label={this.props.title || undefined}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
@@ -304,7 +305,7 @@ class SelectWidget extends Component {
                 : undefined,
             );
           }}
-          isClearable={this.props.isClearable}
+          isClearable={!this.props.required && this.props.isClearable}
         />
       </FormFieldWrapper>
     );

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

@@ -0,0 +1,33 @@
+.universal-focus-style() {
+  box-shadow: 0 0 0 2px @innerFocusShadow !important;
+  outline: @outerFocusOutline auto 2px !important;
+  outline-offset: 2px;
+}
+
+// Global focus styles for all elements that support :focus-visible
+// Exclude contenteditable elements (slate editors, rich text inputs) — focus is
+// already implied by the text cursor; an outline ring is noisy and confusing.
+:focus-visible:not([contenteditable]):not([data-slate-editor]) {
+  .universal-focus-style();
+}
+
+//inputs modifications
+input:focus-visible {
+  border-color: @outerFocusOutline !important;
+}
+
+// Semantic UI checkbox focus styles
+.ui.checkbox input:focus-visible ~ label::before {
+  .universal-focus-style();
+  outline-offset: 4px;
+}
+
+.ui.checkbox input:focus-visible ~ label::before {
+  transition: none !important;
+}
+
+// Skiplinks focus styles
+.skiplinks-wrapper a:focus-visible {
+  border: 2px solid @linkColor;
+  outline: 3px solid @linkColor;
+}

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

@@ -713,6 +713,7 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'focus.less';
 @import 'block-types.less';
 @import 'videoembed.less';
 .loadUIOverrides();

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

@@ -12,9 +12,7 @@
       top: 10px;
       left: 10px;
       padding: 10px;
-      border: 2px solid @linkColor;
       background: #fff;
-      outline: 3px solid @linkColor;
     }
 
     &:hover {

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

@@ -362,3 +362,10 @@
 /*---  Dark Tones  ---*/
 
 /*---  Light Tones  ---*/
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+@innerFocusShadow: #fff;
+@outerFocusOutline: #000;

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

@@ -1,7 +1,55 @@
+import type { IntlShape } from 'react-intl';
 import type { Location } from 'history';
+import type { BlocksConfigData } from '@plone/types';
 type RouteProps = {
     history: History;
     location: Location;
 };
+/**
+ * List the configured blocks, by title.
+ *
+ * An add-on can configure a block that was never registered — enhancing one
+ * that ships with another add-on, say — which leaves an entry behind that is
+ * not a block at all, with no id or no title. `BlockConfigBase` says both are
+ * always there, but the config disagrees, so drop those entries rather than
+ * list a block that does not exist.
+ * @function sortConfigBlocks
+ * @param {BlocksConfigData} blocksConfig The blocks configuration.
+ * @param {IntlShape} intl Used to translate each block title.
+ * @returns {Array} The configured blocks, sorted by translated title.
+ */
+export declare function sortConfigBlocks(blocksConfig: BlocksConfigData, intl: IntlShape): {
+    title: string;
+    id: string;
+    icon: string;
+    group: string;
+    category?: string;
+    blockModel?: number;
+    view?: React.ComponentType<import("@plone/types").BlockViewProps>;
+    edit?: React.ComponentType<import("@plone/types").BlockEditProps>;
+    schema?: object;
+    blockSchema: import("@plone/types").JSONSchema | ((args?: import("@plone/types").BlockSchemaArgs) => import("@plone/types").JSONSchema);
+    dataAdapter?: ({ block, data, id, onChangeBlock, value, }: {
+        block: string;
+        data: import("@plone/types").BlocksFormData;
+        id: string;
+        onChangeBlock: (id: string, newData: any) => void;
+        value: any;
+    }) => void;
+    restricted: ((args: {
+        properties: import("@plone/types").Content;
+        block: import("@plone/types").BlockConfigBase;
+        navRoot: import("@plone/types").Content;
+        contentType: string;
+        user: import("@plone/types").User;
+    }) => boolean) | boolean;
+    mostUsed: boolean;
+    blockHasOwnFocusManagement?: boolean;
+    sidebarTab: boolean | 0 | 1;
+    schemaEnhancer?: (args: import("@plone/types").SchemaEnhancerArgs) => import("@plone/types").JSONSchema;
+    variations?: import("@plone/types").BlockExtension[];
+    extensions?: Record<string, import("@plone/types").BlockExtension>;
+    blocksConfig?: Partial<BlocksConfigData>;
+}[];
 declare const BlockTypesControlpanel: (props: RouteProps) => import("react/jsx-runtime").JSX.Element;
 export default BlockTypesControlpanel;

package/types/components/manage/Widgets/QuerystringWidget.d.ts

@@ -13,10 +13,6 @@ export function objectSchema({ intl, isDisabled, value }: {
             title: any;
             widget: string;
         };
-        depth: {
-            title: any;
-            type: string;
-        };
         sort_on: {
             title: any;
             widget: string;