Merge branch 'main' into ToC-a11y

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+- [ ] I signed and returned the [Plone Contributor Agreement](https://plone.org/foundation/contributors-agreement), and received and accepted an invitation to join a team in the Plone GitHub organization.
+- [ ] I verified there aren't other open [pull requests](https://github.com/plone/volto/pulls) for the same change.
+- [ ] I followed the guidelines in [Contributing to Volto](https://6.docs.plone.org/volto/contributing/index.html).
+- [ ] I succesfully ran [code linting checks](https://6.docs.plone.org/volto/contributing/linting.html) on my changes locally.
+- [ ] I succesfully ran [unit tests](https://6.docs.plone.org/volto/contributing/testing.html) on my changes locally.
+- [ ] I succesfully ran [acceptance tests](https://6.docs.plone.org/volto/contributing/acceptance-tests.html) on my changes locally.
+- [ ] If needed, I added new tests for my changes.
+- [ ] If needed, I added [documentation](https://6.docs.plone.org/volto/contributing/documentation.html#narrative-documentation) for my changes, either in the Storybook or narrative documentation.
+- [ ] I included a [change log entry](https://6.docs.plone.org/contributing/index.html#contributing-change-log-label) in my commits.
+
+-----
+
+If your pull request closes an open issue, include the exact text below, immediately followed by the issue number. When your pull request gets merged, then that issue will close automatically.
+
+Closes #

apps/vite-ssr/README.md

@@ -1,6 +1,6 @@
 # Plone on Vite with SSR mode
 
-This is a proof of concept of a [Vite](https://vitejs.dev) build, using `@plone/client` and `@plone/components` libraries.
+This is a proof of concept of a [Vite](https://vite.dev/) build, using `@plone/client` and `@plone/components` libraries.
 This is intended to serve as both a playground for the development of both packages and as a demo of Plone using Vite built with server side rendering (SSR).
 
 It also uses [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) for its routing library.

apps/vite/README.md

@@ -1,6 +1,6 @@
 # Plone on Vite
 
-This is a proof of concept of a [Vite](https://vitejs.dev) build, using `@plone/client` and `@plone/components` libraries.
+This is a proof of concept of a [Vite](https://vite.dev/) build, using `@plone/client` and `@plone/components` libraries.
 This is intended to serve as both a playground for the development of both packages and as a demo of Plone using Vite.
 
 It also uses [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) for its routing library.

docs/source/contributing/developing-core.md

@@ -71,9 +71,9 @@ Volto has the following folder structure.
 ```
 
 
-## Development pre-requisites
+## Development prerequisites
 
-To set up a Volto core development environment, your system must satisfy the following pre-requisites.
+To set up a Volto core development environment, your system must satisfy the following prerequisites.
 
 ```{include} ./install-operating-system.md
 ```
@@ -330,13 +330,6 @@ By default, the use of TypeScript is required in Plone frontend libraries, Volto
 
 The monorepository consists of several core libraries.
 
-### Volto project generator
-
-`@plone/generator-volto` is a Yeoman generator that helps you set up Volto via command line.
-It generates all the boilerplate needed to start developing a Plone Volto project.
-It is used by [CookieCutter Plone Starter](https://github.com/collective/cookiecutter-plone-starter), the recommended way to set up Plone projects.
-The generator features an `addon` template for scaffolding Volto add-ons in your projects.
-
 ### Registry
 
 `@plone/registry` provides support for building an add-on registry and infrastructure for JavaScript and TypeScript-based apps.
@@ -354,6 +347,17 @@ Used by Volto, you can also use it in other JavaScript frameworks and environmen
 
 `@plone/volto-slate` is the glue package that provides support for the Slate library in Volto.
 
+### Volto project generator
+
+`@plone/generator-volto` is a Yeoman generator that helps you set up Volto via command line.
+It generates all the boilerplate needed to start developing a Plone Volto project.
+It is used by [CookieCutter Plone Starter](https://github.com/collective/cookiecutter-plone-starter), the recommended way to set up Plone projects.
+The generator features an `addon` template for scaffolding Volto add-ons in your projects.
+
+```{deprecated} 18.0.0-alpha.43
+For Volto 18, `@plone/generator-volto` is replaced by [Cookieplone](https://github.com/plone/cookieplone).
+```
+
 
 ## Supported frontends
 
@@ -362,7 +366,7 @@ Volto is the default frontend, and is React-based.
 Classic UI is the Python-based, server-side rendered frontend.
 
 In Volto's `apps` folder, you'll find a Volto project scaffolding that uses Volto as a library.
-This is the same as that which you'll have when you run the Volto generator or `cookiecutter-plone-starter`.
+This is the same as that which you'll have when you follow the instructions in {doc}`plone:install/create-project`).
 
 
 ## Experimental frontends

docs/source/release-notes/index.md

@@ -17,6 +17,45 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.44 (2024-10-03)
+
+### Feature
+
+- Added `config.settings.nonContentRoutesPublic` to avoid `isCmsUi` issues in these public routes. @giuliaghisini [#6173](https://github.com/plone/volto/issues/6173)
+- Add language independent field icon. @iRohitSingh [#6297](https://github.com/plone/volto/issues/6297)
+- Improve DiffField.jsx to render only the blocks on the page with better support for displaying HTML elements such as images. @dobri1408 [#6309](https://github.com/plone/volto/issues/6309)
+- Updated Italian Italian translations. @gianniftp [#6342](https://github.com/plone/volto/issues/6342)
+- Update Brazilian Portuguese translations. @ericof 
+
+### Bugfix
+
+- Increase specificity of table header style selector to properly override colors for better contrast @jackahl [#2487](https://github.com/plone/volto/issues/2487)
+- Change Form input:focus text color to the `textColor` value for a11y. 
+  Add Cypress test for contact form inputs. @ThomasKindermann @tedw87 [#2570](https://github.com/plone/volto/issues/2570)
+- Add missing `for` attribute to checkbox label to improve accessibility. @gomez [#6249](https://github.com/plone/volto/issues/6249)
+- - Fixed build style classnames in edit mode. Also use buildStyleClassNamesExtenders. @giuliaghisini [#6259](https://github.com/plone/volto/issues/6259)
+- Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl [#6293](https://github.com/plone/volto/issues/6293)
+- - Join validation errors in one single toast and update errors from response. @cekk
+  - Toast content now has a <div> wrapper instead of a <p>. @cekk [#6295](https://github.com/plone/volto/issues/6295)
+- Fixed findBlocks when no blocks are passed. @giuliaghisini [#6299](https://github.com/plone/volto/issues/6299)
+- Fixed toolbar buttons not having a focus outline. @JeffersonBledsoe [#6313](https://github.com/plone/volto/issues/6313)
+- fix: SidebarPopup close on ESC keypress @nileshgulia1 [#6315](https://github.com/plone/volto/issues/6315)
+- Changed sidebar accordion text colour from @teal to @textColor. @JeffersonBledsoe [#6330](https://github.com/plone/volto/issues/6330)
+- Labels accessibility for ArrayWidget, SelectWidget, TokenWidget. @folix-01 [#6332](https://github.com/plone/volto/issues/6332)
+- Use lighter blue as link color in inverted tables to improve contrast for a11y @jackahl [#6334](https://github.com/plone/volto/issues/6334)
+
+### Internal
+
+- Added a pull request template as a checklist before submitting a PR. @stevepiercy [#6365](https://github.com/plone/volto/issues/6365)
+
+### Documentation
+
+- Update references to cookiecutter-plone-starter in docs. @davisagli [#6289](https://github.com/plone/volto/issues/6289)
+- - Revised Cookieplone section in the Upgrade Guide. @stevepiercy [#6290](https://github.com/plone/volto/issues/6290)
+- - Fix the MyST syntax for the label `upgrade-18-cookieplone-label`. @stevepiercy [#6360](https://github.com/plone/volto/issues/6360)
+- Fixed spelling of prerequisites. @stevepiercy [#6362](https://github.com/plone/volto/issues/6362)
+- Fix links to Vite website. @stevepiercy [#6366](https://github.com/plone/volto/issues/6366)
+
 ## 18.0.0-alpha.43 (2024-09-13)
 
 ### Breaking

docs/source/upgrade-guide/index.md

@@ -395,7 +395,7 @@ If you shadowed the module {file}`packages/volto/src/helpers/FormValidation/Form
 This prop must be assigned with the new prop passed down from the blocks engine `blocksErrors`.
 If not passed down, the block can't display any field validation error.
 
-```tsx
+```jsx
 // More component code above here
 
   const {
@@ -451,7 +451,7 @@ The `Tags` component has been moved to the `belowContent` slot.
 It now receives the `content` property instead of the `tags` property.
 
 
-{upgrade-18-cookieplone-label}=
+(upgrade-18-cookieplone-label)=
 
 ### Cookieplone is now the recommended project and add-on generator for Volto 18
 

packages/client/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-alpha.18 (2024-10-03)
+
+### Bugfix
+
+- Fixed client copy mutation, cleanup up move mutation for consistency @pnicolli [#6349](https://github.com/plone/volto/pull/6349)
+
 ## 1.0.0-alpha.17 (2024-09-13)
 
 ### Documentation

packages/client/package.json

@@ -8,7 +8,7 @@
     }
   ],
   "license": "MIT",
-  "version": "1.0.0-alpha.17",
+  "version": "1.0.0-alpha.18",
   "repository": {
     "type": "git",
     "url": "[email protected]:plone/volto.git"

packages/client/src/restapi/copymove/copy.test.tsx

@@ -43,7 +43,7 @@ describe('[POST] Copy', () => {
     });
 
     act(() => {
-      result.current.mutate({ data: copyData });
+      result.current.mutate({ path: '/', data: copyData });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -80,7 +80,7 @@ describe('[POST] Copy', () => {
     });
 
     act(() => {
-      result.current.mutate({ data: copyMultipleData });
+      result.current.mutate({ path: '/', data: copyMultipleData });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));

packages/client/src/restapi/copymove/copy.ts

@@ -1,37 +1,35 @@
 import { z } from 'zod';
 import { ApiRequestParams, apiRequest } from '../../API';
-import {
-  PloneClientConfig,
-  PloneClientConfigSchema,
-} from '../../validation/config';
+import { PloneClientConfig } from '../../validation/config';
 import { copyMoveDataSchema as copyDataSchema } from '../../validation/copymove';
 import { CopyMoveResponse as CopyResponse } from '@plone/types';
 
-export const copyArgsSchema = z.object({
-  data: copyDataSchema,
-  config: PloneClientConfigSchema,
-});
-
-export type CopyArgs = z.infer<typeof copyArgsSchema>;
+export type CopyArgs = z.infer<typeof copyDataSchema> & {
+  config: PloneClientConfig;
+};
 
 export const copy = async ({
+  path,
   data,
   config,
 }: CopyArgs): Promise<CopyResponse> => {
-  const validatedArgs = copyArgsSchema.parse({
+  const validatedArgs = copyDataSchema.parse({
+    path,
     data,
-    config,
   });
 
   const options: ApiRequestParams = {
+    config,
     data: validatedArgs.data,
-    config: validatedArgs.config,
   };
 
-  return apiRequest('post', '/@copy', options);
+  const copyPath = `${validatedArgs.path}/@copy`;
+
+  return apiRequest('post', copyPath, options);
 };
 
 export const copyMutation = ({ config }: { config: PloneClientConfig }) => ({
   mutationKey: ['post', 'copy'],
-  mutationFn: ({ data }: Omit<CopyArgs, 'config'>) => copy({ data, config }),
+  mutationFn: ({ path, data }: Omit<CopyArgs, 'config'>) =>
+    copy({ path, data, config }),
 });

packages/client/src/restapi/copymove/move.ts

@@ -1,37 +1,29 @@
 import { z } from 'zod';
 import { ApiRequestParams, apiRequest } from '../../API';
-import {
-  PloneClientConfig,
-  PloneClientConfigSchema,
-} from '../../validation/config';
+import { PloneClientConfig } from '../../validation/config';
 import { copyMoveDataSchema as moveDataSchema } from '../../validation/copymove';
 import { CopyMoveResponse as MoveResponse } from '@plone/types';
 
-export const MoveArgsSchema = z.object({
-  path: z.string(),
-  data: moveDataSchema,
-  config: PloneClientConfigSchema,
-});
-
-export type MoveArgs = z.infer<typeof MoveArgsSchema>;
+export type MoveArgs = z.infer<typeof moveDataSchema> & {
+  config: PloneClientConfig;
+};
 
 export const move = async ({
   path,
   data,
   config,
 }: MoveArgs): Promise<MoveResponse> => {
-  const validatedArgs = MoveArgsSchema.parse({
+  const validatedArgs = moveDataSchema.parse({
     path,
     data,
-    config,
   });
 
   const options: ApiRequestParams = {
+    config,
     data: validatedArgs.data,
-    config: validatedArgs.config,
   };
 
-  const movePath = `/${validatedArgs.path}/@move`;
+  const movePath = `${validatedArgs.path}/@move`;
 
   return apiRequest('post', movePath, options);
 };

packages/client/src/validation/copymove.ts

@@ -1,5 +1,8 @@
 import { z } from 'zod';
 
 export const copyMoveDataSchema = z.object({
-  source: z.union([z.string(), z.array(z.string())]),
+  path: z.string(),
+  data: z.object({
+    source: z.union([z.string(), z.array(z.string())]),
+  }),
 });

packages/components/.release-it.json

@@ -5,7 +5,7 @@
   "hooks": {
     "after:bump": [
       "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version}",
-      "pnpm build"
+      "pnpm build:force"
     ],
     "after:release": "rm .changelog.draft"
   },

packages/components/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 2.0.0-alpha.12 (2024-10-03)
+
+### Feature
+
+- Update RAC to 1.4.0 - Added new `Disclosure` component and new Color widgets @sneridagh [#6364](https://github.com/plone/volto/issues/6364)
+
 ## 2.0.0-alpha.11 (2024-06-06)
 
 ### Bugfix

packages/components/package.json

@@ -8,7 +8,7 @@
     }
   ],
   "license": "MIT",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "repository": {
     "type": "git",
     "url": "http://github.com/plone/components.git"
@@ -116,11 +116,11 @@
     "vitest-axe": "^0.1.0"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.22.0",
-    "@react-spectrum/utils": "^3.11.1",
+    "@react-aria/utils": "^3.25.3",
+    "@react-spectrum/utils": "^3.11.11",
     "@storybook/test": "^8.0.4",
-    "clsx": "^2.0.0",
-    "react-aria-components": "^1.2.0"
+    "clsx": "^2.1.1",
+    "react-aria-components": "^1.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

packages/components/src/components/ColorArea/ColorArea.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ColorArea } from './ColorArea';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorArea.css';
+
+const meta = {
+  title: 'Widgets/ColorArea',
+  component: ColorArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorArea {...args} />,
+};
+
+Default.args = {
+  defaultValue: 'hsl(30, 100%, 50%)',
+};

packages/components/src/components/ColorArea/ColorArea.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {
+  ColorArea as RACColorArea,
+  ColorAreaProps,
+  ColorThumb,
+} from 'react-aria-components';
+
+export function ColorArea(props: ColorAreaProps) {
+  return (
+    <RACColorArea {...props}>
+      <ColorThumb />
+    </RACColorArea>
+  );
+}