feat: update to UI5 Web Components 2.20.0

.storybook/preview-head.html

@@ -184,6 +184,13 @@
     text-shadow: none;
   }
 
+  /*ToolbarItem overflow column display*/
+  ui5-toolbar-item:state(overflowed) .toolbar-item-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
   .docs-story > div > div[scale] {
     min-height: 20px;

config/version-info.json

@@ -61,5 +61,6 @@
   "2.16.1": "2.16.0",
   "2.17.0": "2.17.0",
   "2.18.0": "2.18.0",
-  "2.19.0": "2.19.0"
+  "2.19.0": "2.19.0",
+  "2.20.0": "2.20.0"
 }

package.json

@@ -40,11 +40,11 @@
     "@storybook/addon-a11y": "10.2.14",
     "@storybook/addon-docs": "10.2.14",
     "@storybook/react-vite": "10.2.14",
-    "@ui5/webcomponents": "2.19.2",
-    "@ui5/webcomponents-ai": "2.19.2",
-    "@ui5/webcomponents-compat": "2.19.2",
-    "@ui5/webcomponents-fiori": "2.19.2",
-    "@ui5/webcomponents-icons": "2.19.2",
+    "@ui5/webcomponents": "2.20.0",
+    "@ui5/webcomponents-ai": "2.20.0",
+    "@ui5/webcomponents-compat": "2.20.0",
+    "@ui5/webcomponents-fiori": "2.20.0",
+    "@ui5/webcomponents-icons": "2.20.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "remark-gfm": "4.0.1",
@@ -66,7 +66,7 @@
     "@types/node": "24.10.15",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@ui5/webcomponents-tools": "2.19.2",
+    "@ui5/webcomponents-tools": "2.20.0",
     "@vitejs/plugin-react": "5.1.4",
     "chromatic": "15.1.1",
     "cssnano": "7.1.2",

packages/ai/package.json

@@ -53,7 +53,7 @@
     "@ui5/webcomponents-react-base": "workspace:~"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-ai": "~2.19.0",
+    "@ui5/webcomponents-ai": "~2.20.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {

packages/base/package.json

@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.19.0",
+    "@ui5/webcomponents-base": "~2.20.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {

packages/charts/package.json

@@ -131,8 +131,8 @@
     "recharts": "2.15.4"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.19.0",
-    "@ui5/webcomponents-react-base": "~2.19.0",
+    "@ui5/webcomponents-react": "~2.20.0",
+    "@ui5/webcomponents-react-base": "~2.20.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {

packages/compat/package.json

@@ -93,8 +93,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.19.0",
-    "@ui5/webcomponents-react": "~2.19.0",
+    "@ui5/webcomponents-compat": "~2.20.0",
+    "@ui5/webcomponents-react": "~2.20.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/cypress-commands/package.json

@@ -23,8 +23,8 @@
     "clean": "rimraf dist api-commands.json api-queries.json"
   },
   "peerDependencies": {
-    "@ui5/webcomponents": "~2.19.0",
-    "@ui5/webcomponents-base": "~2.19.0",
+    "@ui5/webcomponents": "~2.20.0",
+    "@ui5/webcomponents-base": "~2.20.0",
     "cypress": "^12 || ^13 || ^14 || ^15"
   },
   "peerDependenciesMeta": {

packages/main/package.json

@@ -688,6 +688,10 @@
       "types": "./dist/webComponents/ToolbarButton/index.d.ts",
       "default": "./dist/webComponents/ToolbarButton/index.js"
     },
