diff --git a/packages/cli/src/scripts/create-wrappers/AttributesRenderer.ts b/packages/cli/src/scripts/create-wrappers/AttributesRenderer.ts index 6dbc61b121f..3edf08a2c90 100644 --- a/packages/cli/src/scripts/create-wrappers/AttributesRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/AttributesRenderer.ts @@ -18,10 +18,10 @@ function mapWebComponentTypeToTsType(type: string) { return primitive; } switch (type) { - case 'HTMLElement | string | undefined': - case 'HTMLElement | string': - // opener props only accept strings as prop types - return 'string'; + // case 'HTMLElement | string | undefined': + // case 'HTMLElement | string': + // // opener props only accept strings as prop types + // return 'string'; default: if (!loggedTypes.has(type)) { @@ -70,7 +70,7 @@ export class AttributesRenderer extends AbstractRenderer { type = mapWebComponentTypeToTsType(type); const references = attribute.type?.references; - const isEnum = references != null && references?.length > 0; + const isEnum = references != null && references?.length > 0 && attribute._ui5validator !== 'Object'; if (isEnum) { type += ` | keyof typeof ${type}`; diff --git a/packages/cli/src/scripts/create-wrappers/main.ts b/packages/cli/src/scripts/create-wrappers/main.ts index 91a14ea43df..b867a8776dd 100644 --- a/packages/cli/src/scripts/create-wrappers/main.ts +++ b/packages/cli/src/scripts/create-wrappers/main.ts @@ -14,13 +14,7 @@ import { WebComponentWrapper } from './WebComponentWrapper.js'; const WITH_WEB_COMPONENT_IMPORT_PATH = process.env.WITH_WEB_COMPONENT_IMPORT_PATH ?? '@ui5/webcomponents-react'; function filterAttributes(member: CEM.ClassField | CEM.ClassMethod): member is CEM.ClassField { - return ( - member.kind === 'field' && - member.privacy === 'public' && - !member.readonly && - !member.static && - member._ui5validator !== 'Object' - ); + return member.kind === 'field' && member.privacy === 'public' && !member.readonly && !member.static; } interface Options { diff --git a/packages/main/src/internal/withWebComponent.cy.tsx b/packages/main/src/internal/withWebComponent.cy.tsx index baca92f020a..e392bf01b4a 100644 --- a/packages/main/src/internal/withWebComponent.cy.tsx +++ b/packages/main/src/internal/withWebComponent.cy.tsx @@ -1,11 +1,20 @@ import { - setCustomElementsScopingSuffix, - setCustomElementsScopingRules + setCustomElementsScopingRules, + setCustomElementsScopingSuffix } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; -import { useReducer, useState } from 'react'; -import { Bar, Button, Switch } from '../webComponents/index.js'; +import { useReducer, useRef, useState } from 'react'; +import type { ButtonDomRef } from '../webComponents/index.js'; +import { Bar, Button, Popover, Switch } from '../webComponents/index.js'; describe('withWebComponent', () => { + // reset scoping + afterEach(function () { + if (this.currentTest.title === 'scoping') { + // it's not possible to pass an empty string to `setCustomElementsScopingSuffix` + setCustomElementsScopingRules({ include: [/^ui5-/], exclude: [/.*/] }); + } + }); + it('Unmount Event Handlers correctly after prop update', () => { const custom = cy.spy().as('custom'); const nativePassedThrough = cy.spy().as('nativePassedThrough'); @@ -172,4 +181,44 @@ describe('withWebComponent', () => { cy.get('ui5-button').should('be.visible'); cy.get('ui5-button-ui5-wcr').should('not.exist'); }); + + it('pass objects & refs as props', () => { + const PopoverComponent = () => { + const btnRef = useRef(null); + const [open, setOpen] = useState(false); + return ( + <> + + { + setOpen(false); + }} + > + Popover Content + + + ); + }; + + cy.mount(); + cy.findByText('Test').should('have.attr', 'ui5-button'); + cy.wait(500); + cy.contains('Test').then(([$button]) => { + expect($button.accessibilityAttributes).to.deep.equal({ expanded: 'true' }); + }); + + cy.mount(); + cy.get('[ui5-popover]').should('exist').should('not.be.visible'); + cy.findByText('Opener').click(); + cy.get('[ui5-popover]').should('be.visible'); + }); }); diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 59d448ac0f4..caa51904a22 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -10,6 +10,10 @@ import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase } from './uti const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`; +const isPrimitiveAttribute = (value: unknown): boolean => { + return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'; +}; + type EventHandler = (event: CustomEvent) => void; export interface WithWebComponentPropTypes { @@ -49,7 +53,7 @@ export const withWebComponent = , RefType = Ui // regular props (no booleans, no slots and no events) const regularProps = regularProperties.reduce((acc, name) => { - if (rest.hasOwnProperty(name)) { + if (rest.hasOwnProperty(name) && isPrimitiveAttribute(rest[name])) { return { ...acc, [camelToKebabCase(name)]: rest[name] }; } return acc; @@ -158,6 +162,20 @@ export const withWebComponent = , RefType = Ui }); } }, [Component, waitForDefine, isDefined]); + + const propsToApply = regularProperties.map((prop) => ({ name: prop, value: props[prop] })); + useEffect(() => { + void customElements.whenDefined(Component as unknown as string).then(() => { + for (const prop of propsToApply) { + if (prop.value != null && !isPrimitiveAttribute(prop.value)) { + if (ref.current) { + ref.current[prop.name] = prop.value; + } + } + } + }); + }, [Component, ...propsToApply]); + if (waitForDefine && !isDefined) { return null; } diff --git a/packages/main/src/webComponents/Avatar/index.tsx b/packages/main/src/webComponents/Avatar/index.tsx index 41b4ab65bb0..68b69e27aaa 100644 --- a/packages/main/src/webComponents/Avatar/index.tsx +++ b/packages/main/src/webComponents/Avatar/index.tsx @@ -10,6 +10,18 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface AvatarAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following field is supported: + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: AvatarAccessibilityAttributes; + /** * Defines the text alternative of the component. * If not provided a default text alternative will be set, if present. @@ -95,18 +107,7 @@ interface AvatarAttributes { size?: AvatarSize | keyof typeof AvatarSize; } -interface AvatarDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following field is supported: - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: AvatarAccessibilityAttributes; -} +interface AvatarDomRef extends Required, Ui5DomRef {} interface AvatarPropTypes extends AvatarAttributes, Omit { /** @@ -152,7 +153,7 @@ interface AvatarPropTypes extends AvatarAttributes, Omit( 'ui5-avatar', - ['accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'], + ['accessibilityAttributes', 'accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'], ['disabled', 'interactive'], ['badge'], [], diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index cb634ebe1d9..0257388a24c 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -13,14 +13,6 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface AvatarGroupAttributes { - /** - * Defines the mode of the `AvatarGroup`. - * @default "Group" - */ - type?: AvatarGroupType | keyof typeof AvatarGroupType; -} - -interface AvatarGroupDomRef extends Required, Ui5DomRef { /** * Defines the additional accessibility attributes that will be applied to the component. * The following field is supported: @@ -29,9 +21,18 @@ interface AvatarGroupDomRef extends Required, Ui5DomRef { * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * @default {} */ - accessibilityAttributes: AvatarGroupAccessibilityAttributes; + accessibilityAttributes?: AvatarGroupAccessibilityAttributes; + /** + * Defines the mode of the `AvatarGroup`. + * @default "Group" + */ + type?: AvatarGroupType | keyof typeof AvatarGroupType; +} + +interface AvatarGroupDomRef extends Required, Ui5DomRef { /** * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component. */ @@ -140,7 +141,7 @@ interface AvatarGroupPropTypes */ const AvatarGroup = withWebComponent( 'ui5-avatar-group', - ['type'], + ['accessibilityAttributes', 'type'], [], ['overflowButton'], ['click', 'overflow'], diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 4ab415d6c46..4f892792d8f 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -10,6 +10,24 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface ButtonAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. + * Accepts the following string values: `true` or `false` + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * + * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. + * Accepts a lowercase string value. + * + * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ButtonAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -99,24 +117,7 @@ interface ButtonAttributes { type?: ButtonType | keyof typeof ButtonType; } -interface ButtonDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. - * Accepts the following string values: `true` or `false` - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. - * Accepts a lowercase string value. - * - * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ButtonAccessibilityAttributes; -} +interface ButtonDomRef extends Required, Ui5DomRef {} interface ButtonPropTypes extends ButtonAttributes, Omit { /** @@ -159,7 +160,17 @@ interface ButtonPropTypes extends ButtonAttributes, Omit( 'ui5-button', - ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'design', 'endIcon', 'icon', 'tooltip', 'type'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'accessibleNameRef', + 'accessibleRole', + 'design', + 'endIcon', + 'icon', + 'tooltip', + 'type' + ], ['disabled', 'submits'], [], ['click'], diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index 82a98e7a46f..1687819ff42 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -31,7 +31,7 @@ interface ColorPalettePopoverAttributes { * **Note:** Available since [v1.21.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.21.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: string; + opener?: HTMLElement | string | undefined; /** * Defines whether the user can choose the default color from a button. @@ -54,16 +54,7 @@ interface ColorPalettePopoverAttributes { showRecentColors?: boolean; } -interface ColorPalettePopoverDomRef extends Omit, 'opener'>, Ui5DomRef { - /** - * Defines the ID or DOM Reference of the element that the popover is shown at. - * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. - * You can only set the `opener` attribute to a DOM Reference when using JavaScript. - * - * **Note:** Available since [v1.21.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.21.0) of **@ui5/webcomponents**. - */ - opener: HTMLElement | string | undefined; -} +interface ColorPalettePopoverDomRef extends Required, Ui5DomRef {} interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttributes, diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx index 2320cfcf171..cb3224170fc 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx @@ -11,27 +11,6 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface FlexibleColumnLayoutAttributes { - /** - * Defines the visibility of the arrows, - * used for expanding and shrinking the columns. - * @default false - */ - hideArrows?: boolean; - - /** - * Defines the columns layout and their proportion. - * - * **Note:** The layout also depends on the screen size - one column for screens smaller than 599px, - * two columns between 599px and 1023px and three columns for sizes bigger than 1023px. - * - * **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns - * in 67%/33% proportion. - * @default "OneColumn" - */ - layout?: FCLLayout | keyof typeof FCLLayout; -} - -interface FlexibleColumnLayoutDomRef extends Required, Ui5DomRef { /** * Defines additional accessibility attributes on different areas of the component. * @@ -57,9 +36,31 @@ interface FlexibleColumnLayoutDomRef extends Required, Ui5DomRef { /** * Returns the current column layout, based on both the `layout` property and the screen size. * @@ -171,7 +172,7 @@ interface FlexibleColumnLayoutPropTypes */ const FlexibleColumnLayout = withWebComponent( 'ui5-flexible-column-layout', - ['layout'], + ['accessibilityAttributes', 'layout'], ['hideArrows'], ['endColumn', 'midColumn', 'startColumn'], ['layout-change'], diff --git a/packages/main/src/webComponents/Link/index.tsx b/packages/main/src/webComponents/Link/index.tsx index 80a203c16d4..f5967ae14cb 100644 --- a/packages/main/src/webComponents/Link/index.tsx +++ b/packages/main/src/webComponents/Link/index.tsx @@ -10,6 +10,21 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface LinkAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. + * Accepts the following string values: `true` or `false`. + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * + * **Note:** Available since [v1.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.1.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: LinkAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @@ -114,21 +129,7 @@ interface LinkAttributes { wrappingType?: WrappingType | keyof typeof WrappingType; } -interface LinkDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. - * Accepts the following string values: `true` or `false`. - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - * **Note:** Available since [v1.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.1.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: LinkAccessibilityAttributes; -} +interface LinkDomRef extends Required, Ui5DomRef {} interface LinkPropTypes extends LinkAttributes, Omit { /** @@ -178,6 +179,7 @@ interface LinkPropTypes extends LinkAttributes, Omit( 'ui5-link', [ + 'accessibilityAttributes', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/ListItemCustom/index.tsx b/packages/main/src/webComponents/ListItemCustom/index.tsx index 1519ab32d2a..53bbf7e0115 100644 --- a/packages/main/src/webComponents/ListItemCustom/index.tsx +++ b/packages/main/src/webComponents/ListItemCustom/index.tsx @@ -9,6 +9,20 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemCustomAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; /** * Defines the text alternative of the component. * @@ -66,21 +80,7 @@ interface ListItemCustomAttributes { type?: ListItemType | keyof typeof ListItemType; } -interface ListItemCustomDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; -} +interface ListItemCustomDomRef extends Required, Ui5DomRef {} interface ListItemCustomPropTypes extends ListItemCustomAttributes, @@ -121,7 +121,7 @@ interface ListItemCustomPropTypes */ const ListItemCustom = withWebComponent( 'ui5-li-custom', - ['accessibleName', 'highlight', 'tooltip', 'type'], + ['accessibilityAttributes', 'accessibleName', 'highlight', 'tooltip', 'type'], ['movable', 'navigated', 'selected'], ['deleteButton'], ['detail-click'], diff --git a/packages/main/src/webComponents/ListItemStandard/index.tsx b/packages/main/src/webComponents/ListItemStandard/index.tsx index b8bdfd56bf0..f1636e0be76 100644 --- a/packages/main/src/webComponents/ListItemStandard/index.tsx +++ b/packages/main/src/webComponents/ListItemStandard/index.tsx @@ -10,6 +10,20 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemStandardAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; /** * Defines the text alternative of the component. * Note: If not provided a default text alternative will be set, if present. @@ -108,21 +122,7 @@ interface ListItemStandardAttributes { type?: ListItemType | keyof typeof ListItemType; } -interface ListItemStandardDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; -} +interface ListItemStandardDomRef extends Required, Ui5DomRef {} interface ListItemStandardPropTypes extends ListItemStandardAttributes, @@ -187,6 +187,7 @@ interface ListItemStandardPropTypes const ListItemStandard = withWebComponent( 'ui5-li', [ + 'accessibilityAttributes', 'accessibleName', 'additionalText', 'additionalTextState', diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index 85b4d06b8d8..d280c4b47bc 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -47,19 +47,10 @@ interface MenuAttributes { * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. */ - opener?: string; + opener?: HTMLElement | string; } -interface MenuDomRef extends Omit, 'opener'>, Ui5DomRef { - /** - * Defines the ID or DOM Reference of the element at which the menu is shown. - * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. - * You can only set the `opener` attribute to a DOM Reference when using JavaScript. - * - * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. - */ - opener: HTMLElement | string; -} +interface MenuDomRef extends Required, Ui5DomRef {} interface MenuPropTypes extends MenuAttributes, diff --git a/packages/main/src/webComponents/MenuItem/index.tsx b/packages/main/src/webComponents/MenuItem/index.tsx index a360ee1bf2a..b7052d2c7f3 100644 --- a/packages/main/src/webComponents/MenuItem/index.tsx +++ b/packages/main/src/webComponents/MenuItem/index.tsx @@ -9,6 +9,21 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MenuItemAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @@ -118,21 +133,7 @@ interface MenuItemAttributes { type?: ListItemType | keyof typeof ListItemType; } -interface MenuItemDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; -} +interface MenuItemDomRef extends Required, Ui5DomRef {} interface MenuItemPropTypes extends MenuItemAttributes, @@ -209,7 +210,17 @@ interface MenuItemPropTypes */ const MenuItem = withWebComponent( 'ui5-menu-item', - ['accessibleName', 'additionalText', 'highlight', 'icon', 'loadingDelay', 'text', 'tooltip', 'type'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'additionalText', + 'highlight', + 'icon', + 'loadingDelay', + 'text', + 'tooltip', + 'type' + ], ['disabled', 'loading', 'navigated', 'selected', 'startsSection'], ['deleteButton', 'endContent'], ['detail-click'], diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index 934691bb630..52739e446b6 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -90,7 +90,7 @@ interface PopoverAttributes { * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: string; + opener?: HTMLElement | string | undefined; /** * Determines on which side the component is placed at. @@ -120,22 +120,13 @@ interface PopoverAttributes { verticalAlign?: PopoverVerticalAlign | keyof typeof PopoverVerticalAlign; } -interface PopoverDomRef extends Omit, 'opener'>, Ui5DomRef { +interface PopoverDomRef extends Required, Ui5DomRef { /** * Focuses the element denoted by `initialFocus`, if provided, * or the first focusable element otherwise. * @returns {Promise} - Promise that resolves when the focus is applied */ applyFocus: () => Promise; - - /** - * Defines the ID or DOM Reference of the element at which the popover is shown. - * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. - * You can only set the `opener` attribute to a DOM Reference when using JavaScript. - * - * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. - */ - opener: HTMLElement | string | undefined; } interface PopoverPropTypes diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index c864e520231..ba78dc339a8 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -90,7 +90,7 @@ interface ResponsivePopoverAttributes { * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: string; + opener?: HTMLElement | string | undefined; /** * Determines on which side the component is placed at. @@ -120,22 +120,13 @@ interface ResponsivePopoverAttributes { verticalAlign?: PopoverVerticalAlign | keyof typeof PopoverVerticalAlign; } -interface ResponsivePopoverDomRef extends Omit, 'opener'>, Ui5DomRef { +interface ResponsivePopoverDomRef extends Required, Ui5DomRef { /** * Focuses the element denoted by `initialFocus`, if provided, * or the first focusable element otherwise. * @returns {Promise} - Promise that resolves when the focus is applied */ applyFocus: () => Promise; - - /** - * Defines the ID or DOM Reference of the element at which the popover is shown. - * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. - * You can only set the `opener` attribute to a DOM Reference when using JavaScript. - * - * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. - */ - opener: HTMLElement | string | undefined; } interface ResponsivePopoverPropTypes diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx index 080c1e3e0c1..c822d42f58e 100644 --- a/packages/main/src/webComponents/ShellBar/index.tsx +++ b/packages/main/src/webComponents/ShellBar/index.tsx @@ -15,6 +15,40 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ShellBarAttributes { + /** + * Defines additional accessibility attributes on different areas of the component. + * + * The accessibilityAttributes object has the following fields, + * where each field is an object supporting one or more accessibility attributes: + * + * - **logo** - `logo.role` and `logo.name`. + * - **notifications** - `notifications.expanded` and `notifications.hasPopup`. + * - **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`. + * - **product** - `product.expanded` and `product.hasPopup`. + * - **search** - `search.expanded` and `search.hasPopup`. + * - **overflow** - `overflow.expanded` and `overflow.hasPopup`. + * + * The accessibility attributes support the following values: + * + * - **role**: Defines the accessible ARIA role of the logo area. + * Accepts the following string values: `button` or `link`. + * + * - **expanded**: Indicates whether the button, or another grouping element it controls, + * is currently expanded or collapsed. + * Accepts the following string values: `true` or `false`. + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, + * such as menu or dialog, that can be triggered by the button. + * + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * - **name**: Defines the accessible ARIA name of the area. + * Accepts any string. + * + * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents-fiori**. + * @default {} + */ + accessibilityAttributes?: ShellBarAccessibilityAttributes; + /** * Defines the `notificationsCount`, * displayed in the notification icon top-right corner. @@ -57,39 +91,6 @@ interface ShellBarAttributes { } interface ShellBarDomRef extends Required, Ui5DomRef { - /** - * Defines additional accessibility attributes on different areas of the component. - * - * The accessibilityAttributes object has the following fields, - * where each field is an object supporting one or more accessibility attributes: - * - * - **logo** - `logo.role` and `logo.name`. - * - **notifications** - `notifications.expanded` and `notifications.hasPopup`. - * - **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`. - * - **product** - `product.expanded` and `product.hasPopup`. - * - **search** - `search.expanded` and `search.hasPopup`. - * - **overflow** - `overflow.expanded` and `overflow.hasPopup`. - * - * The accessibility attributes support the following values: - * - * - **role**: Defines the accessible ARIA role of the logo area. - * Accepts the following string values: `button` or `link`. - * - * - **expanded**: Indicates whether the button, or another grouping element it controls, - * is currently expanded or collapsed. - * Accepts the following string values: `true` or `false`. - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, - * such as menu or dialog, that can be triggered by the button. - * - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - **name**: Defines the accessible ARIA name of the area. - * Accepts any string. - * - * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents-fiori**. - */ - accessibilityAttributes: ShellBarAccessibilityAttributes; - /** * Closes the overflow area. * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event @@ -296,7 +297,7 @@ interface ShellBarPropTypes */ const ShellBar = withWebComponent( 'ui5-shellbar', - ['notificationsCount', 'primaryTitle', 'secondaryTitle'], + ['accessibilityAttributes', 'notificationsCount', 'primaryTitle', 'secondaryTitle'], ['showNotifications', 'showProductSwitch', 'showSearchField'], ['assistant', 'logo', 'menuItems', 'profile', 'searchField', 'startButton'], [ diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index e186f671e83..c106d737996 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -10,6 +10,24 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface ToggleButtonAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. + * Accepts the following string values: `true` or `false` + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * + * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. + * Accepts a lowercase string value. + * + * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ButtonAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -105,24 +123,7 @@ interface ToggleButtonAttributes { type?: ButtonType | keyof typeof ButtonType; } -interface ToggleButtonDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. - * Accepts the following string values: `true` or `false` - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. - * Accepts a lowercase string value. - * - * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ButtonAccessibilityAttributes; -} +interface ToggleButtonDomRef extends Required, Ui5DomRef {} interface ToggleButtonPropTypes extends ToggleButtonAttributes, @@ -159,7 +160,17 @@ interface ToggleButtonPropTypes */ const ToggleButton = withWebComponent( 'ui5-toggle-button', - ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'design', 'endIcon', 'icon', 'tooltip', 'type'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'accessibleNameRef', + 'accessibleRole', + 'design', + 'endIcon', + 'icon', + 'tooltip', + 'type' + ], ['disabled', 'pressed', 'submits'], [], ['click'], diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index e6b71f65632..c51e243e093 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -9,6 +9,23 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface ToolbarButtonAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * + * The following fields are supported: + * + * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. + * Accepts the following string values: `true` or `false` + * + * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. + * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. + * + * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. + * Accepts a lowercase string value. + * @default {} + */ + accessibilityAttributes?: ButtonAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -90,23 +107,7 @@ interface ToolbarButtonAttributes { width?: CSSProperties['width'] | CSSProperties['height']; } -interface ToolbarButtonDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * - * The following fields are supported: - * - * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. - * Accepts the following string values: `true` or `false` - * - * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. - * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. - * - * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. - * Accepts a lowercase string value. - */ - accessibilityAttributes: ButtonAccessibilityAttributes; -} +interface ToolbarButtonDomRef extends Required, Ui5DomRef {} interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, @@ -134,7 +135,18 @@ interface ToolbarButtonPropTypes */ const ToolbarButton = withWebComponent( 'ui5-toolbar-button', - ['accessibleName', 'accessibleNameRef', 'design', 'endIcon', 'icon', 'overflowPriority', 'text', 'tooltip', 'width'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'accessibleNameRef', + 'design', + 'endIcon', + 'icon', + 'overflowPriority', + 'text', + 'tooltip', + 'width' + ], ['disabled', 'preventOverflowClosing'], [], ['click'], diff --git a/packages/main/src/webComponents/TreeItem/index.tsx b/packages/main/src/webComponents/TreeItem/index.tsx index 599bac91376..ae66bc28941 100644 --- a/packages/main/src/webComponents/TreeItem/index.tsx +++ b/packages/main/src/webComponents/TreeItem/index.tsx @@ -10,6 +10,21 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeItemAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; + /** * Defines the accessible name of the component. * @@ -125,20 +140,6 @@ interface TreeItemAttributes { } interface TreeItemDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; - /** * Call this method to manually switch the `expanded` state of a tree item. * @returns {void} @@ -189,7 +190,17 @@ interface TreeItemPropTypes */ const TreeItem = withWebComponent( 'ui5-tree-item', - ['accessibleName', 'additionalText', 'additionalTextState', 'highlight', 'icon', 'text', 'tooltip', 'type'], + [ + 'accessibilityAttributes', + 'accessibleName', + 'additionalText', + 'additionalTextState', + 'highlight', + 'icon', + 'text', + 'tooltip', + 'type' + ], ['expanded', 'hasChildren', 'indeterminate', 'movable', 'navigated', 'selected'], ['deleteButton'], ['detail-click'], diff --git a/packages/main/src/webComponents/TreeItemCustom/index.tsx b/packages/main/src/webComponents/TreeItemCustom/index.tsx index 10fb5f5432d..c4cb7ddec2c 100644 --- a/packages/main/src/webComponents/TreeItemCustom/index.tsx +++ b/packages/main/src/webComponents/TreeItemCustom/index.tsx @@ -10,6 +10,21 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeItemCustomAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; + /** * Defines the accessible name of the component. * @@ -121,20 +136,6 @@ interface TreeItemCustomAttributes { } interface TreeItemCustomDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; - /** * Call this method to manually switch the `expanded` state of a tree item. * @returns {void} @@ -200,7 +201,7 @@ interface TreeItemCustomPropTypes */ const TreeItemCustom = withWebComponent( 'ui5-tree-item-custom', - ['accessibleName', 'additionalTextState', 'highlight', 'icon', 'tooltip', 'type'], + ['accessibilityAttributes', 'accessibleName', 'additionalTextState', 'highlight', 'icon', 'tooltip', 'type'], ['expanded', 'hasChildren', 'hideSelectionElement', 'indeterminate', 'movable', 'navigated', 'selected'], ['content', 'deleteButton'], ['detail-click'], diff --git a/packages/main/src/webComponents/UploadCollectionItem/index.tsx b/packages/main/src/webComponents/UploadCollectionItem/index.tsx index 0dc5e362286..61c281ae0b4 100644 --- a/packages/main/src/webComponents/UploadCollectionItem/index.tsx +++ b/packages/main/src/webComponents/UploadCollectionItem/index.tsx @@ -10,12 +10,33 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface UploadCollectionItemAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. + * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. + * + * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. + * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * + * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents-fiori**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; + /** * Disables the delete button. * @default false */ disableDeleteButton?: boolean; + /** + * Holds an instance of `File` associated with this item. + * @default null + */ + file?: File | null | undefined; + /** * The name of the file. */ @@ -108,26 +129,7 @@ interface UploadCollectionItemAttributes { uploadState?: UploadState | keyof typeof UploadState; } -interface UploadCollectionItemDomRef extends Required, Ui5DomRef { - /** - * Defines the additional accessibility attributes that will be applied to the component. - * The following fields are supported: - * - * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. - * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. - * - * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. - * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. - * - * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents-fiori**. - */ - accessibilityAttributes: ListItemAccessibilityAttributes; - - /** - * Holds an instance of `File` associated with this item. - */ - file: File | null | undefined; -} +interface UploadCollectionItemDomRef extends Required, Ui5DomRef {} interface UploadCollectionItemPropTypes extends UploadCollectionItemAttributes, @@ -220,7 +222,7 @@ interface UploadCollectionItemPropTypes */ const UploadCollectionItem = withWebComponent( 'ui5-upload-collection-item', - ['fileName', 'highlight', 'progress', 'tooltip', 'type', 'uploadState'], + ['accessibilityAttributes', 'file', 'fileName', 'highlight', 'progress', 'tooltip', 'type', 'uploadState'], [ 'disableDeleteButton', 'fileNameClickable',