+    "./ToolbarItem": {
+      "types": "./dist/webComponents/ToolbarItem/index.d.ts",
+      "default": "./dist/webComponents/ToolbarItem/index.js"
+    },
     "./ToolbarSelect": {
       "types": "./dist/webComponents/ToolbarSelect/index.d.ts",
       "default": "./dist/webComponents/ToolbarSelect/index.js"
@@ -813,10 +817,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.19.0",
-    "@ui5/webcomponents-base": "~2.19.0",
-    "@ui5/webcomponents-fiori": "~2.19.0",
-    "@ui5/webcomponents-icons": "~2.19.0",
+    "@ui5/webcomponents": "~2.20.0",
+    "@ui5/webcomponents-base": "~2.20.0",
+    "@ui5/webcomponents-fiori": "~2.20.0",
+    "@ui5/webcomponents-icons": "~2.20.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/main/src/components/AnalyticalTable/pluginHooks/useF2CellEdit.ts

@@ -146,7 +146,13 @@ useF2CellEdit.useCallbackRef = <T extends HTMLElement = HTMLElement>(props: Cell
           if (typeof (el as Ui5DomRef).getFocusDomRefAsync === 'function') {
             void (el as Ui5DomRef)
               .getFocusDomRefAsync()
-              .then((resolved) => setTabIndex(resolved))
+              .then((resolved) => {
+                if (resolved && resolved !== el) {
+                  setTabIndex(resolved);
+                } else {
+                  el.setAttribute('tabindex', cellContentTabIndex);
+                }
+              })
               .catch(() => {
                 // fail silently
               });

packages/main/src/webComponents/Avatar/index.tsx

@@ -3,6 +3,7 @@
 import '@ui5/webcomponents/dist/Avatar.js';
 import type { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
 import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';
+import type AvatarMode from '@ui5/webcomponents/dist/types/AvatarMode.js';
 import type AvatarShape from '@ui5/webcomponents/dist/types/AvatarShape.js';
 import type AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
@@ -93,12 +94,32 @@ interface AvatarAttributes {
   /**
    * Defines if the avatar is interactive (focusable and pressable).
    *
+   * **Note:** When set to `true`, this property takes precedence over the `mode` property,
+   * and the avatar will be rendered as interactive (role="button", focusable) regardless of the `mode` value.
+   *
    * **Note:** This property won't have effect if the `disabled`
    * property is set to `true`.
    * @default false
+   * @deprecated Set `mode="Interactive"` instead for the same functionality with proper accessibility.
    */
   interactive?: boolean;
 
+  /**
+   * Defines the mode of the component.
+   *
+   * **Note:**
+   * - `Image` (default) - renders with role="img"
+   * - `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative
+   * - `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction
+   *
+   * **Note:** This property is ignored when the `interactive` property is set to `true`.
+   * In that case, the avatar will always be rendered as interactive.
+   *
+   * **Note:** Available since [v2.20](https://github.com/UI5/webcomponents/releases/tag/v2.20) of **@ui5/webcomponents**.
+   * @default "Image"
+   */
+  mode?: AvatarMode | keyof typeof AvatarMode;
+
   /**
    * Defines the shape of the component.
    * @default "Circle"
@@ -119,6 +140,10 @@ interface AvatarPropTypes
   /**
    * Defines the optional badge that will be used for visual affordance.
    *
+   * **Recommendation:** While badges are supported on all avatars, it is recommended
+   * to use them with interactive avatars (via `mode="Interactive"` or `interactive` attribute)
+   * to provide better user experience and accessibility.
+   *
    * **Note:** While the slot allows for custom badges, to achieve
    * the Fiori design, use the `AvatarBadge` component.
    *
@@ -169,7 +194,7 @@ interface AvatarPropTypes
  *
  * ### Keyboard Handling
  *
- * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `interactive` property is set to true.
  * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.
  *
  *
@@ -178,7 +203,17 @@ interface AvatarPropTypes
  */
 const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   'ui5-avatar',
-  ['accessibilityAttributes', 'accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'],
+  [
+    'accessibilityAttributes',
+    'accessibleName',
+    'colorScheme',
+    'fallbackIcon',
+    'icon',
+    'initials',
+    'mode',
+    'shape',
+    'size',
+  ],
   ['disabled', 'interactive'],
   ['badge'],
   ['click'],

packages/main/src/webComponents/Carousel/index.tsx

@@ -112,6 +112,7 @@ interface CarouselDomRef extends Required<CarouselAttributes>, Ui5DomRef {
   /**
    * Changes the currently displayed page.
    * @param {number} itemIndex - The index of the target item
+   * @returns {void}
    */
   navigateTo: (itemIndex: number) => void;
 

packages/main/src/webComponents/ColorPalette/index.tsx

@@ -6,11 +6,28 @@ import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
 
-interface ColorPaletteAttributes {}
+interface ColorPaletteAttributes {
+  /**
+   * Defines the accessible name of the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that label the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleNameRef?: string | undefined;
+}
 
 interface ColorPaletteDomRef extends Required<ColorPaletteAttributes>, Ui5DomRef {}
 
-interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps, 'children' | 'onItemClick'> {
+interface ColorPalettePropTypes
+  extends ColorPaletteAttributes, Omit<CommonProps, keyof ColorPaletteAttributes | 'children' | 'onItemClick'> {
   /**
    * Defines the `ColorPaletteItem` elements.
    *
@@ -41,7 +58,7 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps
  */
 const ColorPalette = withWebComponent<ColorPalettePropTypes, ColorPaletteDomRef>(
   'ui5-color-palette',
-  [],
+  ['accessibleName', 'accessibleNameRef'],
   [],
   [],
   ['item-click'],

packages/main/src/webComponents/ColorPalettePopover/index.tsx

@@ -8,6 +8,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-
 import type { ReactNode } from 'react';
 
 interface ColorPalettePopoverAttributes {
+  /**
+   * Defines the accessible name of the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that label the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleNameRef?: string | undefined;
+
   /**
    * Defines the default color of the component.
    *
@@ -114,7 +130,7 @@ interface ColorPalettePopoverPropTypes
  */
 const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, ColorPalettePopoverDomRef>(
   'ui5-color-palette-popover',
-  ['defaultColor', 'opener', 'placement'],
+  ['accessibleName', 'accessibleNameRef', 'defaultColor', 'opener', 'placement'],
   ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'],
   [],
   ['close', 'item-click'],

packages/main/src/webComponents/ColorPicker/index.tsx

@@ -5,6 +5,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 
 interface ColorPickerAttributes {
+  /**
+   * Defines the accessible name of the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that label the component.
+   *
+   * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleNameRef?: string | undefined;
+
   /**
    * Determines the name by which the component will be identified upon submission in an HTML form.
    *
@@ -66,7 +82,7 @@ interface ColorPickerPropTypes
  */
 const ColorPicker = withWebComponent<ColorPickerPropTypes, ColorPickerDomRef>(
   'ui5-color-picker',
-  ['name', 'value'],
+  ['accessibleName', 'accessibleNameRef', 'name', 'value'],
   ['simplified'],
   [],
   ['change'],